menu

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

制作

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

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

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

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

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

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

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

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

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

小野 良勝

小野 良勝 代表取締役

投稿一覧

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

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

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

関連記事

  1. 観光や教育関連のサービスとも相性抜群のバーチャルリアリティ(VR)動画

    観光や教育関連のサービスとも相性抜群のバーチャルリアリティ(VR…

    Youtubeなどの動画配信プラットフォームに加え、無料の動画素材や編集アプリなども身近になったいま…

  2. web04

    月間ユーザー1億人以上のサービスも。Webディレクターが知ってお…

    世界中で10億人以上の人に利用されているSNS。Webサイトも分野を問わずSNSからの流入が増えてお…

  3. 01-HTML-CSS

    Webディレクターなら正しく理解しておきたい、HTML5の4つの…

    2014年10月に勧告され、さまざまなWebサイトで使われているHTML5。国内でも無印良品などHT…

  4. 認知科学によって利便性を追求。Googleが推奨する「マテリアルデザイン」とは?

    認知科学によって利便性を追求。Googleが推奨する「マテリアル…

    無料でダウンロードできるアイコンやフォント、ベクター素材などを上手く利用しながらデザインやレイアウト…

  5. web02

    CTRが約300%UPしたオウンドメディアも。SNSシェアボタン…

    多くのWebサイトに設置されているFacebookやTwitterといったSNSのシェアボタン。ペー…

  6. ハイクオリティな動画素材を無料でダウンロードできるWebサイト3選

    ハイクオリティな動画素材を無料でダウンロードできるWebサイト3…

    従来のリスティング広告やバナーに対して圧倒的に多くの情報量を伝えられ、商品開発の陰に隠れたストーリー…

  7. web04

    Webサイトのプランニングに活用できる「マインドマップ」(後編)…

    1つの主題から関連するキーワードやイメージを放射状に書き出していくことによって、複雑な概念や情報を分…

  8. web03

    Webサイトのプランニングに活用できる「マインドマップ」(前編)…

    ユーザービリティ向上やコンバージョン率改善など、Webサイト制作の目的はさまざまです。目的を実現する…

PICKUP

  1. 【リスティング広告】 ターゲットを選別して効果アップ。広告文のもう1つの役割
  2. ぎをん椿庵 / 京風野菜のもちもち生パスタ
  3. marketing12
  4. BLEBeacon03
  5. listing01
  1. 次世代のビジネスチャンスを拓くVR&AR活用術
  2. ad09
  3. 考えてみたらホームページリニューアルには意外とメリットが多かった
  4. SEO対策ほど変化の激しい業種はめずらしいものです
  5. T-connect
  6. web01
  7. ad06
  8. web07
  9. なぜ、BLEBeaconはオムニチャンネル実現に必要とされているのか?
PAGE TOP