ジャンプ率 Webデザイン1年生がバナートレースやってみました #2

Webデザイン

こんにちは。Halcanaです。

今回は広告バナートレース第2回です!今回も文字だけバナーですが、ちょっとだけあしらいがあるものを選びました!

振り返り

今回はPAL CLOSETのセール告知バナーです。私もよく服を買いに行きます。

このバナートレースを行ったのは7月の始めなので、記事を書いている現在とはちょうど1ヶ月のタイムラグがあります。今考えるとなぜストライプに1時間もかかった…?と思います(笑)
Photoshopを始めてまだ1週間だったのでしょうがない。それだけ成長したということでしょう。

ストライプの作り方はGoogle検索すれば分かりやすくまとめた記事がたくさん出てくると思うので今回は省略します。

デザイン分析 – ジャンプ率

今回はジャンプ率に注目したいと思います!

ジャンプ率とは?

ジャンプ率とは、文字・画像などデザインの要素の大きさの比率を指します。この比率の差が大きい(大小の差が大きい)ときは「ジャンプ率が高い」と言います。逆に、小さい(大小の差があまりない)は「ジャンプ率が低い」と言います。

参考:ジャンプ率とは何? わかりやすく解説 Weblio辞書

ジャンプ率が高いと要素を目立たせることができます。

分析

このバナーはジャンプ率がかなり違います。一番差があるところで比べると、

10 → 225 pt
日付→ 18~23 pt

となっています。計算してみると11.5倍でした。だいぶジャンプ率が高いですね。
(フォントによっても異なると思うので一概には言えないかもしれないですが)

ジャンプ率が高いことで、躍動感が出て活発な印象を与えることもできます。

セールの告知バナーなので、一番目立たせたいのは「10%OFF」ですよね。特に「10」は特大サイズで真っ先に目に入るようになっています。「%」と「OFF」も「10」と合わせて長方形に収まるように配置されておりデザインの4原則の一つ「整列」に則っています。

また、日付はフォントサイズがかなり小さいものの、ストライプのあしらいのおかげで「小さすぎる」という印象はありません。サイズを小さくしてもあしらいの使い方によっては十分読みやすいデザインにできるんですね!

まとめ

今回はPAL CLOSETさんのバナーを題材に、ジャンプ率に着目して分析しました。セール告知バナーのように目立たせたい要素がはっきりと決まっている場合は、思い切ってジャンプ率を高くして一気に目立たせちゃいましょう!

次のバナートレース記録はこちらから!

コメント

タイトルとURLをコピーしました