デザイン基礎学習

今日からデザインの学習記録を残していく。

なぜデザインを勉強するのか？
・デザインというコミュニーケーションを理解したい。
・色や余白などが与える心理的部分をより深く知りたい。
・新い視点が欲しい
・デザインツールを使いこなしたい

何で学習していく？
・なるほどデザイン（本）
・ノンデザイナーズブック（本）
・【グラフィックデザインの教科書】デザインの基本と知識を学ぶ、デザイナー1年生のための初心者講座（Udemy）
・〜デザイナーの頭の中、大公開〜　企画を「１枚の紙」で、伝えきる。（Udemy） ...etc

デザインの4原則
・整列
・近接
・反復
・対比
これを守っていないデザインは素人感が出てしまう。

【整列】
オブジェクトを綺麗に揃える

余白やオブジェクトが揃っていないと違和感を感じる。
ほんの少しのズレにも反応してしまう。

綺麗に揃えるには？
グリッドやラインを揃えてレイアウトを綺麗に揃える。
まず縦を揃えてから横を揃えるとおすすめ。

オブジェクトの比率がそれぞれ違う場合は？
オブジェクトをした揃えにする→大きさを整える→テキストのセンターにオブジェクトを揃える。

絶対にこれが正解というものはない。
大切なのは意図を明確にすること。

【近接】
関連性の高い要素を近づけて配置する。
要素間の関係性を表す。
逆に余白が大きいと別の要素として捉える。

情報を受け取る印象が大きく変わる。

余白以外にもフレームや罫線で分ける。
色を変更してグループを分けることもできる。

【反復】
規則性を持たせて統一感を出す。

見出しを同じスタイルに。
レイアウトのグループ要素を同じスタイルに。

【対比】
強弱やメリハリをつける。

中途半端に対比はさせない。
やるなら大胆に。思い切って。
14pxと16pxの違いではなく、16pxと32pxくらい強弱の差を大きくする。

何を強調するかを明確にする。
何を1番伝えたいか？どんな動線で見てほしいか？
情報の優先順位。

【余白】
余白の取り方でも与える印象が変わる。

余白が少ない→賑やか　（ディカウントショップ→服がぎっしり並べられている）
余白が多い→高級感　（ハイブランド→大きな展示室に1つや2つのみ）

グラフィックなどの場合は版面率で余白をコントロールする。

【中央揃え】

初心者がやりがちな中央揃え。
与える印象は実は弱い。
最初のうちはできるだけ中央揃えを使わないように意識してみる。

レイアウトする際は見えない線を意識する。
写真内の余白も気にしてみる。

【写真の使い方】
写真を使って伝えたいことをコントロールする。
●大きさ
メインカット（大きい写真）で何を伝えたいか？
サブカットでメインを補足

●位置
近接を意識して関係性を表す。

●寄りと引き
引きの写真：状況を伝える
寄りの写真：詳細を強調

●解像度
印刷で必要な解像度は350ppi以上
ビットマップ画像はフォトショップ
ベクター画像はイラストレーター
印刷のカラーモードは「CMYK」

【書体　和文書体】
●明朝体
筆使いの抑揚の名残がある。
可読性が高い=読みやすい
フォントの種類：ヒラギノ明朝、游明朝、小塚明朝、リュウミン
書籍や小説など本文によく使われる

●ゴシック体
一本の線の強弱が少ない
視認性が高い=よく目立つ
フォントの種類：ヒラギノ角ゴシック、游ゴシック、小塚ゴシック、ゴシックMB101
タイトルや見出しによく使われる
たい

【書体　欧文書体】
●セリフ体
平筆使いの抑揚の名残がある。
可読性が高い=読みやすい
フォントの種類：Times、Garamond、Caslon
書籍など本文によく使われる

●サンセリフ体
セリフがない書体
一本の線の強弱が少ない
視認性が高い=よく目立つ
看板によく使われる（広告）

【タイポグラフィ】
文章を読みやすくする。
長文：ベーシックで読みやすい書体、太さを選ぶ

【文字の大きさと行送り】
雑誌を例に
タイトル：大きく太い文字
リード文：12Q~15Q
小見出し：14Q~16Q
本文：11Q~14Q
キャプション：8Q~10Q
適切な行送り：1.5~2倍
読みやすい行長：1行15~40文字程
紙面の大きさやタイトルによって決める。

【文字揃えと視線誘導】
均等配置：ボックスの中に綺麗に配置する。
横組本文：Z型
縦組本文：N型

【配色】
光の三原色
R（レッド）G（グリーン）B（ブルー）

色の三原色
C（シアン）M（マゼンタ）Y（イエロー）K（ブラック）

色の三属性
色相：色味の違い、色合い（青っぽいなど）
彩度：色の鮮やかさ（高い…鮮やか　低い…くすんだ色）
明度：色の明るさの度合い

補色： 色相環の反対の色（インパクトのある配色）
反対色：補色の隣（洗練された雰囲気）
類似色：隣り合った色（調和の取れた、まとまりやすい配色）

明度+彩度=トーン

同系色を使った色
①色相で隣り合っている色
②明度差のある色
③トーンが異なる色