Web blog WEBブログ

シンプルに実装できる「もっと見る」ボタン

2020.12.12

※この記事は2020年12月12日時点の情報をもとに作成されました。

こんにちは。コーダーの兼山です。

ニュースサイトやブログサイトなど、情報量の多くなりがちなサイトを、ユーザーが見易くすることに有効な「もっと見る」ボタンを簡単に実装する方法を紹介します。

長文テキストの続きを表示するタイプの「もっと見る」ボタンの設置方法

こちらの例では、デフォルトで表示しておきたいコンテンツと、非表示にしておきたいコンテンツを分けておき、「もっと見る」ボタンをクリックすることで、非表示部分を表示します。

更に、非表示部分を表示している間の「もっと見る」ボタンは、「閉じる」ボタンに変わり、「閉じる」ボタンをクリックすることで、非表示部分を再度、隠します。

リストなどのコンテンツを、指定の要素数ごとに表示するタイプの「もっと見る」ボタンの設置方法

こちらの例では、「もっと見る」ボタンをクリックすることで、指定した数の分ずつリストを表示します。
表示するリストの数は5個ずつとし、全てのリストを表示したら「もっと見る」ボタンをフェードアウトします。

まとめ

サイトの情報量が多い場合、優先度の低い情報をデフォルトで隠しておくことで、ユーザーはページ全体の情報を把握し易くなります。
また、モバイルでサイトを見る際も、特性上、片手でスクロールを操作することが多いため、縦スクロールの操作を減らすことは、ユーザビリティを向上させることに繋がります。

ご相談・カスタマイズご依頼

弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

この記事を読んだ方はこんな記事も読んでいます

こんにちは。コーダーの兼山です。 今回は、ECサイトのタイムセールや、数値を強調するサイトなどで使える、動きのあるカウン…

WebPはGoogleが開発した画像フォーマットで、従来のJPEGやPNGよりも高品質かつ小さいファイルサイズを実現しま…

こんにちは。コーダーの兼山です。 Web用画像の切り出しには、スライスで切り出すコーダーさん、多いのではないでしょうか。…

無料相談窓口