blog
ブログ

印象が変わる!?ジャンプ率を意識してみる。

こんにちは、デザイナーの角谷です。
春らしい気候になってきましたね。
去年の秋から飼いはじめたねこが、最近、気持ち良さそうに日なたぼっこしてる姿を眺めては癒されています。

今回のテーマは「ジャンプ率」についてです。ジャンプ率という言葉をご存知ですか?

文字のジャンプ率

本文の文字サイズと、見出しやタイトルの文字サイズの比率のことを言います。
文字に強弱をつけることで読み手に伝えたい情報を効果的に導くことができます。

ジャンプ率が高いものほど動きがでて、メリハリの効いた活気のあるデザインになり、
ジャンプ率が低ければ、動きが少なくなり、落ち着いた印象を与えるデザインになります。
フォントサイズの選定1つでwebサイトの印象がガラリと変わるため、適切に選択したいですね。

画像のジャンプ率

文字以外にも雑誌や印刷物等で用いられるのが画像のジャンプ率。webデザインでは同じ性質のコンテンツは均一に並べることが多いですが、印刷物ではサイズに大小感を持たせてメリハリをつけることも。

最近ではwebデザインでも大小感のある写真を使ったデザインが多くなりました。
デザイナーになりたての頃、よく1pxのずれや、グリッドを揃えるように注意されていましたが、少し前から流行っているグリッドをあえて外すデザインを見たときは衝撃を受けました。。。めっちゃかっこいいと。。。

ここからはジャンプ率を効果的に使用しているサイトをいくつかご紹介したいと思います。

ジャンプ率を効果的に使った参考になるサイト

apple

文字と画像だけのシンプルなサイトですがダイナミックにレイアウトされ躍動感を感じます。スマートフォンなどサイズの小さい画面で見ても読みやすいです。

そして、別ページのMac Proのページに遷移すると、フォントのウェイトが細くなっています。
文字サイズの強弱はつけていても、ウェイトを細くすることで高級感や落ち着いた印象を与え、特別感を表現しているように感じます。



andrecipe



ご飯と旅をテーマにしたWEBマガジンで、1ページ1ページ丁寧に作り込まれています。(個人的にツボなサイトです)
写真の使い方や、文字のレイアウトがキレイで雑誌の紙面とwebが融合したようなデザインで素敵だな〜〜とよく見にいくのですが、更新頻度は高くないです。。

上記とは対照的にジャンプ率の低いサイトをご紹介します。

岡本歯科医院

前述したようにジャンプ率の低いサイトは、落ち着いた印象を与え、信頼感や安心感、誠実なイメージにつながります。
医療・福祉関係のwebサイトや法律、会計、建築関係のwebサイトに多いかなと感じます。

ジャンプ率を効果的に利用することで、デザインに印象づけることができ、自社のブランディングにも効果を発揮します。
また、ターゲットに合わせたフォントサイズの設計は、ユーザビリティの向上にも役立ちます。
webや販促物はもちろん、営業資料、パワポ資料まで何にでも応用できますので、小ワザを効かせてみてはいかがでしょうか?

facebookでも情報を発信しています

facebookをフォロー
ブログ一覧に戻る