- ジャンプ率って何？
- どうやってジャンプ率をつけるの？
- デザインにどう活かせばいいのか分からない
こんな悩みを解決できる記事になっています！
ジャンプ率は、デザインの印象や文章の読みやすさに深く関係する、非常に重要な要素のひとつです。
そのため、ジャンプ率について理解することでデザインのクオリティを大きく上げられます。
この記事で紹介する「ジャンプ率の基礎知識」を身に付ければ、ジャンプ率の効果を活かしてデザインのクオリティを大きく上げられます。
記事前半では「ジャンプ率の基礎知識」について、後半では「ジャンプ率をつける5つの方法」について解説するので、ぜひ参考にしてみてください。
伝わるデザインを作りたい方には必読の内容です！ぜひ最後までお読みください。
ジャンプ率とは大きさの比率のこと！
高い・低いそれぞれの場合の特徴を解説
ジャンプ率とは、強調したい要素とそうでない要素の大きさ比率のことを指し、要素同士のサイズの差が大きければ「ジャンプ率が高い」小さければ「ジャンプ率が低い」と言います。
また「ジャンプ率がない」場合にも特徴があるので、それぞれの効果を正しく把握し、的確にデザインしていくことが必要です。
1. 高いジャンプ率の特徴
ジャンプ率が高い場合の特徴は、以下の通りです。
- 躍動感
- にぎやか
- 若者向け
- リーズナブル
例えば、新聞や雑誌は見出しと本文の比率が高く、ジャンプ率が高いと言えます。ジャンプ率が高いと視覚的にはっきりするので、目をひくデザインになります。
情報の優先順位がわかりやすくなるので、視線を自然に誘導可能です。さらに、見ている人が内容の把握をスムーズに行えるようになるので、情報量の多いコンテンツはジャンプ率を意識的に大きくした方が良いでしょう。
また、要素にメリハリを持たせられて、全体に躍動感が生まれるので、ダイナミックにインパクトを与えたい場合やスピード感を持たせたい場合にもおすすめです。
2. 低いジャンプ率の特徴
ジャンプ率が低い場合の特徴は、以下の通りです。
- 落ち着きがある
- 静か
- 知的
- 高級感
ジャンプ率が低いと見ている人の視線の動きが穏やかになるので、落ち着いた印象を与えるデザインになります。内容をじっくり見てほしい専門誌や教科書、フォーマルな場面で使用すると効果的です。
信頼感を持たせたいデザインに活かすと良いでしょう。
3. ジャンプ率がない特徴
最後は、ジャンプ率がない場合の特徴を紹介します。
（引用元：https://www.vermicular.jp/）
例えばテキストが一文のみで、比較する要素がない時はジャンプ率がないと言えます。要素をそのまま活かすことができるので、意図を伝えやすいです。
参考画像のように、ホームページのファーストビューでブランドコンセプトを伝えるのに用いられることがあります。キャッチコピーなど、メッセージ性の強い要素を伝えたい時に効果的です。
文字のジャンプ率をつける5つの方法
それぞれのジャンプ率の特徴を理解したので、実際にどうやってジャンプ率を使ってデザインしていくかを見ていきましょう。こちらでは、文字にジャンプ率をつける方法を紹介します。
ジャンプ率とは要素同士のサイズの比率のことですが、本質は要素同士にメリハリをつけることです。そのため、ジャンプ率をつけたい場合には、要素同士のサイズに差をつける以外にも有効な手法があります。場面に応じて適した方法を使ってみてくださいね。
1. サイズを変更する
文字の大きさに変化を加えて、ジャンプ率の調整をする定番の方法です。タイトルやキャッチコピーなどのサイズを大きくして、内容文を小さくすることで、要素同士に差を作ります。
どんな印象を与えたいかによってジャンプ率を調整しましょう。
2. 太さを変更する
文字の太さに違いを出すことで、ジャンプ率をつけられます。文字の大きさを変更できない場合にも活用できる方法です。
文字を太くすると、どっしり力強く強調できるので、他の文字と差別化できます。太さの種類を選べるフォントを使ってみてください。
3. 色を変更する
文字色の変更はサイズや太さの調整と合わせても使えます。文字自体の色を変更する方法と背景に色をつけて強調する方法があります。
どちらの場合も、視認性が悪くならないように配色への配慮は必要です。デザイン全体の雰囲気を壊さない色を選びましょう。
4. 装飾を加える
図形を加えたりあしらいを使ったりしても、ジャンプ率をつけられます。強調したい要素に装飾を加えるだけで視線を誘導できるので「何か物足りない」「デザインにメリハリがないな」と感じる場合に使ってみてくださいね。
5. カーニングを行う
カーニングとは文字と文字の間隔を調整することです。文字間を調節することでメリハリが生まれるので、グッと印象が変わります。
落ち着いた印象を与えたい時は文字間を広く取りましょう。逆に、賑やかな印象を与えたい時は少し文字同士の間隔を狭くするのがおすすめです。
とはいえ、文字同士の間隔をあまりに狭くしすぎると読みにくくなってしまうので注意が必要です。
画像のジャンプ率をつける
ジャンプ率は文字だけの話ではありません。画像要素にジャンプ率をつけて調整することもできます。１枚だけ画像を大きく配置することで、メリハリが生まれ重要な画像がどれか伝えられます。
また、画像と文章にジャンプ率をつけると被写体に視線を誘導させられるので、雑誌などで利用すると効果的です。
まとめ
今回は、ジャンプ率の基礎知識とつけ方についてご説明しました。
ポイント
- ジャンプ率は高い/低い/ない場合で与える印象が変わる
- 文字のジャンプ率をつける方法は複数あるので場面に応じて使う
- 画像にジャンプ率をつけることも効果的
見ている人に与えたい印象やデザインに合わせて、ジャンプ率を上手く使い分けてみましょう。ジャンプ率はデザインの印象を決める重要な要素です。使いこなすためには、普段から周りにあるデザインがどんなジャンプ率で作られているのか、意識してみるのがおすすめです。ぜひ、ジャンプ率をデザインに活用してみてください。
