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

気になる人

  • そもそもジャンプ率ってなに?
  • ジャンプ率の違いによってどんな印象があるの?
  • ジャンプ率を考えるときに意識することは?
  • ジャンプ率を使ったデザインを知りたい!

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

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

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

  • フォントのジャンプ率の意味
  • ジャンプ率違いによる印象
  • ジャンプ率のWebデザインの具体例

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

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

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

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

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

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

ジャンプ率の違いによる印象

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

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

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

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

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

ジャンプ率のWebデザイン具体例

ジャンプ率-apple-Mac
Macの商品ページ
  • 大見出し:64px
  • 商品名:28px
  • 価格:24px
  • 比率=2.6:1.2:1

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

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

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

ジャンプ率-apple-iPhone
iPhone SEの商品ページ
  • 大見出し:80px
  • 商品名:25.5px
  • 価格:32px
  • テキスト:24px
  • 比率=3.3:1.1:1.3:1

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

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

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

web-facebook
sp-facebook
  • 大見出し:60px(pc),36px(mobile)
  • 副見出し:30px(pc),22px(mobile)
  • テキスト:16px
  • 比率(pc)=3.8:2.3:1
  • 比率(mobile)=1.9:1.4:1

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

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

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

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

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

ジャンプ率を考慮したデザイン作成方法とコツ

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

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

ジャンプ率1
STEP.1
文字を分解・情報の優先度をつける
ジャンプ率2
STEP.2
デザイン4原則を意識して文字の大きさなどを変更しながら配置
ジャンプ率3−1
ジャンプ率3−2
STEP.3
装飾をつけたりあえて崩したりして最終調整
ジャンプ率4
ジャンプ率4

まとめ

まとめ

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

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

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

合わせて読みたい

フォントの種類と特徴・意味【デザインに使える】 デザイン4原則を使った伝わるデザインの作り方【非デザイナー必見】