みなさんこんにちは。ぜぇれさんです。
今回はデザインの基本4原則から「反復」をお送りします。
これまでの記事をまだ読んでいないという方は是非以下の記事も読んでみてください。
「集合篇」
「整列篇」
「対比篇」
ということで早速ですが説明に移りましょう。
[amazonjs asin=”4797396792″ locale=”JP” title=”デザインの基本ノート 仕事で使えるセンスと技術が一冊で身につく本”]
基本原則4「反復」
反復とは一部分のデザインにフォーカスしたものではなく、デザインを施した紙面・あるいは1冊の本・一つのWEBサイト。
またあるいはそれらすべてを総括したプロモーションにおいて一つの方向性、ルールを与え、それらを総合した最終的なクオリティを上昇させるための手段です。
（ぜぇれさん談
というと仰々しく聞こえるかもしれませんが、ようは…
あっちはこの色、あっちはこのフォントサイズ、あっちはこの横幅、あっちはこのボーダーサイズ
というようなその場その場のデザインではなく、制作物全体を通して
タイトルはこのサイズ・この太さ・この色
基本カラーはこの色、強調カラーはこの色
マージンは全体を通して〇px
というようなルールを設け、それを踏襲してゆきましょうということなのです。
そうすることによってユーザーは無意識に、
「あ、ここがタイトルだな、つまりこの下はそれに関する内容」
「あ、ここ強調されてる部分だな、重要なところだ」
と、制作物全体を通しての伝える力をより強固にしてゆけるのです。
「反復」を行わないと何が起こるのか
少し極端な例となりますが、反復を行わないと何が起こるのかを説明してゆきます。
上記の画像に3枚のWEBページを出しています。すべて同じサイトの中にあるページです。
(小さくてすみません
この3ページではそれぞれグローバルナビゲーションの位置が全く違います。
そうするとどうでしょう？
ユーザーは各ページへ移動するたびにナビゲーションの位置を探し、その無駄な手間を経てから別ページへ移動しなければなりません。
ナビゲーションを探して移動してくれるならまだいいでしょう、そもそもストレスを感じてページを離脱してしまうかもしれません。
またこちらの例はいかがですか？
あなたはこの画像にある5つのブロックの関連性をどのように把握しましたか？
左から二つのブロックが少し近く、右三つのブロックもまとまって見えるかもしれません。
ですがこれら5つはそれぞれ独立したコンテンツです。
しかしそれはあなたには伝わりませんでした。
それは独立したコンテンツには〇pxのマージンを設けるという反復が実現できていないからです。
最後に
「集合」「整列」「対比」「反復」と4回にわたって長々とお付き合いいただいた方もそうでないかあもありがとうございました。
集合では
集合では同じ属性の情報を一つのまとまりとして集め、効果的に情報の把握をユーザーに促すことを説明しました。
(余談ですが集合を近接と呼んでいるデザイナーの方も多いです。
整列では
整列ではデザインを施すキャンバスに見えないラインを用意し、それに沿ったレイアウトを施すことで規則がもたらされ、それが美しさにつながることを説明しました。
対比では
対比では情報の優先度を再設計し、集合と整列で実現した規則から逸脱させることで強力なインパクトを与える手段を説明しました。
反復では
そして今回の反復では、集合・整列・対比で作られた一つのデザインをルールと定め、それを繰り返すことで全体を通したクオリティの向上につながることを説明しました。
この4つを知ったあなたは、ひょっとしたらデザイナーではないかもしれません。
でもきっとこれらを意識していないデザイナーよりもずっと素敵で、読み手受け手に親切な伝わる「何か」を作れるようになっているはずです。
この記事内容があなたの生活のどこかでちょっとでも役立つことを祈ります。
いかがでしたか？今回以下のような内容でお話させていただきました。
ぜぇれさんでした。
企画資料を作る上でもこれは大事かもしれん。一貫性のない書式だと理解するのも時間がいるもんね。
勉強になります。
せやで( ◠‿◠ )
伝えたい相手のことを思いやるのがデザインやで( ◠‿◠ )
それはデザイナーだけのものではないんやで( ◠‿◠ )