menu

Webページの目的に合わせて意識したい「ジャンプ率」とは?

制作

スクロールに合わせて時間差でコンテンツが表示されるパララックスデザインなど、常に進化し続けているWebデザイン。そうしたなかでもテキストの持つ重要性は依然として変わりません。

動画やインタラクティブなコンテンツがふんだん盛り込まれ、高度にビジュアライズされたWebサイトでも、充分な情報を提示してユーザーに納得してもらうためには、やはりテキストが必要になってきます。

テキストコンテンツは、テーマや内容に加えてフォントやレイアウトの大切なポイントです。そのうえでWebディレクターなら押さえておきたいのが、文字の「ジャンプ率」という要素。ジャンプ率とはどんなもので、Webページにどんな効果をもたらすのでしょうか?

・ジャンプ率とは?
ジャンプ率とは、最も大きいフォントと最も小さいフォントの比率です。例えば、10ポイントの本文に対して、タイトル文や大見出しに48ポイントなどの大きめのフォントが使われている場合、そのテキストのジャンプ率は「高い」ということができます。逆にページ内のフォントがほぼ同じサイズで揃えられている場合、ジャンプ率は低くなります。

・ジャンプ率が高い場合の効果
高いジャンプ率の効果を知るためには、コンビニや駅の売店で売られているスポーツ新聞をイメージするのが早いかもしれません。スポーツ新聞では多くの場合、足早に通り過ぎる人の注目を集めるために、本文の10倍以上のサイズでセンセーショナルな内容の見出しが掲載されています。

ジャンプ率の高いテキストはメリハリの効いたダイナミックな印象を与え、見る人の目を惹きつける効果があります。Webページの場合、例えば、圧倒的な価格優位性や話題性のある商品の商品ページなどには向いているかもしれません。

・ジャンプ率が低い場合の効果
一方、ジャンプ率の低い文章は、知的で落ち着いた印象を与えます。そうした点でアカデミックな内容のコンテンツや、ニッチなターゲットを狙った専門性の高いコンテンツとは相性がいいでしょう。

また、ジャンプ率が高い場合、配色・レイアウトによっては安っぽい印象を与えることがありますが、ジャンプ率を抑えればそうしたデメリットもなく、大きなタイトルや見出しを使わない分、記事やコンテンツを一覧表示させやすくなります。

Web制作に関するご依頼、ご相談、お見積はこちら

小野 良勝

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

marketing19マーケティング上のメリットも。「サポートコミュニティ」&「SNS」

ちゃぶ屋 とんこつ らぁ麺 CHABUTON|ラーメン×エンタメ×サプライズちゃぶ屋 とんこつ らぁ麺 CHABUTON|ラーメン×エンタメ×サプライズ

関連記事

  1. SNSとも相性抜群。情報をビジュアル化して直感的に伝えるインフォグラフィック

    SNSとも相性抜群。情報をビジュアル化して直感的に伝えるインフォ…

    多くの企業がコンテンツマーケティングに取り入れているのがインフォグラフィックです。インフォグラフィッ…

  2. web04

    コマンドが苦手な方も安心。直感的にWebインターフェイスを開発で…

    ひと口に「Webディレクター」と言っても、人それぞれに強みや得意分野があり、Webサイトの制作スタイ…

  3. web05

    キービジュアル・広告制作に役立てたい、絵画・アート作品のコレクシ…

    Webサイトのキービジュアルや広告のクリエイティブを制作する際は、歴史的な名画やアート作品に目を向け…

  4. webdesign03

    ランディングページ制作に携わるなら知っておきたい、行動心理学の4…

    訪問したユーザーを納得させ、具体的なアクションに導くことが求められるランディングページ制作。Webデ…

  5. web01

    ユーザーに声をヒントにWebサイトを改善。手軽に利用できるアンケ…

    Webサイトの効果を示すデータは大きく2つに分けられます。1つはアクセス数やクリック率(CTR)、コ…

  6. クリック率19倍UPの事例も。Facebookも活用しているパーソナライズド動画

    クリック率19倍UPの事例も。Facebookも活用しているパー…

    閲覧履歴や購入履歴をベースとして、1人1人のユーザーにあわせたコンテンツを配信するパーソナライズは動…

  7. webdesign04

    マンネリ化したWebデザインから脱却したい時は注目。心理学におけ…

    制作したWebページの効果が伸び悩んでいる時や、何となくマンネリ化した印象を拭えない時などは、行動心…

  8. 有力キュレーションマガジンも導入。スマホの動画視聴にマッチしたタテ型動画

    有力キュレーションマガジンも導入。スマホの動画視聴にマッチしたタ…

    バーチャルリアリティ(VR)やオーグメンテッドリアリティ(AR)と並び、新しい動画コンテンツのトレン…

PICKUP

  1. 横浜 割烹 料亭 田中家|激戦の時代を生き抜いた歴史ある老舗料亭
  2. marketing02
  3. marketing14
  4. Taskmanagement
  5. hereO
  1. webdesign01
  2. web09
  3. web director wordpress01
  4. TempTraq
  5. root
  6. Enevo_One
  7. ECサイトを安全かつ継続的に運用するための「守り」の施策
  8. バルセロナ
  9. デキルトレード
PAGE TOP