タイトルの「9割」は言い過ぎかもしれないが、「メリハリ」はとても大事な考え方と思っています。ポイントは「主役」と「脇役」をハッキリさせることです。美術系の学校を出ていない文系雑草独学デザイナーの私が試行錯誤しながら身につけた学習方法をご紹介します。
【目次】
デザインや配色を身につける手順
まず、私のような文系雑草独学デザイナーは「天」からセンスが降って来ません。そこを認識、受容することがスタートラインです。
私は下記のような手順を踏んでデザインと配色を身につけました。
- デザイン、配色の基本原則を理解する
- デザインをひたすらインプットしまくる
- 実際のデザイン完成物を分解して研究
デザインの基本4原則
「デザイン」とは何ぞや？
広義には「計画」「設計」、狭義には「図案」「意匠」などと言われます。
もうすこしわかりやすい言葉でいうと「メリハリ」を付けること、です！
「主役」と「脇役」をきっちり識別し、主役を強調するとともに、脇役を引っ込めます。
こちらのスライドをご覧ください。デザインの基本原則がわかります。
とてもわかりやすい！
デザインの4原則は下記です。
- 近接：同じグループは近づけ、異なるグループはマージンを開ける＝メリハリ
- 整列：要素を意図的に整列する=規則性
- コントラスト：目立たせたい主役を強調し、脇役を引っ込める＝メリハリ
- 反復：同じ意味を持つ要素は同じスタイルにして繰り返す＝規則性
1と3は「メリハリ」、2と4は「規則性」に関わる内容ですね。メリハリと規則性は車の両輪のような考え方です。
面積比率で理解する配色の基本原則
次は配色の基本原則です。
私はかつて配色の本に並ぶ正方形のカラーチャート達を眺めるところから始めました。
ガーリーはこの5色「ふむふむ」エスニックはこの5色「ほうほう…」
が、いざ実際に配色しようとすると、とたんに手が止まってしまいます。
「で、ていう…」
なんとなく本にある数値のまま入れてみるが、なぜか同じような雰囲気にはならない。。
そう、カラーチャートをいくら眺めたところで、配色の考え方（基本原則）が身についてないと、何をどうしていいやらサッパリなんですよね！
こちらのスライドをご覧ください。
これもとてもわかりやすいです！
まず色には「３属性」があります。
- 色相(H)：色み。暖色、寒色、中間色など。
- 彩度(S)：鮮やかさ。濃い色、淡い色など。
- 明度(B)：明るさ。黒、グレー、白など。
（HSBってなんぞ？と思ったあなた、次回に詳しく解説します！）
このスライドの素晴らしいところは、後半で色の「面積比率」を解説しているところです。
- メインカラー：主役の色（面積25%）
- ベースカラー：背景など脇役の色（面積70%）
- アクセントカラー：ワンポイントの挿し色（面積5%）
この面積比率による「メリハリ」もとても大切な考え方です。
デザインのインプット方法
デザインと配色の基本原則は上のスライドで理解できたと思います。次はインプットです。
私は下記のような方法をとりました。
- スクリーンショット
- スマホカメラで撮影
- SNS（ピンタレストなど）
- Webデザインギャラリー
スクショ&カメラはクラウドへ
普段から意識して、PCやスマホで目についたデザインはスクリーンショットをとります。
また、屋外で目についた広告、ロゴマークなどはスマホのカメラで撮影しましょう。 チラシやフリーペーパーもプロの仕事の宝の山ですね！
これらの画像はクラウドにストックすると、時と場所を選ばずいつでも参照できます。
「Googleフォト」は容量無制限なのでオススメです。*1
※参考：Google Photos
（2021/03/01追記）
Googleフォトは2021年6月から有料化する模様。ありがとうGoogleフォト、これまでお世話になりました（自分は今後も使い続けるつもり）。
※参考：Googleフォトに「月250円」払う？ Amazonフォトにする？ それとも…… - ITmedia NEWS
SNSから刺激を受ける
その他、SNSを利用するのもいいでしょう。
デザイン以外のジャンルもインプットしましょう。刺激になります。
- Instagram：画像のスーパーメジャー。写真やイラスト、アートなど
- Youtube：動画のスーパーメジャー。実写、アニメ、3DCGなど
- SoundCloud：音楽系SNSで一番大きい。
気になる作品は「いいね」するとあとで振り返れます。
また、気に入ったアカウントは「フォロー」するとタイムラインに表示されます。
（おまけですが、インプットしたことをTwitterで呟くのも記録になっていいと思います！）
※参考：イイダリョウ@クモのようにコツコツと (@idr_zz) | Twitter
Webデザインギャラリーをチェック
Webデザインに特化したギャラリーサイトもたくさんあります。
- muuuuu.org：ムーーーーって読むのかな？カテゴリで別れて見やすい
- Web Design Clip：こちらもカテゴリで別れて見やすい
- retrobanner：バナーなど「部分」に特化したギャラリーもあります。
海外のギャラリーサイトも刺激になります
- awwwards：アワード（欧米）
- CSS Design Awwards：アワード（欧米）
- DAA：アワード（アジア）
いろんなものを浴びるほど触れて、まずはプロの仕事に見慣れましょう。
デザインの研究（アウトプット）
これまではインプットでここからはアウトプットです。
- デザイン模写：手書き or デジタル
- CodePen：ソースコードを元に編集
- 配色研究：Adobe Color CCなど
デザイン模写
手書きはトレーシングペーパーで正確に写したり、横に並べてワイヤーフレームっぽくラフに描いたり。
色は水彩だと乾く時間がかかるので色鉛筆が楽ですね。
デジタルはadobeならイラレやXDとか。非adobeではaffinity designerがおススメです。
※参考： Affinity Designer – Professional Graphic Design Software
下のレイヤーに元画像を置いて、色はスポイトで拾えます。
デザイン模写私は昨年頑張ってました。（最近CodePenが楽しくてお休み中です。。）
※参考：https://www.instagram.com/idr_zz/
【2018/12/31追記】
この後、衝撃的な出会いがありました！ブラウザでデザイン制作ができるサービス「Figma」です！下記のCodePenのデザイン版といった感じ。今後はこちらで模写を頑張ろうかと思っています。
※参考：Figma: the collaborative interface design tool.
Codepen
CodePenはSNS機能付きオンラインエディタです。まさにこのブログでいつもやっていることですね！
気になったページのソースコードをブラウザのデベロッパーツールで調べて、Codepenで編集したりします。
配色研究
配色研究は前述した通り、色の数値だけでなく面積比率も意識するので、実は画面構成も意識することになります。
デザイン模写に近いトレーニングになります！
私のオススメツールはAdobe Color CC！ブラウザ上で誰でも無料で使えます。
※参考：https://color.adobe.com/ja/create/color-wheel/
まとめ
全体的な流れは下記です。
- まず「基本の理解」
- 次に「インプット」
- 最後に「アウトプット」
しかしながら「インプット」については「これで終わり」ということはありません。たぶん永久に浴びるようにインプットし続けることになります。
「やらなきゃ」という義務感で行うよりは、呼吸する、食事する、と同じような感覚で習慣化できるといいでしょう。
「アウトプット」はこのブログ自体も該当します。（最近はコード寄りですが。。）
実際に手を動かすことでデザインの意図が見えたりメリハリや規則性のバランス感覚が身につきます。
アウトプットの「引き出し」が増える感覚がインプットの励みにも繋がり、好循環になると素晴らしいと思います。
私もコツコツ頑張ります！
次回は配色研究！
アウトプットの最後、「配色研究」については次回、私がオススメする「Adobe Color CC」を使った方法を掘り下げて紹介します。
それではまた！
※参考：「デザインの基本」記事まとめ
qiita.com
*1:私はプライベート写真と分けるためデザイン画像はアーカイブに放り込んでいます
