迷ったら試したい 下層ページの見出しデザインの参考になる14つの技法

こんにちは！社員Aです👩

最近おからパウダーが流行っていて、ダイエットにも良いというのを小耳に挟んだので、私も楽天で手に入れようと思ったらあまりの品切れと価格暴騰に驚いてアプリをそっと閉じました…。

ブームが落ち着いたら在庫も安定してきてもう少し安くなるんでしょうか…？

「もう試したよ」という方がいらっしゃったらぜひ感想お聞かせください！（笑）

さて、今日は下層ページの見出しデザインの参考になるサイトをピックアップします。

意外と頭を悩ませる下層ページの見出しデザイン

下層ページの見出しデザインは、例えば弊社のサイトで言えば下記の「WORKS　制作実績」のタイトル部分です。

ヘッダーのすぐ下にある、そのページのタイトルになる部分ですね。

このデザインは意外とデザインに迷うことが多く、デザインパターンが似たり寄ったりになってきてしまうのが悩みです。

その度に、他のサイトデザインをみたりして刺激をもらっているのですが、今回はそんな下層ページの見出しデザインのパターンをいくつかピックアップしてみましたので、ご紹介します。

写真とシェイプを重ねてみる

写真を全面に使うわけではなく、シェイプと組み合わせてフラットなデザインながらも立体感も出せますね。

中央にタイトル（英語と日本語）を持ってきています。

兵神機械工業株式会社｜船舶用機器・モーター・農工製品

 

3 Pockets

兵神機械工業の強み | 兵神機械工業株式会社｜船舶用機器・モーター・農工製品

https://www.hsn-kikai.com/strength/

兵神機械工業の強み のページ。 国内の大型・中型船舶分野を中心に、機関室のエキスパートとして船の安全航海と海洋環境保護を目指す舶用機器及び農業水耕栽培ハウスのメーカー

シェイプやイラストを添える

タイトルにシェイプやイラストを加えるだけで、デザインの物足りなさをカバーできます。

振興電気株式会社

 

12 Shares

1 User

5 Pockets

Company | 振興電気株式会社

http://www.shinko-el.com/company/

創業80周年。総合電気設備工事業を行う振興電気（東京都品川区）のコーポレートサイトです。会社概要、社長メッセージ、施工実績、ネットワーク、沿革についてご紹介します。

背景にうっすらと写真を入れる

これはよく見るパターンかもしれません。

そのページのイメージ写真をぼかしたり、薄くしたりして背景にし、その上にタイトルを置く技法です。

文字だけよりもインパクトがあり、イメージも伝わりやすいですね。

東京都立川市の税理士法人さくら会計事務所｜よくある質問

東京都立川市の税理士法人さくら会計事務所｜よくある質問

https://sakurakaikei-tax.jp/faq/

税に関する様々なお悩みは、東京都立川市にある税理士法人「さくら会計事務所」にお任せ下さい。

写真の上に白枠を入れて飾り付ける

写真の上に透過した白枠を配置し、その上にタイトルを載せる技法です。

上記サイトでは飾りや文字サイズのジャンプ率も上げていて、すっきりとして読みやすいですね。

homesha.fujifilm.com

 

1 Share

ほめ写をはじめよう！｜写真が子どもの自信をひきだす「ほめ写」

http://homesha.fujifilm.com/guide/

子どもの写真を飾ってほめる「ほめ写」のおすすめグッズを紹介します。

背景から少しずらす

背景として入れている部分から白枠部分をすこしずらして、フラットデザインながら少しインパクトを出せます。

また、タイトル「Wedding Ring」の横にはラインを入れて、タイトルをより強調しています。

ALUXE 亞立詩鑽石 - GIA鑽石鑽戒、結婚戒指

 

9316 Shares

結婚戒指 - ALUXE 亞立詩鑽石

https://aluxediamond.com/tw/wedding-ring

亞立詩結婚戒指提供經典女仕婚戒、男仕婚戒、男女對戒、德國工藝Acredo訂製婚戒、CITIZEN訂製婚戒等多種系列絕美結婚戒指，豐富的款式或獨特的訂製，滿足每對新人的風格。嶄新的人生，將由永恆的結婚戒指開始！

あえて縦書きにする

タイトルが横書きである必要はないということがよく分かる見出しデザインです。

シンプルなのに、インパクトがあります。

沖縄の二世帯住宅のリフォーム・リノベーションなら佐平建設のOTONA:Re（おとなり）

メリット | 二世帯住宅のリフォーム・リノベーションなら佐平建設のOTONA:Re（おと...

http://otona-re.com/merit/

二世帯住宅のメリット 沖縄で二世帯住宅を賢くリフォーム・リノベーションするなら佐平建設の「OTONA:Re（おとなり）」【見積無料・安心保証】沖縄の二世帯住宅のリフォーム・リノベーション実績豊富、アフターフォローまでトータルサポート!沖縄全域対応します。

タイトル文字にだけ背景色をつける

タイトル部分に使用する写真がサイト映えするものであれば、文字で見づらくしたくないもの。

そのために、文字にだけ背景をつけることで、写真も文字も目立たせることが出来ます。

京都美術工芸大学,工芸,建築,美大,芸大,オープンキャンパス, オーキャン,大学説明会,AO入試

 

1 User

1 Pocket

大学案内|京都美術工芸大学

https://www.kyobi.ac.jp/about/

京都美術工芸大学 大学案内のページです。歴史のある京都で工芸デザイン・建築を学ぶ。日本で唯一「工芸学部」をもつ大学。在学中に「二級建築士」資格の取得も可能です。2017年京都東山キャンパス開設予定。

写真の形にこだわる

タイトルはシンプルでも、写真の形にこだわるだけで一気にデザイン感が出ます。

上記サイトでは、写真にウェーブをかけて柔らかい雰囲気も出ていますね。

クリオ訪問看護・リハビリステーション｜「らしさ」に寄り添い、「らしく」を支える。

サービス紹介 | クリオ訪問看護・リハビリステーション｜「らしさ」に寄り添い、「...

https://kuriokango.jp/service/

サービス紹介 のページ。 クリオ訪問看護・リハビリステーションではご利用者様やご家族が自分らしい生活を送れるかということを第一に考え 普段通りの自分「らしさ」を追求することを大切にしています。

写真の下にタイトルを配置する

上部で写真を使って、下部にシンプルにタイトルを配置する形です。

最初に写真でのイメージが目に入り、その後にタイトルを読むことでイメージを沸かせてくれます。

AICHLER アイクラー｜神戸のコンパクトな分譲住宅

施工実績 | AICHLER アイクラー｜神戸のコンパクトな分譲住宅

https://www.aichler.jp/works/

施工実績 のページ。 株式会社灘商会が運営する分譲住宅AICHLER（アイクラー）のオフィシャルサイト

丸シェイプを飛び出させる

タイトル部分を丸シェイプで作成し、コンテンツ幅からはみ出させることで一気にタイトル感を出すことができます。

kids.colleccio.jp

 

34 Pockets

キッズコレッチオ 〜子どもの想い出を、宝物として残すサービス。〜

https://kids.colleccio.jp/#item-list

キッズコレッチオは、子どもの想い出を、宝物として残すサービスです。子どものはじめて記念や、何気ない日常の瞬間を、想い出に残るプレゼントにしてみませんか？

縦書きとずらしの応用

タイトルを縦書きにした上で、コンテンツからはみ出たようにずらしています。

まるで雑誌のようなレイアウトです。

www.is-seimen.co.jp

 

1 User

4 Pockets

麺づくりへのこだわり | 麺の製造｜株式会社井上製麺

https://www.is-seimen.co.jp/concept/

麺づくりへのこだわり のページ。 井上製麺は大阪の製麺所です。中華麺・焼きそば麺・ラーメンの製造をしています。こだわりの麺をお探しの際は、お気軽にお問い合わせください。

背景に単色と切り抜き写真を組み合わせる

「写真だとインパクトが強すぎる」「単色だけだとシンプルになりすぎる」というときに使えそうです。

背景全体を単色にし、切り抜いた写真を入れています。

商品のコンセプトなども伝わりそうですね。

オムロン ネブライザーねっと

 

1 Share

2 Pockets

オムロン ネブライザーねっと

https://store.healthcare.omron.co.jp/nebulizer-net/lineup/index.html

オムロン ヘルスケアが運営する公式オンラインショップ「オムロン ネブライザーねっと」です。オムロンのネブライザー、喘息用吸入器をお買い求めいただけます。取扱い商品の一覧です。

シェイプ同士を組み合わせる

シェイプ同士を組み合わせるだけでもオリジナル感が出ますね。

また、上記サイトはうっすらと背景にロゴを入れて、イラストや文字飾りも組み合わせていて、こぶりながらインパクトがあります。

ヒューマンスクール（公式）

ヒューマンスクールに通う大学生の座談会！感想・評判など | ヒューマンスクール（...

https://humanschool.co.jp/talk-university

ヒューマンの在校生＆卒業生である大学生に座談会形式のインタビューを実施しました！ヒューマンの良さや、もっとこうして欲しい！など、 リアルな声を聞いてきました。

写真を斜めのカットで配置

単色背景の上に写真を斜めのカットで配置することでスタイリッシュさを出すことが出来ます。

日本政府観光局 新卒採用サイト2018

先輩募集要項｜日本政府観光局 新卒採用サイト2018

https://recruit.jnto.go.jp/recruit/

JNTOの先輩情報を掲載しています。

まとめ

下層ページのタイトル部分はイメージを伝えるだけでなく、現在のページが何についてのページなのかをわかりやすく表記する必要があります。

どうしてもありきたりになりがちがタイトル部分ですが、探してみるとさまざまなデザイン技法で目を引くタイトル部分が作り込まれていることが分かりました。

自分がデザインするときももちろんですが、デザインにしっくり来ていない方や、下層ページの見出しに迷っている方のお役に立てたら嬉しいです！

よく見るパターン＝見やすい・読みやすいデザインだと思っていますが、難しそうなタイトルデザインにもチャレンジしてみたいと思っています！