Webサイトの下層ページのデザインには以下のような特徴があることが多いです。

• MVに共通のデザインを使用している
• パンくずリストがある
• 共通のh2、h3、h4デザインを流用している

※パンくずリストとは

これに共感してくれる人も多いのではないでしょうか。実際に以下に添付するWebサイトなどは、TOP以下のページのMVは共通している、あるいは似たデザインを流用しています。

東京のWEB制作会社・ホームページ制作会社｜株式会社GIG

株式会社GIGは東京のWEB制作、ホームページ制作会社、システム開発会社です。WEBサイトやメディアサイトの企画・制作・運用、WEBマーケティング、システム開発、体制構築、及び人工知能をかけ合わせたライフスタイル領域のサービスを開発しています。

https://giginc.co.jp

• TOP以下のページ(worksやblogなど)が似たようなMVをそなえている。
• パンくずリストがある。
• 制作実績の各記事においてh2要素は全て、左側に斜めの黄色い線が引かれている。

  

十二分屋【公式】滋賀・千葉・京都・山形・静岡

http://www.juunibunya.com

• 「ホーム」以下のページのMVは全て、画像に中心にタイトルという見た目になっている。

新潮社

新潮社の公式サイト。書籍、文庫、新書、雑誌、コミック、デジタルコンテンツの最新情報。書籍検索、文学賞の紹介、採用情報

https://www.shinchosha.co.jp

• MVというほどのものはないが、下層ページは全て左上にタイトルがくる同じフォーマットになっている。
• パンくずリストがある。

Webデザインにおいて、h2やh3要素には同じデザインを流用しているケースが非常に多いです。h2要素には左側に縦棒のデザイン、h3要素にはh2より小さい文字に下線が引かれているといったデザインが世の中には溢れている気がします(筆者の主観)。読者の方も下のようなデザインを普段多く目にするのではないでしょうか。

Webデザインにおいて共通のh2、h3要素が多い理由は主に二つ考えられます。一つはデザインコストの省エネです。単純に要素それぞれに対してデザインを作っていたらコストが膨大になってしまうでしょう。二つ目はユーザーが文書の構造を理解しやすくするためです。見出しの階層ごとにデザインを統一することで、初めてページを訪れたユーザーでもすぐにページの構造を理解できるようになります。

パンくずリストを載せる目的は、ひとことでいえば、ユーザーがWebサイトの中でどの階層を閲覧しているのかを伝えることです。Webサイトによってはページ数が非常に多く、それゆえ階層も深いことがあります。そのようなサイトでは、ユーザーは自分がサイト内のどのページを閲覧しているかがわからなくなってしまうことがあります。パンくずリストは、ユーザーがサイト内で迷子にならないよう助けるだけでなく、ユーザーがサイトの構造を理解することのヒントになるのです。

自分もこの記事を書いているときに初めて知ったのですが、世の中には「下層ページ専用参考サイト集」なるものがあるらしいです。これを使えば、共通のMVを作るときにいい着想が得られるかもしれません。

下層サイトデザイン - UL DESIGN 下層ページ専用参考サイト集【クロスラボ】

- 悩めるWeb担当に捧げる、サイトの下層ページ参考デザイン集です。事業案内、会社概要、フォームなどいつも同じデザインになってしまう、コンテンツ量が少ないなどのお悩みにお応えして、クロスラボがこの下層ページすてきだなと思うサイトを集めました！選定ポイント付きでお届けします。

https://crosslabo.com