この記事を読むのに必要な時間は約 10 分です。
スポンサーリンク
小見出しデザインのコツ
黄色い部分は箇条書きで横に長くなっています。
読めないことはないのですが、目の動きが横を往復しないといけないため、読みにくさを感じますね。
箇条書きをひとつずつ小見出しにしてまとめると、読みやすくなります。
小見出しを1つずつ分ける
ひとつずつ分けて横に並べると、目の動きが少なくなって読みやすいです。
その際、以下の原則を踏まえて整理してみましょう。
※サムネイルは例として入れてあります。
スポンサーリンク
小見出しデザインの原則３つ
小見出しデザインには重要な原則が３つあります。
重要！ ① 近い情報は近づける
同じグループに属するものは、近くに配置します。
重要！ ② 遠い情報は遠ざける
別のグループに属するものは遠くに配置します。
重要！ ③ 同じデザインを反復する
１つのグループの配置は、他のグループも同じフォーマットにし、繰り返して配置します。
これを「反復」（はんぷく）といい、デザインに統一感と安定感が出ます。
※アイコンや文字のサイズ、フォント、間隔を同じにする
以上の３つがグループのデザインの大原則です。
以上の原則どおりにすると、余白の大きさだけでグループが分かります。
これを踏まえて、デザインのアイデアを見ていきましょう。
スポンサーリンク
小見出しデザインのアイデア
グループ化のアイデア
ラインで境界線を分ける
間にラインを引くと、グループの分かれ目が一目で分かります
ラインで囲う
グループごとに枠で囲うと、より境界が分かりやすくなります。
四角や楕円、雲形などで囲います。
色で分ける
色を後ろに引くと、人の目はそこをグループと認識します。
囲っていなくても大丈夫です。
アイコンやマークを頭に置く
見出しにアイコンをつけると、その近くの文字が１つのグループのように見えます。
スポンサーリンク
小見出しタイトルのジャンプ率を上げる
小見出しタイトル文字を大きくしたりフォントを変える
タイトル文字を大きくしたり、フォントや色を変えると目立ちます。
小見出しタイトルにラインやオビをつける
タイトルにラインなどをひくと目立ちます。
小見出しタイトルをシンプルな形状で囲む
タイトル文字を丸や吹き出しなどのシンプルな形状で囲むのも目立ちます。
小見出しがなぜ必要なのか？
ところで小見出しの「見出し」がなぜ必要なのでしょうか？
上の例の場合、箇条書きの項目が小見出しにあたります。
この「小見出し」がないと、文章がとても読みづらくなります。
小見出し＝内容の要約
なにが書いてあるか分からない長文を読むのはつらいものです。
先頭に、内容の項目、もしくは要約があると何が書いてあるかわかります。
読む人もすんなり頭にはいってきます。
もし長文の頭に小見出しがない場合、入れると読みやすいですよ！
スポンサーリンク
小見出しのデザインまとめ
小見出しのデザインをまとめたものです。
枠の形なども統一感が出るように変えました。
ゆるい雰囲気がでるように、ゆったりとした楕円や角丸にしています。
黄色は少し色を薄くしました。
動線に合わせて、点線も引いてみました。
次回は作業中にデザイナーが何を考えているか、みていきましょう。