デザインスキル講座 第1回 デザインの4原則と色の3原則

20新卒 北九州勤務の森本心です。
メンバーズのスキルフェローである米倉明男さんを講師に迎えた第1回デザインスキル講座 （オンライン開催）に参加しましたので、学んだことを共有させていただければと思います。

参加した理由

ただただデザイン力を上げたい！

です。デザインの業務にほんの少しだけ携わらさせてもらい思ったのはまだまだ実力不足。これにつきます。
今回の講座を通して何か自分にインプットできればと思い参加を決意しました。

講座内容

・レイアウト
・配色
・タイポグラフィ

今回の講座内容は上記の三項目でした。
セクションごとに紹介していきます！

レイアウト

皆さんデザインをする際にレイアウトで悩んだ事はないですか？僕はもの凄く悩みます。
レイアウトには「整列」「近接」「反復」「対比」の4原則があり、それらを組み合わせていきます。簡単に説明していきます。

整列

レイアウトの最も基本的な原則です。
・「揃える（整列させる）」＝「グループを作る」という意味合いを持つ
・Illustratorなどのツールでガイドラインを表示して整える
・特定のオブジェクトを目立たせたいなど特に意図がない場合は、オブジェクトの向きを揃える

近接

画像やテキストなどの要素同士の距離を調整し、まとまり（グループ）を表現します。
・同じグループは近づけ、異なるグループは離して配置する
・罫線を引いてグループを作るのも手法の一つ。ただし、罫線を多用したり囲みで近接を作ると分かりづらくなるので注意
・背景に色を付け、「面」でグループを作る時は外側を塗り、内側を白くすると構造化しやすい

対比

要素同士を比較することで、ストーリー性を生むことができます。
・ジャンプ率による対比：タイトルと本文などのフォントサイズの違い
・分割による対比：画面やバナーなどを分割し、関係性のある要素を並べる
・余白による対比：ロゴやテキスト、画像の余白を調整し視点の流れを作る

反復

要素を繰り返して配置することで関連性を持たせることができます。
・同じ要素を並べる
・異なる要素を交互に並べる
・同じ要素で異なる色を並べる
・同じ要素をずらして配置する
・要素を見切れさせたりずらして配置したりすることで、動きをつける
・対比や色を加え、要素に強弱をつける

皆さんは普段から意識していましたか？意外と意識していなかったりしますよね…。
レイアウトを決める際には、4原則を考えた配置が重要です。

配色

色ってなんであんなに難しいのでしょう。配色はものすごく苦戦します。
色の3原則である「明度」「彩度」「色相」と、色の選び方のコツをご紹介します。

明度

Illustratorなどでカラーピッカーにおける「B」のことで、明るさを指します。
0％が最も暗く、100％が最も明るくなります。

彩度

カラーピッカーでは「S」で、鮮やかさを指します。
0％が最も濁っていて、100％が最も鮮やかになります。

色相

カラーピッカーでは「H」で、赤、青、黄といった色の種類のことです。
異なる色を組み合わせるときは、明度と彩度を同じ数値にすると良いです。

色の選び方

・色の持つイメージ（カラーイメージ）で決める（赤：情熱的　青：知的　など）
・「明度と彩度の組み合わせ」を「トーン」と言い、トーンを決めてから色を決める
→色のまとまりを「トーンマップ」と言い、それぞれイメージがある（明るいイメージなら「ブライトカラー」など）

トーンマップに意味があるのは初めて知りました。
色を使う際にはトーンマップを見て意味が合っているのかを確認してみるのもいいですね。

また、Adobe Colorでは、手軽に色のまとまりを作成することができます。ぜひ活用してみてください。

タイポグラフィ

そもそもタイポグラフィとは「文字を並べ余白を配置し活字を使いこなすこと」です。
では、活字を使いこなすとは？

・活字を使いこなすとは、メッセージに合ったフォントを使う
・フォントとは同じデザインのものを字形でまとめたもの
・余白を使う際には文字間を綺麗にする

「メッセージに合ったフォントを使う」っていざやってみると難しいですよね…。
タイポグラフィを私自身作ったことが少ないので実際に作ってみたいと思いました！

いかがでしたか？
デザインの基礎を少しでも学んでいただけたでしょうか。制作で活用していただければ幸いです。

ここまで読んでくださりありがとうございました！