デザインの流れと基礎法則まとめ兼メモ

Webデザインだけでなくチラシや広告のデザインなどの基本的なデザイン法則や、ワークフローの本をいくつか読んだので備忘録メモがてらまとめてみます。
ここでは基本的なデザインの流れ(ワークフロー)と基礎がある程度わかるかと思います。(初心者向きです)

デザインの流れと基礎

デザインの基本：流れ【ワークフロー】

（１）目的を明確にする

いろんな本に書かれている通り一番重要なことです。
いつ / 誰が / どこで / 何を / どのように / 目的は / 結果
最初のヒアリングでこれらをしっかり明確にすることが重要です。
ここが明確になっていないと後々自分も依頼人も困ります。

（２）レイアウトを決める

(1)マージンを設定する
(2)グリッドを設定する
(3)要素をグループ化する
(4)コントラスト(強弱)をつける
(5)配色を決める
(6)フォントを決める

＊それぞれの特徴・注意点

(1)マージンを設定する

上下 / 左右のマージンを揃える
＊バラバラにしない

(2)グリッドを設定する

要素を色々配置する前にグリッドを決めておくと文字や写真などの要素の配置が後々楽になります。

(3)要素のグループ化する

接近効果ともいい、近づけたり同じスタイルにすることでそれらの要素をグループにする。

(4)コントラスト(強弱)をつける

強調したい要素を明確にする。
(文字サイズ・色・余白・写真・図・文)で強弱をつける。

(5)配色を決める

配色についてはこの記事がわかりやすいです。
WEBデザインで押さえるべき配色（ベース、メイン、アクセント）の基本「3つのカラー」

(6)フォントを決める

フォントについてはここがわかりやすいです。
伝わるデザイン(読みやすく)
フォント以外のデザインの基礎も載っていてわかりやすいので是非ブックマークを(^^)/

デザインの基本：法則

反復・繰り返し(統一感)

同じ種類の要素やデザインを繰り返すことで統一感が出ます。

文・写真・グラフなどの間隔や端っこを揃える

文章がガタガタになっていたり、グラフが見にくかったりすると読者が読みづらいのでなるべく端を揃えて読みやすくデザインする。

余白の設定

基本的に中央揃えは難しいです。
＊四隅全てに要素を置くと窮屈になります。

シンメトリー(対称性)

対称のデザインには基本的にセリフ体が合います。
三角形構図の特徴

三角形の構図：安定感
逆三角形の構図：緊張感

強い要素同士を対比させる

鏡面対称
点対称
平行移動

例えば、サッカーや野球に試合でよく
“〇〇 VS △△”
というようなポスターを見かけると思います。
そういうような対比させる時などに対称のデザインがよく使われます。

黄金比・白銀比

こちらのページがわかりやすいです。
黄金比って何？デザインに取り入れたい5つの重要ポイント

1/3の法則

縦と横を三等分する線を使って構図を考えます。
写真の撮影でもこの法則がよく使われています。
iPhoneとかで設定すると画面に線が出てきますよね。アレです〜
僕もよく写真を撮りますが参考にしています。

視線の動き

横文字はZ字型
縦文字はN字型に視線が動く。

デザインの基本：写真の基本レイアウト

基本的なレイアウトは以下です。

四角版
切り抜き版
四方裁ち落とし
三方裁ち落とし

トリミングで情報を的確に伝える

例えば画像だと
左側が過去
右側が未来を連想します。
写真の人物の向きや走っているバイクの向きによって全然連想されるものが違うので、印象が変わってきます。

写真に写っているもののサイズを揃えるまたは変えて強調する

写真に写っている要素が大きければ大きいほどその要素が強調されます。
また、同じ大きさで並べてあるとレストランのメニューのように統一感が出ます。(その中でも一押しの商品はデカくしてありますが)

写真と文字

文字を写真の上に配置したいことが多々あると思います。
コツとしてはいろんなものがたくさんあるところに文字を配置しないことです。
要はコントラストが強いところや何か意味を持つものが被るところです。

デザインの基礎法則：まとめ

何個か本を読んで自分用のメモでまとめてみたのであまり読みにくいかもですが、デザインの情報を仕入れたりした時にその都度この記事を更新していきます。
デザインはセンスよりも基本をしっかり押さえることが大事です。

その人だけが良いと思うものはデザインではありません。
また見た目だけにこだわってはいけません。

スティーブ・ジョブズもこう言ってましたよね。

“Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” – Steve Jobs

最後の一文だけでもググったらすぐ出てきます。
デザインは見た目じゃない、どう動くか（機能）だということですね。