デザイン
迷ったら試したい 下層ページの見出しデザインの参考になる14つの技法
2018年09月23日 14:00
こんにちは！社員Aです👩
最近おからパウダーが流行っていて、ダイエットにも良いというのを小耳に挟んだので、私も楽天で手に入れようと思ったらあまりの品切れと価格暴騰に驚いてアプリをそっと閉じました…。
ブームが落ち着いたら在庫も安定してきてもう少し安くなるんでしょうか…？
「もう試したよ」という方がいらっしゃったらぜひ感想お聞かせください！（笑）
さて、今日は下層ページの見出しデザインの参考になるサイトをピックアップします。
もくじ
意外と頭を悩ませる下層ページの見出しデザイン
下層ページの見出しデザインは、例えば弊社のサイトで言えば下記の「WORKS 制作実績」のタイトル部分です。
ヘッダーのすぐ下にある、そのページのタイトルになる部分ですね。
このデザインは意外とデザインに迷うことが多く、デザインパターンが似たり寄ったりになってきてしまうのが悩みです。
その度に、他のサイトデザインをみたりして刺激をもらっているのですが、今回はそんな下層ページの見出しデザインのパターンをいくつかピックアップしてみましたので、ご紹介します。
写真とシェイプを重ねてみる
写真を全面に使うわけではなく、シェイプと組み合わせてフラットなデザインながらも立体感も出せますね。
中央にタイトル（英語と日本語）を持ってきています。
シェイプやイラストを添える
タイトルにシェイプやイラストを加えるだけで、デザインの物足りなさをカバーできます。
背景にうっすらと写真を入れる
これはよく見るパターンかもしれません。
そのページのイメージ写真をぼかしたり、薄くしたりして背景にし、その上にタイトルを置く技法です。
文字だけよりもインパクトがあり、イメージも伝わりやすいですね。
写真の上に白枠を入れて飾り付ける
写真の上に透過した白枠を配置し、その上にタイトルを載せる技法です。
上記サイトでは飾りや文字サイズのジャンプ率も上げていて、すっきりとして読みやすいですね。
背景から少しずらす
背景として入れている部分から白枠部分をすこしずらして、フラットデザインながら少しインパクトを出せます。
また、タイトル「Wedding Ring」の横にはラインを入れて、タイトルをより強調しています。
あえて縦書きにする
タイトルが横書きである必要はないということがよく分かる見出しデザインです。
シンプルなのに、インパクトがあります。
タイトル文字にだけ背景色をつける
タイトル部分に使用する写真がサイト映えするものであれば、文字で見づらくしたくないもの。
そのために、文字にだけ背景をつけることで、写真も文字も目立たせることが出来ます。
写真の形にこだわる
タイトルはシンプルでも、写真の形にこだわるだけで一気にデザイン感が出ます。
上記サイトでは、写真にウェーブをかけて柔らかい雰囲気も出ていますね。
写真の下にタイトルを配置する
上部で写真を使って、下部にシンプルにタイトルを配置する形です。
最初に写真でのイメージが目に入り、その後にタイトルを読むことでイメージを沸かせてくれます。
丸シェイプを飛び出させる
タイトル部分を丸シェイプで作成し、コンテンツ幅からはみ出させることで一気にタイトル感を出すことができます。
縦書きとずらしの応用
タイトルを縦書きにした上で、コンテンツからはみ出たようにずらしています。
まるで雑誌のようなレイアウトです。
背景に単色と切り抜き写真を組み合わせる
「写真だとインパクトが強すぎる」「単色だけだとシンプルになりすぎる」というときに使えそうです。
背景全体を単色にし、切り抜いた写真を入れています。
商品のコンセプトなども伝わりそうですね。
シェイプ同士を組み合わせる
シェイプ同士を組み合わせるだけでもオリジナル感が出ますね。
また、上記サイトはうっすらと背景にロゴを入れて、イラストや文字飾りも組み合わせていて、こぶりながらインパクトがあります。
写真を斜めのカットで配置
単色背景の上に写真を斜めのカットで配置することでスタイリッシュさを出すことが出来ます。
まとめ
下層ページのタイトル部分はイメージを伝えるだけでなく、現在のページが何についてのページなのかをわかりやすく表記する必要があります。
どうしてもありきたりになりがちがタイトル部分ですが、探してみるとさまざまなデザイン技法で目を引くタイトル部分が作り込まれていることが分かりました。
自分がデザインするときももちろんですが、デザインにしっくり来ていない方や、下層ページの見出しに迷っている方のお役に立てたら嬉しいです！
よく見るパターン＝見やすい・読みやすいデザインだと思っていますが、難しそうなタイトルデザインにもチャレンジしてみたいと思っています！
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
