ブログ
勉強して学びを得たときの疑問や改善点などを日々記録しています。
是非ご参考までに覗いてみてください。
-
へけ -
くりぷろスタジオの中では一番の年長者です。毎日、一緒に働いている皆様たちに助けられています。一見、しっかり者ですが年相応のうっかりも時々あります。とにかく、寝ることが楽しみです。平穏に毎日が過ごせたらいいなぁと思っています。
Webサイトはデザインの原則である反復を利用しよう！
WEBサイトの顔「ヘッダー」
Webサイトの構造は、ユーザーにとってサイトが分かりやすく、目的の情報を容易に見つけられるように設計されることが重要です。
特に注目されるのは、Webサイトのヘッダーではないでしょうか？
ヘッダーとは、Webサイトの最上部の領域で、企業のロゴやキャッチコピーなどを配置した、自社のブランドイメージを伝えるための非常に重要な役割があります。
あるサイトのトップページと下層ページを参考に見てみましょう。
自費リハビリ施設アールリハビリステーション
こちらは、「自費リハビリ施設アールリハビリステーション」様のホームページです。
トップページのヘッダーには、ロゴ・ナビゲーション・問い合わせ用のアイコンが横並びに配置されています。
そして、いま開かれているページが一目で解るように、ナビゲーションメニューの「トップ」の項目の上に印が付いています。このナビゲーションメニューの項目の印は下層ページを開くと、しっかりその下層ページの項目の上に移動しています。
これは、デザインの基本原則である、「反復」を用いています。
反復の原則とは、色・形・レイアウト・フォントなど、何らかの特徴があるデザイン的な要素を、意識的に繰り返すことです。要素の繰り返し、一貫性の維持、情報の整理、同じ要素を繰り返すことによって、ユーザーの記憶に残りやすくなります。
そして、フッターにも同様のことがいえます。企業情報や著作権表示、SNSリンク、お問合せ先など重要なナビゲーションを提供する役割があるので、ヘッダー同様、サイトの全ページに反復して表示させると、よりユーザーの回遊率向上や信頼性の向上につながるでしょう。
これらを踏まえたうえで、もう一つ別のサイトを見てみましょう。
WALLPAPERMAGIC多摩・武蔵野地区の“壁紙”セレクト・施工店
※引用 WALLPAPERMAGIC多摩・武蔵野地区の“壁紙”セレクト・施工店
こちらは、「WALLPAPERMAGIC多摩・武蔵野地区の“壁紙”セレクト・施工店」様のホームページです。
企業のロゴが、パッと目に付きやすく、ナビゲーションは縦並びで重要な項目が表示されており、その他の項目は「メニュー」としてスッキリまとめられています。
下層ページに移動しても、それらの位置は同じ位置に固定されていて、しっかりとした統一感があります。フッターも、企業情報がまとめられており、「ページの先頭へ」戻るボタンも配置されていて、ユーザーが使いやすい仕様になっています。
Webサイトの下層ページにも、同じデザインのヘッダー・フッターを反復させる理由は、サイト全体の統一感を出し、ユーザーのナビゲーションを行いやすくするためです。下層ページにもデザインを統一することにより、ユーザーは迷子にならずサイト内をスムーズに閲覧でき、また常に同じ場所にヘッダーが表示されることで、ユーザビリティ（使いやすさ、有効性）の向上にもつながります。
反復の原則注意点
ヘッダーとフッターのデザインにおいてとても重要な反復の原則ですが、注意すべき点があります。
過剰な反復は避ける＝デザインが単調になってしまうおそれがある。
全体のバランスを考慮する＝他のデザインの原則（近接・整列・対比）との組み合わせ、サイト全体のバランスをよく考えて反復を用いる。
以上の点に気を付けながら、色々なサイトを観察すると素晴らしいヘッダーに出会えると思います。