スマホ時代のWebデザイン｜レスポンシブに強い下層ページヘッダーデザイン

Webサイトの下層ページにある、パンくずリストやページタイトルが入る、ページ冒頭のエリア。
トップページほど目立つ存在ではないけれど、実はかなり頻繁に目にする場所でもあります。
この記事では、この部分をひとまず 「ページヘッダー」 と呼ぶことにします。

パソコンで見ると綺麗だけど…？

私が入社したばかりの頃は、写真の上にページタイトルの文字を置くデザインをよく見かけていた気がします。
ページの“顔”が一瞬で伝わって、見た目も華やかなデザインです。

ただ、レスポンシブ対応が当たり前になり、スマートフォンで見たときに、一気に難易度が上がったように感じています。

• 画面サイズによって写真の切り取られ方が変わる

• 文字と写真が重なる位置がズレる

• 結果、文字が読みにくくなる

これはこの記事のために作成した架空のデザインですが、実務で似たような経験がある方も多いのではないでしょうか。

うまくいっているページヘッダーは、だいたい3つの考え方に分かれる

いろいろなサイトを見ていく中で、レスポンシブ対応がうまくいっているページヘッダーには、ある程度共通点があるように感じました。
個人的な整理ではありますが、大きく3つの考え方に分けてみました。

① 文字と写真をきっぱり分けるタイプ

まずは安心、可読性重視
このタイプは、文字が読みやすくレスポンシブで破綻しにくいというのが大きな強みです。

【Case1】横並びのレイアウト

文字と写真を横並びで配置したレイアウト。
サイト内で繰り返し使われる円形で写真が切り抜かれています。

【Case2】縦並びのレイアウト

こちらは縦並びの構成。
情報の流れが自然で、スマートフォンでも読みやすい印象です。

② 写真の上に文字を置くタイプ

高度な写真設計が必要
文字を置く前提で、
写真上部がかなりすっきりした構図になっているのが印象的です。
写真が主役になり、世界観を強く伝えられる一方で、
写真選びと構図設計の難易度はかなり高いタイプだなと感じます。

【Case3】トリミング位置を工夫

PCとスマートフォンで、
写真のトリミング位置がうまく調整されていて、
どちらの画面でも文字の収まりがきれいです。

【Case4】文字を置く前提の写真構図

文字を置く前提で、写真上部がすっきりとしていて文字と被らない位置に人物が来る構図になっています。

③抽象的なモチーフで構成するタイプ

レスポンシブとの相性が良い
文字と重なっても可読性が大きく損なわれず、レスポンシブ対応がとても考えやすいタイプだと思います。

【Case5】ロゴとリンクする抽象モチーフ

ロゴと親和性のある斜めラインを使ったデザイン。
文字が重なっても可読性が落ちない配色が印象的です。

【Case6】動きで魅せる背景デザイン

背景のテクスチャが常に動いていて、抽象的な表現とアニメーションの相性の良さを感じます。

ちょっと変わり種のページヘッダー

【Case7】抽象×人物写真×アニメーション

抽象的な背景に、コマ撮りアニメのように動く人物写真を組み合わせたデザイン。
③の発展形のようで、かなり印象に残ります。

【Case8】文字そのものをデザインする

文字そのものに尻尾のような装飾を加える表現。
図形ではなく「文字で個性を出す」という発想が新鮮でした。

まとめ｜ページヘッダーに迷ったら

今回紹介した3つのパターンを知っておくだけでも、レスポンシブ対応したページヘッダーは、かなり考えやすくなると思います。

下層ページのヘッダーは、下層ページの数だけ繰り返し目に入るデザインです。
TOPページが第一印象だとしたら、下層ページは、何度も見ることで印象を積み重ねていく場所。

だからこそ、写真を主役にしたいのか、情報をきちんと読ませたいのかといったサイトの目的やトンマナが、そのまま表れやすいのだと思います。

また基本となるレイアウトがあると、「どこで個性を出そうか？」を考える土台ができて、UIの使いやすさから、UXの心地よさへと自然につながっていきます。

ちゃんと考えるとかなり奥が深い。
そんなページヘッダーのデザインでした。