【初心者必見】デザインの基本!フォントのジャンプ率を攻略しよう。

タカヒロ

文字のジャンプ率ってご存知ですか。
初心者の方ですとなかなか聞き慣れないことがかもしれませんね。

今回は、デザインの基本の一つである
ジャンプ率についてお話していきたいと思います。

デザインにおけるジャンプ率ってなに?

[voice icon=”/wp-content/uploads/2018/09/fdsfs.png” name=”タカヒロ” type=”l fb”]実は、普段から私たちはジャンプ率を使っています。[/voice]

普段聞き慣れないだけで、
実は、会社や学校で資料や文章を書くときに自然とやっています。
そう、あなたも!

ジャンプ率とは、
文字要素に大きさの差を持たせることを示しています。

題名、サブタイトル、本文とテキストサイズに大きさを
持たすことでより文書が見やすくなりますよね。

[voice icon=”/wp-content/uploads/2018/09/fdsfs.png” name=”タカヒロ” type=”l fb”]この強調もジャンプ率ですね(笑)[/voice]

ジャンプ率が高いと若々しい、小さいと落ち着いた雰囲気に

よくこんな電車のつり革の広告みたことないでしょうか。
ジャンプ率が非常に強く、非常に力強く、訴えかける印象です。

この理由は通り過ぎがちな電車や駅構内で、
とにかく目を引くインパクトである必要があるためです。

一方で新聞はどうでしょうか。
見出しは大きいものの、その他の本文は淡々と文字の大きさが統一されています。

やはり、集中して読みたいというときに、
ジャンプ率を気にせずに木が散らないようにという配慮がされているためですね。

ジャンプ率が使用されているサイトって

こちらは「Screen」というある会社のサイトなのですが、
キャッチーなメッセージには大きく、他の文字については小さく表示しています。
フォントがテキストが小さくまとまっているため、とても落ち着いた雰囲気に感じます。

次にヤフーニュースを見てみましょう。
ここでもジャンプ率が至る所で使われています。

たとえば一枚目の写真にある右側のバナー広告では、
大きくユーザーに訴求したい金額を大きくし、
サイト名とどんな内容かわかるようサブタイトルとして「サイト名称」を表示しています。
非常に明確に伝えたい内容が伝わってきます。

次にヤフーニュースの記事ですが、
記事のタイトル、本文、関連記事と太字を交えつつ、ジャンプ率を使い情報の整理が行われています。

記事タイトル:24px

本文:15px

関連記事タイトル:18px

またサイトの設計として、すべての本文を読まなくても理解できるように冒頭部分を抜粋して表示することで
ユーザーが本当に興味ある記事のみじっくり読ませるというような意図も感じられます。

まとめ

今回はジャンプ率についてお話してきました。webサイトだけではなく、新聞や広告など様々な媒体で活用されています。さらにジャンプ率はデザインの基礎的な要素になるので、様々なサイトみながら是非手を動かしながら実践してみてください!

良いデザインがまとめられているおすすめサイトを参考として掲載しておきますね!
[kanren postid=”1540″]

この記事を書いた人

Takahiro

平日はIT企業で務める側で、フロントエンド開発を学習中。デザインやプログラミングに関することを呟いてます。