文字のジャンプ率で適切なサイトイメージを演出する
※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。
ジャンプ率ってなに！？という方もいると思いますので、まずは用語から説明しましょう。
ジャンプ率とは、対象オブジェクト（つまり“モノ”）の「大きい部分」と「小さい部分」の比率を指します。比率が高ければジャンプ率が高い（大きい）、低ければジャンプ率が低い（小さい）というように表現されます。
対象とするオブジェクトは文字や写真などが考えられますが、「ジャンプ率」とだけ言われた場合、文字のジャンプ率を指すことが一般的でしょう。見出しなどの文字の大きい部分と、本文などの文字の小さい部分の比率を指しているということですね。
ジャンプ率というものは、DTP業界では当然のごとく知れ渡っている言葉だと思いますが、Webからデザインを学習した人にはご存じない方も結構いると思います。しかしながら、サイトのイメージに比較的大きく影響する要素の一つなので、理解しておくとよいでしょう。
実際にジャンプ率を見てみる
論より証拠。ジャンプ率の高いサイト・低いサイトをみてみましょう。非常に大雑把ですが、解説用に架空のWeb制作会社のサイトを作ってみました。 （大きく見るには画像をクリック、画像を閉じるには、画面下部のCloseボタンをクリックしてください。）
700px×700pxと、実際のサイトの大きさに近く作りましたので、モニタの解像度が低い場合はちょっと見づらいかもしれません。ブラウザを全画面表示にしてからクリックすると見やすいと思います。
↑↑ジャンプ率が高い方。ダイナミックな感じが出ていますね。
↑↑ジャンプ率が低い方。おとなしくてまじめな感じが出ていますね。
今回はあからさまにジャンプ率を変えてみましたので、違いが明らかですね。ジャンプ率以外のデザインは同じではありますが、これだけ印象に違いがでるのです。
ユーザに与える印象
自分で作っておきながらなんですが、先ほどの画像を見て、私が感じた点をキーワードで書きだしてみました。
- ジャンプ率が高い画像
-
- ダイナミック
- 体育会系
- やんちゃ
- 豪快
- 若い（会社や社員が）
- 行動的
- ジャンプ率が低い画像
-
- まじめ
- 知的
- 信頼
- 保守的
あくまでも私の直感で出たキーワードを羅列しただけなので、人によっては「？」に思うこともあると思います。しかし、ジャンプ率が高い方がダイナミックな印象で、ジャンプ率が低い方が知的でまじめな印象という大筋の傾向は、ほとんどの人が感じられると思います。
二面性もある
良い部分だけではなく時にはネガティブな印象を与えてしまうこともあります。例えば、ジャンプ率が高いとダイナミックな印象を与えると先ほど言いましたが、場合によっては安っぽく見えたり信頼できなそうな印象を与える場合もあるのです。
ジャンプ率が低い方も、まじめで知的な印象を与える反面、価格が高そうに感じたり、近寄りがたそう、融通が利かなそうな印象を与えることもあります。決してジャンプ率のせいだけでこのように感じる訳ではありませんが、二面性があるということは覚えておいてください。
閲覧者の印象を左右するたったの一要素
このページでは、ジャンプ率だけにフォーカスした場合のユーザに与える印象について説明しました。前述したように実際のWebサイトでは、ジャンプ率だけでユーザに印象を与えているわけではありません。色やデザイン、オブジェクトの作り込みなど、印象を左右する要素は他にもたくさんあります。つまりジャンプ率は、閲覧者の印象を左右するたったの一要素なのです。
そうであっても、ユーザの印象に影響を与える大きな要素の一つであることに変わりはありません。こういった要素を一つひとつ着実に抑えていけば、デザインのレベルは確実に上がっていくはずです。あせらずにじっくりと学習していきたいところですね。
12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。
コメント
この記事へのコメントはまだありません。
Web制作Tips- デザイン
- ├フリーの写真素材を有効活用しよう
- ├デザイナーならこだわりたいカーニング（文字詰め）
- ├文字のジャンプ率で適切なサイトイメージを演出する
- ├TPOを考えてハズさないフォントを選ぶ
- └失敗しない配色の基本
- ユーザビリティ
- ├そのフォントサイズ、適切ですか？
- ├リンクテキストをわかりやすくする
- ├フォームのリセットボタンを考える
- ├リンク切れ時に適切な404ページを表示をする
- └フォームの確定ボタンは右?左?
- コーディング
- ├文法チェッカーで正しい(X)HTML/CSSを書こう
- ├インデントで読みやすいソースコードを
- ├文字化けを防ぐ&解消する方法
- └背景画像ありのボックスの文字をはみ出させない方法
- その他
- ├ディレクトリ構造は適切に
- └絶対パス?相対パス?ファイルの指定方法いろいろ
↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)