デザイン(印象面)をみる４つのポイント
さて、今月はPhotoshop!!!
画像を合成したり、効果をかけてフォントをリッチにしたりと、
グラフィカルなデザインをずっと勉強していました。
Webデザインっていうと、UIの機能面ができれば良いっでしょって
まさしく機能面（わかりやすい情報の流れとかetc）はすごく大事なのですが、
今回は「可愛い」「クール」「高級感」「和風」・・・ってどう魅せるの？
色の組み合わせ、画像加工、タイポ、あしらいなど、
そういった、印象面＝「見た目」をよりリッチに魅せるために、
どういう視点が必要か、学んだことを備忘録として残します。
わたしは、美大卒でないし、制作会社にいた経験が全くないので、
今は、とにかくデザインの基本の「き」を学びながら仕事中。
（仕事場には、デザインの師匠がたくさんいて、
本当にお世話になりながら、日々楽しくデザイン勉強もできていて、
本当に感謝です・・・・）
デザイン知っている人からすれば、当たり前だろってことも、
わたしには、「さっぱり！？笑」だったので、
学んだことをしっかりここで言語化しておこうと思います。
でも、印象面って言語化するの、まじでむつかしい・・・
で、このブログに全て書くことは不可能・・・・
このブログでは、短時間でパパッと書きたい・・・
ので、要点のみまとめる備忘録となるのは、ご了承ください・・・。
（そして、このブログこそ、めちゃくちゃ読みにくい
デザインであることも、ご了承ください。
しばらく修正入れる予定はありません。笑）
今回は、別の誰かがデザインしたサイトを修正する時に、
デザインを「みるポイント」を4つにまとめました。
デザインの「印象」には必ず
トンマナ(トーン&マナー)＝一貫性を保つための“デザインルール”
があるのは当たり前の話なのですが、実際デザインすると、
トンマナの見る場所ってたくさんあって、
やっているうちに、あーどこみるのっ、むつかしいってなる。
なので、初心者のわたしなりに見る視点でまとめたのはこの4つ
1, 色彩設計 -配色のルールは？
2, レイアウト – 領域の定義、ルールは？
3, フォント設計-フォントのルールは？
4, パーツのつくりこみ -どんなあしらい(効果)をかけているか？
1, 色彩設計
・・・少なくても、3つの配色のバランス、色数を見る
１.メインカラー
２.サブカラー
３.コンバージョンカラー(LPは特に)
この3つは最低限おさえ、色を使う。
2,レイアウト
・・・サイト領域の定義を確認
・レイアウト基本4法則- 近接、整列、コントラスト、反復
・共通項 – 位置（右、中央、左、どの揃え？）、
大きさ(フォント数値、btnサイズetc )、カラー（上記3カラー）
マージンやパディング(余白の数値)
header/footer/h見出し/p段落/sidebar/nav/btn
3,フォント設計
・・・タイポグラフィのルール ←*個人的に難関
1. フォント種類- 基本的に、明朝orゴシックor丸ゴシック
この3つのどれかをみる（それ以外もあるが・・・）
2. メリハリつけたいワードは？（強調点はどこか）
→サイズ(pxかえる)カーニング(字間の調整)、文字詰め、行間の調整
※行間とマージンの空きは意識する。同じ文章に見えないように。
3.h/見出しと、p/段落の数値は絶対確認、PC、スマホの最小単位は守る。
★基本
・約物(やくもの) – 句読点、。疑問符？感嘆符！かっこ「」（）引用符””etc
これらは、カーニングで狭める、数値落とす、半角使う
・単位 -円、% などは、小さくする
★学んだこと: 「ジャンプ率」
文字サイズの「差」をつけること。
見出しの文字をデザインする時、重要度の高いワードの大きさに差をつけ、メリハリをつける、差が大きいと「ジャンプ率が高い」と言い、インパクトが強くなる。「ジャンプ率が低い」と落ち着いた印象になる。
※差がないと、バラバラに見えるので、しっかり差をつける。特に、見出し、タイトルによく使う
↓
4,パーツのつくりこみ ←*個人的に難関
– Photoshopのfx(レイヤー効果)etcのかけ方
フォント(見出し、タイトル)・画像・イラスト・btn・表・フォーム
などの「あしらい」がどうつくられているか
魅力的にみせるPhotoshopのテクニック
→シャドウ、光彩、パターン、グラデーション、カラーオーバーレイ
他にも、ぼかしとか、彩度や明度をあげるなどで調整する・・・etc…
これらの数値や角度、そういうレイヤー効果がよいかみていく・・・
↓
パーツの作り込み
1, 見出しやアイコンに画像やあしらいを加え、メリハリUP
2, リボンにパターン入れて、よりタイトルを立体的に魅せる
3, フォントに背景と同系色の光彩を入れて、文字をやや浮かべて強調
★学んだこと: 「可読性と視認性」をあげるために効果をかける
シャドウをかけたことで、背景と同化したり、馴染んでしまったら
効果をかける意味がない。
あしらいは、最終的に物足りないなと感じた時につける
★おまけ：Photoshop操作ですっかり忘れてたこと
・ビットマップデータ（ピクセルの集合体）なので、フォント、図形は必ず整数でつくる→小数点でつくると、ピクセルからでた部分が滲んでしまう、拡大縮小した時は、注意。ガイドなども整数で初期設定する。
・ラスタライズしたら、画像縮小はNG
・スマートオブジェクト→「右クリック・レイヤーに変換」で元に戻せる
デザイン上達への道は、ほんと一歩一歩で。
できるようになったか、いないのか、
カタチになる分、目に見えるような、
でも新しいデザインすると、
また悩む・・・・
楽しい〜。
けれども、毎日、歯痒いような自分のスキル不足に悔しい〜感じもする。
けれども、まだまだ修行が足りんです。
ゆるゆるやっていきます〜〜〜