イモっぽいデザインから脱却したい！ということで、今回は記事ページの「見出し」のデザインを見直してみます。以前に見出しについての考えをまとめてみたのですが、今回は特にデザインについてをメインにまとめてみたいと思います。
見出しの文字サイズは本文との比率で考える
見出しと本文のサイズの違いのことを「ジャンプ率」と言うようです。ジャンプ率の高い低いによって、ユーザーに受け取ってほしい印象を調整します。
ジャンプ率が高い：「躍動感」「若々しさ」「インパクト」「安っぽさ」など
ジャンプ率が低い：「落着き」「高級」「専門的」など
新聞や雑誌のように見出し部分をさっと目を通して興味のある記事だけ読むような媒体では、ジャンプ率を高くする傾向が見受けられます。
こちらのブログ様で実例と共にまとめられておりとても勉強になりましたので、参考リンクを掲載いたします。ぜひご覧ください！
反対に、学術書や小説などのしっかりと“読ませたい”ものには、ジャンプ率を低めにすることが多いようです。
そして、ジャンプ率でも「黄金比」などの美しいとされる比率を採用することで“説得力のある数値”に設定することもできますね。
ブログに最適なジャンプ率は高め？
ジャンプ率は読んで字のごとく、パパパッっとジャンプするように読めるからそう名付けられたものなんですかね？
ブログの記事はたいてい、
何かの情報を探しているユーザーが、広大なネットの海の大量の記事の中から“読み流す所詮一記事”にすぎないと考えると、ジャンプ率は高めの方が相性が良さそうな気がします。そう考えると、見出し一つ一つの内容の重要性が、とたんに重たく感じられるのは、これまたなんだか面白いですね！
もちろんユーザー層やジャンル、PV数などのそのブログのさまざまな特製によってジャンプ率も臨機応変に変えていかなければならないこととは思いますが、ことハウツー系のブログに至っては、訪れるユーザーはどちらかといえば『検索→アクセス』というプロセスを踏んでいることが多いと思いますので、なおさら“読み流される”と考えられます。
見出しの装飾はコンセプトに合わせて決める
ブログの記事の見出しは、そのブログの個性を表現できる部分でもありますよね。デザインするのが難しくもあり楽しくもある部分だと思います！
今回私は、現状の何となくイモっぽい見た目を変えたいと思い立ち、デザイン改修しているわけなのですが、何も考えずに個性を突き詰めたもので進めると、またイモっぽくなってしまうことでしょう……。なぜならブログ名に文字通りイモを冠しているのですから……?
なので、今回はある程度説得力のあるデザインを目指したいと思いました。
まずは現状のデザインを見つめなおして「帯」はどうなのか。
帯を引くという手段は目立つという観点だととても良いと思いますが、本ブログでは2行以上の長めの見出しになることが多いため、「帯」とは相性が悪いことに気がつきました。縦幅が間延びしてしまいなんだかマヌケな印象です。
では、リストマーカーやアンダーラインだとどうか。
こちらも同じく２行以上になってしまうと、少し不格好になってしまう感じです。
そう考えると、装飾は何もせずシンプルに、ジャンプ率を高く設定して見出しと本文の境目を作ってあげるのが、比較的スマートなのかなぁと思いました。
ジャンプ率を高くすると、文字しかないけれど意外と見やすくなりました。
試しにジャンプ率をある程度抑えたものを作ってみましたが、思ったより見づらくはない印象です。
見出しの色を変えるのはどうだろう？
見出しの色を変えると本文との区別がもっとハッキリして、より分かりやすくなりますね。試しに赤と紫でサンプルを用意してみました。
なんとなく赤の方がハッキリと違いが伝わり、紫の方は中途半端な感じがしませんか？
どちらの良い悪いは一概には言えませんが、“どう見せたいか”によって色を選択する必要があるかと思います。
また、
文章の多いブログは、見出しのカラーを変更することで分かりやすくなり、そしてイメージもコントロールしやすくなるような気がします。逆に、文章が比較的少なく画像が多いサイトだとなんだか騒がしいデザインになってしまうというデメリットも感じました。
本ブログはなるべく画像を多く使用したいと思っているので、ひとまずカラーは変更せずに本文と同じカラーで統一しようと思います。
本ブログの見出しのデザインを見直してみた
さて、見出しのデザインについて整理したところで、本ブログの見出しのデザインを見直していこうと思います。
改修前の見出しのデザインは
改修前の本ブログの見出しのデザインは、帯で囲っているデザインです。
ハッキリと見出しだと分かるデザインですが、なんだかマヌケな印象です。
改修前の見出しのデザインは
改修後のデザインは帯を外して、ジャンプ率を高く（文字を大きく）してみました。
イモっぽさは薄くなった？ような気がします。
見出しの両サイドのマージンや、本文の行間などのトータルでの調整でもう少し洗練されたイメージに調整できるのかなぁとは思います。。
背景をなくすと、少し物足りなさが、大きくなってしまいましたので、ひとまず背景アリでとどめておこうかと思います。
まとめ
見出しのデザインは「ジャンプ率」というものを意識して調整してあげることが重要ということですね。今回ジャンプ率を高く設定してみましたが、大きく印象が変わったような気がします。皆さんも自分のブログの特性に合わせて、まずはサイズから見直してみてはいかがでしょうか。
参考文献
賢者の印刷用語集. 「ジャンプ率」. https://www.well-corp.jp/solution/janpuritsu/, 2023年11月21日閲覧。
プリント日和. 「【ゼロから始めるDTP講座・第3回】デザインを学ぶのに絶対必須、ジャンプ率とは？」. https://www.brother.co.jp/product/printer/home/magazine/kiji65/index.aspx, 2023年11月22日閲覧。
マミオン. 「新聞・雑誌は3～5倍！『ジャンプ率』を意識して、見やすいWebサイトをデザインしよう」. https://mamion.net/2012/08/ジャンプ率を意識して見やすいwebサイトをデザイ/, 2023年11月22日閲覧。
