2017/09/22
プログラミングを学び始めの1月。
インターンをしないと誘われ、WEBデザイン業務中心のインターンを始めた。
サイトに掲載するバナーの制作がメイン。
時に、特集ページ、LPの制作。
講座のアテンド業務もたまにある。
メインのバナー制作の中で、
デザインの知識まったくの０から、自分の中で、整理してきたことを改めて、まとめてみようと思う。
-
レイアウト
-
配色
-
フォント
-
文言
１、レイアウト
WEBページを見る際、人の視線は、左上に集まる。
そこから、よく言われる「Z字」「F字」に視線が動くことを認識し、
伝える情報の中での、優先順位を明確にしたものを、ジャンプ率（文字の大きさの差）も利用し、配置を考える。
このあたりは、ラフ案を作成する段階で、明確にしておきたい部分である。
また配置する上で、基本になるのが
・近接
・整列
・反復
・コントラスト（≒ジャンプ率）
先輩にも紹介してもらったが、この４つについては
ノンデザイナーズ・デザインブック Second Edition
２、配色
日頃、生活していると、なんとなく色を感じているが、デザイン物の配色には、すべて意味が込められている。
マックの店内の赤と黄色も。
コーポレートカラーも。
色には、それぞれ、心理的に与える印象がある。（参照）
| 黒 |  |
豪華、重厚、カリスマ、悪、絶望、罪悪、恐怖、不安 |
|---|---|---|
| 白 |  |
清潔、明るい、純白、純粋、素直、真実、真理、無垢 |
| 赤 |  |
情熱、興奮、派手、怒り、危険、激しい、愛、禁止 |
| オレンジ |  |
明るい、活発、元気、親近感、元気、明朗、ほのぼの |
| 黄色 |  |
快活、幸福、光明、華やか、希望、注意、緊張 |
| 緑 |  |
平和、安全、永久、自然、若い、爽やか、健康、癒し |
| 青 |  |
信頼、忠実、冷静、冷たい、インテリ、憂鬱、静寂 |
| 紫 |  |
高級、神聖、神秘、高貴、豪華、優雅、エキゾチック |
１、レイアウトでも取り上げたが、「このデザイン物で伝えたいことを最大化するために」
必要な色を選択する。
配色には、色の組み合わせもある。
その際に、以下の３つも押さえておく。
WEB上の色には、色相、彩度、明度がある。
この３つでも情報に強弱をつけることは可能で、コントラストを付けるための要素として、認識しておく。
色相とは、赤、黄色といった色味のこと。
自分もそうだったが、色とは、この色相のことを認識している。
彩度とは、色の鮮やかさ。
彩度を上げると、色がビビットカラーになります。
逆に下げる、白黒に近づいていく。
明度は、文字通り、色の明るさのこと。
視覚的な影響として、明るいと近く感じ、暗いと遠く感じる。（メイクのアイシャドー）
文字を読みやすくするためには、この明度で差を生むといい。
３、フォント
日本語で、多く使うのが、明朝体とゴシック体。
明朝体の方が、落ち着いた。イメージ。
ゴシック体の方が、親しみやすい。イメージ。
太さを変えることでも、多少の印象は変わってくる。
バナーを作る際は、短文のことが多いが
LP作成時には、長文であることもあるので、その時には、
可読性、視認性、判読性も意識して、フォント選びをする必要がある。
補足として
カーニング（文字の間隔の調整）をすることで、素人レベルを少し抜け出す。
特に、カタカナ、ひらがなの際は、このカーニングはほぼ必須の作業になる。
４、文言
文言は、デザインの範囲ではないが、
デザインをする前の段階。
情報整理の段階で、ユーザーに響く言葉を選ぶことが大切。
多くの場合は、依頼者（＝企画者）がいるかと思うので、
コンセプト共有の際に、確認しておくとその後の工程でスムーズに進むと思う。
デザイン後に、文言を変えてと言われ、全体のバランスをもう一度練るという、
イライライベントを起こさないためにも、
文言だけに限らず、コンセプト共有で話しておきたい。
【参考にしたサイト】
「配色」
・バズ部
「フォント」
・Arch
