海外で働きたい人募集!ver.2 / LIGセブ島支社
海外で働きたい人募集!ver.2 / LIGセブ島支社
2016.11.17
#26
WEBデザインをはじめよう

【UIデザインを紐解く】見出しデザインで意識するポイントとバリエーションまとめ

みやっち

こんにちは、デザイナーのみやっちです。
最近PS4を買って、趣味が積みゲーからゲームになりました。

今回は「見出しのデザイン」についてお話ししようかと思います。

見出しを使う理由

デザインの話の前に見出しを使う理由を考えてみましょう。見出しは下に続くコンテンツや文章を読んでもらうためのキッカケになるものです。つまり各コンテンツのタイトルにあたるような存在です。ユーザーが、自分が興味のあることを扱っているかどうかの判断材料になります。

見出しを見て、その内容を読むかどうかを判断しているため、以下のような見出しはユーザー体験が悪くなり離脱の可能性が高くなります。

  • 説明的すぎる
  • 内容と関係ない
  • そもそも見出しがない

見出しをデザインする理由

img01

単純に見出しを付けることが目的ならマージンを調整するだけでも付けられます。では、なぜ見出しをデザインするのかというと、気付き統一感のためです。

気付き

先程の例を見てみましょう。

img01

テキストサイズとウェイトが同じため、スクロールしてきたときに見出しと本文の差異にはほとんど気付けません。

img02

例えばウェイトを変えてみたり、テキストサイズを変えてみるだけでも、ユーザーの目線が引っかかり、気付きを与えることができます。

統一感

img06

サイトカラーを使用してみたり、ロゴの一部を使用してみたりすると、サイト全体の統一感が出て、没入感を与えることができます。

見出しデザインバリエーション

いくつか見出しのデザインバリエーションを考えました。

ウェイトを変更

img01

例にも出しましたが、一番オーソドックスな形になります。どんなデザインにも合いますが、シンプルなデザイン以外で用いると物足りなさを感じるかもしれません。そのままテキストをサイトカラーに変更しても良いかも。

ジャンプ率を変更

img03

こちらもオーソドックスですが、非常にキレイに見せることができます。

英語を添える

img04

日本語に同じ意味の英語を添える手法もあります。こちらは中央寄せによく合う置き方ですね。

img05

日本語と英語のジャンプ率を入れ替えたパターンです。よりスタイリッシュな印象になります。

ラインを引く

img07

img08

img09

罫線やラインを書き入れたものです。ラインにサイトカラーを使うと統一感を出すこともできます。

アイコン・イラストを置く

img10

汎用性や管理を考えなければいけないため扱いが難しいですが、ページの見出しとして使うとユーザーの理解が深まります。

img14

イラストを用いると柔らかさや親しみをもたせることができます。

背景を敷く

img11

テキストの背景にカラーやパターンなどの背景を敷いてみるのも効果的です。見出しとして必要な高さを確保しつつ、重くなりすぎないデザインにできます。

手書き

img12

手書きでの見出しは、テキストのみでの視認性と柔らかさを出す場合、効果的です。

吹き出し

img13

本文とのグルーピングを強めるために吹き出しを用いるデザインもあります。続く内容に関するタイトルであることを暗に伝えます。

などなど…かなりたくさんの手法があります。

デザイン性の高い見出しのまとめはこちらの記事を参考にできます。

まとめ

一番重要なのは読みやすさ分かりやすさです。
ユーザーの視点にたって、違和感を感じないか、内容がしっかり頭に入ってくるかを考えながらデザインするのがコツです。
ただ自分のデザインを完全に客観的な視点で見るのは難しいので、デザイナー以外の人にも見てもらって感想をもらうのも良いかと思います。

キャリアアップ
「Studio上野でWebクリエイターを目指す!」