全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
シンプルに実装できる「もっと見る」ボタン
2020.12.12
※この記事は2020年12月12日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
ニュースサイトやブログサイトなど、情報量の多くなりがちなサイトを、ユーザーが見易くすることに有効な「もっと見る」ボタンを簡単に実装する方法を紹介します。
長文テキストの続きを表示するタイプの「もっと見る」ボタンの設置方法
こちらの例では、デフォルトで表示しておきたいコンテンツと、非表示にしておきたいコンテンツを分けておき、「もっと見る」ボタンをクリックすることで、非表示部分を表示します。
更に、非表示部分を表示している間の「もっと見る」ボタンは、「閉じる」ボタンに変わり、「閉じる」ボタンをクリックすることで、非表示部分を再度、隠します。
リストなどのコンテンツを、指定の要素数ごとに表示するタイプの「もっと見る」ボタンの設置方法
こちらの例では、「もっと見る」ボタンをクリックすることで、指定した数の分ずつリストを表示します。
表示するリストの数は5個ずつとし、全てのリストを表示したら「もっと見る」ボタンをフェードアウトします。
まとめ
サイトの情報量が多い場合、優先度の低い情報をデフォルトで隠しておくことで、ユーザーはページ全体の情報を把握し易くなります。
また、モバイルでサイトを見る際も、特性上、片手でスクロールを操作することが多いため、縦スクロールの操作を減らすことは、ユーザビリティを向上させることに繋がります。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
