TOM CREATIVE(トム クリエイティブ)

MENU

ARTICLE

DESIGN

デザインのひきだしに!見出しの装飾(デザイン)方法17選と付け方のポイント





こんにちはトミー( @TOMCREATIVE106 )です。

今回は見出しの装飾について解説していきたいと思います。

そもそもデザインのお話として、
グラフィックデザインでもWEBデザインでも「メリハリ」をつけることがとても大切です。

その時に大切なのが「見出し」のデザインです。

見出しというのは「段落」や「ブロック」などをしっかり区分ける役割をしてくれるので、とても大切な要素になります。

見出しの一般的なデザイン例

見出しとは段落やブロックの頭にくるのが一般的で、
見出しを目立たせると全体的にメリハリがつきいて見やすいデザインにすることができます。

みなさんは見出しを目立たせるためにどのような装飾を行いますか?

まずは一般的な例をご紹介します。

太くする

今回はA3パンフレットの中面を例にやっていこうと思います。

下画像のようなブロック分けで最初に見出しがきていることがわかると思います。

まず一番最初に思いつく方法として各見出しを太くしてみます。

これだけでも見出しが目立つようになり、少しメリハリがついたと思います。

大きくする

次に太さはそのままに大きくしてみます。

こちらも見出しに目がいくようになりましたが、
少し要素がキツキツな印象になった感じがします。

大きくする方法は、マージンなども大きく関わってくるので絶妙な微調整が必要になってくるので注意しましょう。

見出しのみフォントを変え、マージンを利用する

次に見出しのみを「明朝体」にしてマージンをうまくとっていきます。

明朝体とマージンを少しとったことにより、少し硬めの印象になりうまくメリハリがついたと思います。

このように、ただ単に見出しの装飾をすれば良いというわけではなく、
まわりの要素、トーン&マナーなどを意識して、全体のデザインに合わせメリハリをとっていくことがとても重要になります。



見出しの装飾をする時のポイント

とは言ってもいまいちわからない方のためにもう一つアドバイスをすると、
見出しがどのブロックにかかるものかを考え、優先順位をつけてあげるとやりやすくなると思います。

左ページを例にあげると、
上部「大見出し」はピンク部分全体にかかっている見出しなので、もちろん一番目立たせなくてはいけません。

わかりやすく言うと、下画像のように要素の強調が強い場合は

それを上回ればよい話なので、例えば黒ベタをうまく使った3Dっぽくして目立たせたりとか、

他の見出しも優先順位をつけてデザインしていくと、

こんな感じで全体にメリハリをつけることができます。

こうやって全体のデザインに優先順位をつけていくと、見出しの装飾がしやすくなると思います。



見出しの装飾(デザイン)方法17選

前述の通り全体のデザインに関わることなので、これ!という正解はないのですが、
僕が思いつく見出しの装飾方法を17個ご紹介したいと思います。

日々デザインをしていく中で臨機応変に使い分けていけるようになるために、
みなさんの「デザインの引き出し」になればと思っています。

線や点線を入れる

囲みを入れる

文字組を変える

色を入れる

副題・欧文を入れる

部分的に装飾を変える

文字を繋げる

ベタ塗りを入れる

3D風に入れる

飾り罫を入れる

欧文と和文を反転させる

角度をつける

部分的に隙間を空ける

写真を入れる

質感を入れる

モチーフを入れる

イラストと一体化させる





おわりに

いかがだったでしょうか。

今回は代表的な装飾方法をご紹介させてもらいましたが、
noteのほうでは更に細かい装飾方法を110個ご紹介させてもらっています。
※半分有料となります。

またYouTubeでもご紹介させてもらっていますので合わせてご覧いただければと思います。

少しでも参考になれば幸いです。