今回は、Webデザインについて解説します。
デザインの理論について学んだからと言って、急激にデザイン力が上がるわけではありません。
しかし、デザインの理論を勉強することによって「このデザインはいい」「このデザインはちょっと違う」といった感覚的なものが、論理的に理解するようになります。Web制作と同じで実績、経験によって磨かれていくものなのでじっくり身につけていきましょう。
スポンサードリンク目次
レイアウト編
レイアウト
版面率
版面率とは全体のスペースに対しての情報掲載面の割合です。
率が高い場合 情報量が多くなり、全体的に充実しているように見える。
率が低い場合 情報量が少なくなり、落ち着いた大人っぽい感じを出すことが出来る。
要素の遠近
同じ要素は近くに集めることで意味が伝わり易くする。（ゲシュタルトの法則）
その際は要素毎のその他要素も合わせることでより統一感が出る。（空白、書体など）
形の異なる場合は重心を揃え、バランスを保つ。
コントラスト
文字、画像、配色、空白を揃えることでより対比（コントラスト）させることが出来る。
伝えたい情報はサイズを大きく（＝ジャンプ率）、その他と対比させる。
また、サイズを小さくすることで「高級感」「上品さ」「賢さ」を表現することが出来る。
スペース（余白）
余白を使用せずに目いっぱい画像を大きくすることで空間の広がりを表現することが出来る。
余白が大きいほど「ゆったり」「落ち着き」を表すことが出来る。
対称性（シンメトリー）
左右対称（シンメトリー）は人に美しさ、統一性を伝えることが出来る。
密度
集中している部分（情報の重心）が上部にある場合は不安定さ、
下部にある際は安定さを伝えることが出来る。
比率
代表的な比率は黄金比（５：８）、白銀比（１：√２）である。
上下左右
人の目線は上から下に流れることを意識してレイアウトを考えることが重要です。
縦書き、横書きにすることで目線の流れをコントロールすることが出来ます。
画像編
画像
連続性
写真は認識されやすい効果（画像優位性効果）がある為、複数の画像を使用することで連続性を持たせることが出来る。（モンタージュ理論）
人物の目線
人物の画像の場合は目線に注意をする。
目線の前方は「将来」「未来」を表し、後方は「過去」を表す。
体と顔のバランス
顔の占める割合も重要で、顔の割合が多いほど「内面」「知性」、
少ないほど「外見」「運動」が表現される。
重心
重心をずらすことで不安定感が表現され、緊張感が生まれる。
配色編
配色
三原色、三属性
光の三原色（RGB：Reb、Green、Blue）はＰＣディスプレイ上で使用される色形式です。
色の三属性とは色相（H）、彩度（S）、明度（B）を示す。
色調（トーン）
色に統一感を出す場合は同じ色調（トーン）で統一すると表現することが出来ます。
濃い色ほど重さ、薄い色ほど軽さが表現される。
色と意味
色には代表的な意味があり、利用すると効果的です。
| 赤 | 生命力、エネルギー、情熱、怒り |
| 黄 | 明朗、知識、注意、警告 |
| 緑 | 自然、新鮮、安らぎ、平和、豊かさ |
| 青 | 水、静寂、信頼、保守的、真面目 |
| 紫 | 上品、神秘的、想像力、不安 |
| 黒 | 死、マイナス、恐怖 |
| 白 | 清潔、善良、真実 |
| グレー | 迷い、無気力、不安 |
メインカラーの補完色を選んでくれるサイト
http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
文字
文字
日本語と欧文
日本語にはゴシック、明朝体、外国語にはサンセリフ、セリフ体を使うとより自然になる。
書体の印象
明朝体は、まじめ、高級感（長時間見ても疲れにくい）、
ゴシック体は、親しみやすさ、先進的（欧文のサンセリフ）を表現します。
特にゴシック体は標準的なイメージでプレゼン資料、明朝体は固い印象で新聞などで使用されます。
同じ書体を使用することでデザインに統一感が出ることにも注意しましょう。
