まず、まとめ

「どんな人に」「何を」「なぜ」「いつ・どこで」伝えたい？を意識してデザインしよう！というお話し。
そこをしっかり決めないと「どのような」デザインに仕上がるかは全く異なる。

実際にページデザインする場合の王道フロー

1. 図解とラフ
   デザインしたいことが理解できているか
   完成デザインが目に浮かぶくらいじっくり考える
2. 方向性を決める
   「表現」と「構造」のマッチング
3. 骨格をつくる
   ディテール（色や書体）はまだ
4. キャラを立たせる
   要素ごとに個性を持たせる
5. 足し算と引き算
   狙った印象に届いていない → 足し算
   なくても問題ない要素 → 引き算
6. ブラッシュアップ
   細部の完成度を上げていく

デザイナーの7つ道具

1. ダイジ度天秤

どっちがダイジ？を口癖にする

STEP 1
伝えいたことを整理。たくさんの「伝えたいこと」があったら数を絞る。

STEP 2
どっちがよりダイジ？両方同時に実現できないことは、優先順位をつける。

STEP 3
ダイジな方を強調。

2. スポットライト

主役を狙って光をあてる。
色 / 地（塗り） / サイズ / 余白 / 揃えない

STEP 1
離れて見てみる。

STEP 2
主役にすぐ目が向かなかったら方法を変える

STEP 3
もう一度離れて見てみる。

3. 擬人化力

いいなと思うものに出会ったら、じっくり観察してみる。
人物に例えるなら誰？どんな人？と勝手にキャラ化して、自分の中にkyらクターのアーカイブを作る。
「書体」を「音声」
「組み」を「話し方」
「配置」を「人々」
「あしらい」を「女性」
「色」を「年代」

4. 連想力

STEP 1
コンセプトから連想される言葉やモチーフ名をたくさん書き出してみる。

STEP 2
言葉から連想されるイメージに浸る。

STEP 3
実際にデザインに取り入れられそうな色やテクスチャ、カタチなどを引き出す。

5. 翻訳機

言葉コミュニケーション
言葉・文章などの文字による表現

非言語コミュニケーション
写真・図版などのビジュアル表現

STEP 1
要素を並べて俯瞰する。

STEP 2
非言語に翻訳

STEP 3
デザインの目的次第でバランスを調整する

6. 虫めがね

最初は大きな構造や方向性を優先して、大枠が固まるまでは粗くみる。仕上がりに取りかかるときに初めてデザインの見方を細かく見る

7. 愛

そのデザインを決めるもの。
「内容」への愛と「届ける相手」への愛。
「内容のことを考え抜いて作っていたら、デザインはこうなってました」というのが理想のアプローチ。

デザインの素

• 文字と組み
• 言葉と文章
• 色（配色）
• 写真
• グラフとチャート

配色

イメージ通りの配色は「色の数」と「色の差」で作り出せる

なじみのよい配色にするには？

色相・明度・彩度・トーン、何かひとつでも揃える

ドミナント・カラー、トーン・オン・トーン、ドミナント・トーン

パキッとひきしめたいときは？

正反対の色を少しだけ使う

アクセントカラー、セパレートカラー

繊細なニュアンスを出すには？

ほんのわずかな差で繊細さを出せる

カマイユ、フォカマイユ

色数が多くてもまとまりを出すには？

赤みと青みを揃えるのがポイント

ウォームシェード、クールシェード

統一感を出しつつ、単調にしないためには？

似ている/差がある色を両方合わせせ持った配色を

グラデーション

自然で落ち着く配色にするには？

黄色に近い色は明るく、青紫に近い色は暗くする

ナチュラル・ハーモニー

人工的で斬新な配色にするには？

黄色に近い色は暗く、青紫に近い色は明るくする

コンプレックス・ハーモニー

色を使いこなすコツ

今使おうとしている色の目的は、説明や強調するために使う「機能的な色」か一目見たときの印象を左右する「情緒的な色」か考える。

機能的

• 色がある方が、ないよりも目立ちやすい
• 明度差が大きい方が見やすく、小さい方が見にくい
• 暖色系のほうが、寒色系よりも目を引きやすい
• 同じ色・配色を使い続けると、記号として認識できる
• 似ていると同じ、似ていないと違うグループに見える
• 強い色に重要度が高く、弱い色は重要度が低く見える

情緒的

RED
情熱、強さ、活動的、力強い、おめでたい、興奮、怒り、停まる、刺激、生命力

PINK
可愛らしい、安らぎ、優しい、温厚、幸福、ロマンティック、若さ、甘さ、やわらかさ

ORANGE
活発、太陽、暖かさ、健康、温もり、フレッシュ、にぎやかさ

YELLOW
光、活動的、軽快、エネルギー、希望、明るさ

BLUE
クリア、爽やか、清潔、清涼、水、空、海、ガラス、落ち着き、静寂

PURPLE
優雅、上品、神秘、古典的、伝統、知性、気品、ロマンス、幻想的、エキゾチック

BROWN
ぬくもり、安定、素朴、安定、落ち着き、質素、堅実、静けさ

BLACK
重圧感、力強さ、都会的、気品、厳粛、高級

GRAY
中立、協調性、洗練、シャープ、落ち着き、大人っぽい

WHITE
クリーン、清楚、清潔、純粋、完璧、無垢、シンプル

写真の選び方

感じる写真	読む写真
絵を味わう 写真全体の雰囲気重視 生々しい印象にならないように抜けを作る 例） エッセイや雑誌の紹介ページなど	説明に向いている 被写体そのものを過不足なく捉えている ノイズは少なめ 例） ガイドブックやカタログ

複数あるとストーリーが生まれてくる。
そこに何らかの関係性＝対比が生まれる（2枚）。
ストーリーを描くようにどの写真を主役にするかも大事（3枚）。

写真の配置

• 断ち落とし（主観的に写真に入り込める）
• 余白あり（客観的に冷静に写真を観察できる）

写真のサイズ

• 3:2、4:3 など写真の定番比率は素直な印象になる
• 定番縦横比を変えるとデザインの意図が強調される

グラフとチャート

割合 → 円グラフ（割合/パーセント/シェア）
項目の大小 → 横棒グラフ（大きい/小さい/多い/少ない）
時系列の増減 → 縦棒グラフ（増える/減る/安定/変動）
分布 → 折れ線グラフ（集中/分散/範囲/頻度）

グラフをグラフィックにするポイント

• 細く！軽く！もっともっと薄く！
• 引いて、足して、例えて
• 写真を利用する
• テクスチャを利用する
• 立体表現をやるならやりきる

何かお困りではありませんか？