みなさんごきげんよう。佐伯です。

最近気になってるフルーツは「すもも」です。美味しいですよね。

さて、前回の近接、前々回の整列に引き続き、デザインの四原則であるコントラスト(対比)について書いていきます。

前回 :デザインの四原則を桃太郎で解説していく試み【整列編】

前々回:デザインの四原則を桃太郎で解説していく試み【近接編】

ところで皆さん、花屋の店先に並んだいろんな花、見たことありますか

花屋と例えるとテイがいいですが、お花屋さんってあれですよね、陳列されている花は色々綺麗な花があったりいろんな特徴の花があったり千差万別ありますよね。
どれもこれも目移りする花ばかりですが、お花を決めるときって皆さんどうしてますか?


私は花屋で花を買わないタイプなんですが、だいたいは「目に留まった」ものですよね。

今回のキーワードは存在感です。

コントラスト(対比)とは

今回も今回で簡単に書くと、要素相対的な基準で、存在感を調整することです。
今回は、周りの要素との関係性を見て、全体での優先度などを調整する方法です。


要は、狙って「あっちの方がすげぇ」「これがあれより目立つのおかしいから直そう」と調整するときに使うことが多いです。
WEBの世界では「ジャンプ率」なんて言い方もしますね!

これを意識することによって得られる効果は、存在感の強弱をつけることでメリハリがついて「何が」「どうなのか」が明確になり、分かりやすくなります。


グラフィックデザインで例えると

グラフィックのデザインをしていると、見出しや本文テキスト、写真や情報は何を基準に適切な存在感にするかなどが重要になってきます。
そこで、1〜10まである情報の中でどれが最優先で見せるべき情報かなどを整理し、「あっちの情報よりはこっちの情報のほうが優先的に伝えるべきだよね」などを考えていく必要があります。

例によって簡単なテキスト情報をコントラスト(対比)で調整してみましょう・・!

ただの情報を・・
4de6bda1 ad6d 4e5b 9361 9568318fad1c

と、簡単ですが大きさだけ変えるだけでだいぶ見えやすくなったのではないでしょうか?

簡単に解説すると・・

8d89663f f77f 4d26 b339 92891fb9134a

A:数字と漢字にメリハリをつけることで、「いつ」が明確になりました。
B:要素の大きさを変え、ここで見せるべきは「通常価格」よりも「特別価格」というのが伝わりやすくなりました。
伝えるべきことの優先度を明確にすることで要素ごとや全体で存在感をどう調整すればよいかが見えてきます。


桃太郎で例えると

冒頭にも書きましたが、コントラスト(対比)では存在感を調整していきます。
桃太郎での存在感を考えてみましょう。
前回と同様、物語に沿ってあれこれしていきます。

※例

桃太郎は腰にぶらさげたきびだんごを犬に渡しました。
きびだんごを渡された犬はきびだんごを渡された時どう思ったのだろうか。毎日毎日生きる目的も忘れ、野良犬として残飯を漁るしかなかった犬は今日も誰かの残した食べ物を漁り──────────

と、犬のエピソードをどんどん深堀していくと桃太郎よりも存在感をどんどん大きくすることができます。

上の感じを図にするとこんな感じですね
2dcbc2f1 a8b7 44ff 955b 04e8868eab59

明らかに犬だけ際立ってますね。


せめて同じ仲間の猿・キジも・・・・

桃太郎とともに行動する犬。ふたりが歩いていると猿が現れました。
その猿の体は巨体で、ぎょろりとした目つきも恐ろしく、今にも飛びかかってきそうです。よく体を見てみれば、古傷のようなものが無数にあり常に争いの絶えない場所に身を置いていたことが容易に想像でき───────
・・・・─────きびだんごで仲良くなった桃太郎・犬・猿の目の前に現れたのは、世にも奇妙な喋るキジ。人の言葉を理解しこちらと流暢な会話もできるその姿は、まるでこの世に蔓延る魑魅魍魎のそれとなんら変わらず、かといって敵意は感じない不思議な目つきを────────

などとどんどん捏造していくだけで、三匹 (3頭?)(3体?) のエピソードが深まっていって物語としては平坦に進んでいたのがそうではなくなっていきましたよね。

B6ce9f04 b068 4a7a 8ae3 fee110986aa3

ここまでいくとどうでしょうか。ぶっちゃけると桃太郎よりも三匹 (3頭?)(3体?) の方が物語としては愛着が湧いてくるのではないのでしょうか。


つまり、物語としては登場キャラクターのエピソードを深いものにすることで、存在感大きさを調整することができました(ここでは、キジの存在感が大きくなりましたね。)

では、普通の物語ではどうでしょうか。

※普通の物語

おばあさんに作ってもらったきびだんごを渡され鬼が島に向かっていた桃太郎。
道中で犬に出会い「桃太郎さん、お腰につけたきびだんごを一つ私にくださいな」とお願いされ、きびだんごを渡したところ仲間として鬼を一緒に退治することになりました。
その後、猿とキジにも出会い、同様にきびだんごを渡し、みんなで鬼を倒しに鬼が島に向うことになりました。



1cf722b8 82ac 4367 bf7d d83625314277

どうでしょうか、普通の物語では淡々として、普通の感じの存在感になってますよね。
でも桃太郎っていうくらいだから存在感は抜群ですよね。


────それと犬、普通にしゃべってますね


まとめ

今回、コントラスト(対比)について書かせていただきました!
小難しく書きましたが結局は何かよりも他の何か存在感を思い通りに調整するやり方でした。


軽いノリで始めた桃太郎に例えたデザインの四原則シリーズ、意外と難しかったですが次回は最後、反復について書かせていただきます!やっと終われる


●前回までの記事はこちら
前回 :デザインの四原則を桃太郎で解説していく試み【整列編】

前々回:デザインの四原則を桃太郎で解説していく試み【近接編】

Shere
  • はてなブログ
  • Twitter
  • Facebook
デザインの四原則を桃太郎で解説していく試み【コントラスト編】

Writer

  • Name

    佐伯 明紀

  • Position

    デザインとか

  • Profile

    もともと紙系のデザインなどをやっていましたが、転職を機にWEBデザイン関係の仕事に就くことになりました。自分なりに頑張っていこうと思いますのでよろしくお願いします。作業用BGMとして映画の予告を延々と流すことにハマってます。