デザインカンプがない新規セクションを実装する時に、既存セクションに合わせてコーディングするのに非常に苦労しました（余白やコンテンツの大きさなどは特に）。ビッグサイトなどで行われる企業展示をデザインしている父親の息子とは思えないほどデザインセンスがありませんでした。
そこで、デザインの基本から勉強し、ここに備忘録として残すことにしました。
この記事は自己学習の備忘録です。
デザインの重要性
デザインの重要性は大きく分けて３つあります
- 伝えたいことが伝わりやすくなる
- 言葉で伝えられない情報を伝えられる
- ブランディングにつながる
取引先のブランディングを考慮し、取引先のためになるデザインが重要であるということを学びました。
Webサイトのデザインの特徴とデザインの流れ
特徴
Webサイトでは、CSSやJavascriptで自由で汎用性の高いデザインを実装することができます。
しかし、表示端末のスペックは多岐に渡るので、見る人によっては「重い」「色が見にくい」などといったケースがあるので、どんなユーザーにも見やすいデザインに留意する必要があります。
流れ
| 1 | 整理 | 何のために作るのか整理 |
| 2 | アイディエイト | 作るもののアイディアを出す |
| 3 | プロトタイプ | 実際に作成する |
| 4 | テスト | 目的を果たしているかどうかを確かめる 場合によっては1〜3に戻る |
| 5 | リリース | 完成 |
私の場合は1の考えが足りず、2でアイディアが浮かばず苦戦していたと思います。今後注意していきたいです
デザインの４つの基本原則
伝えたい情報をわかりやすく伝えるためにはデザインの４つの基本原則を意識することが必要です。
| 1 | コントラスト | 要素に区別を付ける。 強調すべきところ・そうでないところを明確に分けることで、 ページにアクセントをつけたり、ページが読みやすくなる。 |
| 2 | 近接 | 関連する項目をグループ化して近づける。 グループ内の要素間の余白を狭くして、グループ間の余白は大きめにとる。 それに伴い要素の大きさも整える。 |
| 3 | 反復 | フォント、色、配置、大きさなどの特徴を、作品全体で繰り返し使う。 フォントや余白では8の倍数を意識すると見た目が綺麗に揃う。 |
| 4 | 整列 | ページ上のすべての要素を意識的に整えて配列する。 「見えない線」の意識を常に持ち、要素の端を「見えない線」で揃える。 |
配色のルール
色を選ぶ時は、カラーホイール（色相環）を使って色の組み合わせを考えると効果的な配色にすることができます。
例えば、赤・橙などの類似色の組み合わせはまとまりのある印象をコンテンツに与え、赤・緑などの補色の組み合わせは、お互いの色を際立たせます。
色数が増えるほどバランスを取るのが難しくなるので、色数は3色程度に制限し、ベースカラー・メインカラー・アクセントカラーを使い分けると、バランスの取れた美しい配色になるとされています。
| カラー | 説明 | 比率 |
|---|---|---|
| ベースカラー | 背景や余白に用いることが多く、メインカラーやアクセントカラーを邪魔しないような色。 無彩色や、メインカラーやアクセントカラーの明度をあげた色。 | 70％ |
| メインカラー | イメージカラーなどデザインの中心になる色。 明度の低い色が扱いやすい。 | 25％ |
| アクセントカラー | タイトルやボタンなど、注目させたいコンテンツに使用する色。ベースカラーやメインカラーに比べて色合いの強い色。 | 5％ |
タイポグラフィー
タイポグラフィーとは、古くは文字の体裁（文字の書体、大きさ、行間、配列など）を整える活版印刷術のことでしたが、現在は、文字そのものをデザイン要素として捉え、文字が主体のアーティスティックな表現（イラストのような見え方）のことも含まれるようになりました。
WEB制作初心者としては、まずはline-heightやletter-spacingで行の間隔や文字と文字の間隔を見やすく整え、text-align（Webデザインなどでは行頭を一致させるleftが最も一般的）を効果的に活用できるよう励みます
フォントの選び方
文字や文章の読みやすさは、
- 視認性：パッと見た時に文字として認識しやすいかどうか
- 可読性：文章の読みやすさ（長い文章でもスラスラ読めるかどうか）
- 判読性：似た文字の区別のしやすさ（誤読が少ないかどうか）
この３つの要素が関係しています。
長い文章（読む文章）での可読性をあげたいなら細い文字（明朝体やセリフ体）、タイトルなどで視認性をあげたいなら太い文字（ゴシック体やサンセリフ体）を使うと良いとされています。
また、UDフォントというものを使えば、「O（英語のオー）と0（数字のゼロ）」「I（英語の大文字アイ）とl（英語の小文字エル）」「゛（濁点）と゜（半濁点）」の区別がしやすくなるそうです。
フォントがもつイメージによって使い分けることもできます。
| フォント | イメージ |
|---|---|
| 明朝体 | 高級感・和 |
| ゴシック体 | モダン・力強さ |
| セリフ体 | クラシカル |
| サンセリフ体 | 新しさ・幾何学的 |
まとめ
今回は、WEB制作においてすぐに取り入れられるものを勉強しました。この記事を見返してデザインセンスを高めていきます！
学習に使用したサイト