【デザイン初学者必見】フォントジャンプ率を利用したWebデザイン具体例と作成例

気になる人

この記事はこんな方に向けて、フォントジャンプ率について解説しています。

こんにちは、とある企業で企画やWeb/UIデザイン・UXデザインを担当していますモーリーと申します。

この記事は、デザイン初学者の方に向けて

について解説しています。

フォントの種類や印象については別の記事で解説しているのでこちらを参考にしてみてください。

少しでもデザインの疑問解決に役立てたら幸いです。

フォントのジャンプ率とは？

文字の大きさに差をつけて、コントラストをつけることを言います。

コントラストを作ることでデザインの意図を明確にし、単調で退屈なデザインを防ぎます。

一般的にジャンプ率が高いと、

大衆的、行動的、ダイナミック、若さという印象を与え、視認性が高く、躍動感のある表現になります。

反対に、ジャンプ率が低いと、

知的、保守的、信頼、大人っぽいという印象を与え、常識的で落ち着いた表現になります。

キャッチコピーである大見出しをジャンプ率と明度差を最も大きくすることで一番初めに目に入るようにしています。

ここからはあくまでも仮説になりますが、商品名を小さくかつ明度差をつけずに配置しているのは「該当商品の画像を大きく配置することで伝えられる」「ページ訪問者がすでに何のページにいるのかを認識している」という前提があるからだと思っています。

ジャンプ率をつけてキャッチコピーを目立たせることで、端的に「何が良いのか」をわかりやすく伝えています。

「Macの商品ページ」で上述したのと同様に、キャッチコピーである大見出しをジャンプ率と明度差を最も大きくすることで一番初めに目に入るようにしています。

仮説ではありますが、商品名を「Macの商品ページ」と違い目立たせたのは、「テキストと画像が被ってもある程度の視認性を担保したかった」「iPhoneシリーズで似た商品が多いため明確に識別したい」といった理由からしっかりとジャンプ率・明度差を確保したのかもしれません。

いずれにせよ、端的に伝えたいことが伝わるようにデザインされています。

FACEBOOKのブランドやロゴについて説明しているページになります。

こちらのページでは、ページの大見出しと概要、FACEBOOKが何を提供しているのかについて簡単に述べています。

このページについているリンクから他のページをみても一定のルールで統一されたサイズでページが構成されているのが特徴です。

またpcでみた時、mobileでみた時にもフォントのサイズが可変になるよう設計されています。

ジャンプ率を考慮しつつ、画面サイズや開発しやすいよう一定のルールを設けることもデザインをしていく上で大切な要素になってきます。

次は簡単な例を用いながらバナーでデザインしていく順番を解説していきます。

下記のようなテキストでバナーを作るとします。

STEP.1

文字を分解・情報の優先度をつける

STEP.2

デザイン４原則を意識して文字の大きさなどを変更しながら配置

STEP.3

装飾をつけたりあえて崩したりして最終調整

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

ジャンプ率を意識することで、リズムを作ったり、意図的に目に止めたりすることができます。

これからもジャンプ率を活用してより良いデザインを作っていきましょう！