このレッスンでは、ウェブカツ!!でエンジニアスキルを身につけていっている人を対象として、WEBデザインを教えていきます。
ここで教えるWEBデザインは、現場でWEBデザイナーとしてバリバリ働くものではなく、受託案件で多い「デザインからWordPressでHPを作って欲しい」といった案件獲得の際や自分でWEBサービスや現場常駐案件獲得時にお客さんへ見せるポートフォリを「見栄え良く魅せる」ためのデザインスキルを教えるものです。
そのため、ゴリゴリWEBデザインが出来る事を目指すのではなく、デザイン素人でも客に出せるレベル・個人受注出来るレベルの見栄えのいいデザインを目指していきます。
（とは言っても、私自身が実際にWEBデザイナーとして現場で働いてもいたので、現場でもある程度通用するスキルを一部入れています）
WEBデザインで大切な４つのこと
WEBデザインで大切なのは
- レイアウト（配置）
- 配色
- 余白
- フォント
この４つです。
ここさえきちんと抑えておけば、専業のWEBデザイナーでない限り、普通の人から見たら魅力的なサイトに出来上がります。
ちまたには「マテリアルデザイン」だの「フラットデザイン」だの多くのデザインルールがありますが、どれも共通した事は基本はこの４つです。
何度も言いますが、デザインを学ぶのに「金を払って学ぶ必要など全くありません」
配色って何？
配色は読んで字のごとく、色を配置するってことです。
配色があることで見る人に「イメージ」を与えることができます。
青色なら「寒そう」、オレンジなら「暖かそう」など配色にはイメージがあります。
配色を操ることでイメージを操る
それが配色の役割です。
初心者がWEBサイトのデザインをする時によくやりがちなのが、
レイアウトと一緒に配色を考えている。
ということです。
デザインを鍛えるにはバナーデザインをするのが良いとよく言われますが、バナーデザインをする際にも最初は
コンテンツの「配置」
から入ります。
新米デザイナー必見！バナーデザインを効率的に美しくする10のステップ
モノトーンでまずはコンテンツを配置し、そこから色をつけていくという作業をしていくことで配色とレイアウト（配置）との板挟みに悩むことが少なくなります。
デザイン初心者はまずここでごちゃごちゃになって変な配色になるので特に気を付けましょう。
慣れるまでは必ずまずは「コンテンツのレイアウト」からです。
配色の知識をつけるには？
配色に関しては、下記程度を読んでおけば大丈夫です。
WEBデザインで押さえるべき配色（ベース、メイン、アクセント）の基本「3つのカラー」
中でも、下記さえわかっておけばいいです。
- 色相、明度、彩度
- トーン
- 色の与えるイメージ（寒色、暖色、男性的、女性的など）
- 補色、類似色
- 配色比率（ベースカラー、メインカラー、アクセントカラーなど）
配色は覚えたから出来るわけもなく、練習あるのみだからです。
色々な配色に触れて、目を養いつつ、実際に作っていくしか上達の道はありません。
配色とテイスト
配色を上達させるには常に
「なぜ、高級感があるんだろう？」
「なぜ、男っぽいんだろう？」
「なぜ、楽しげなんだろう？」
と考えることです。
そうすると下記のようにポイントがあることに少しずつ気づいていきます。
高級感とは？高級感のある配色やWebサイトをデザインするコツ！
こういった「高級感」とか「ナチュラル感」「ポップな感じ」というのは
「テイスト（タイプとも呼んだりする）」
とも呼ばれます。各テイストのコツは
「WEBデザイン 楽しさ コツ」
「WEBデザイン 高級感 ポイント」
などで調べればわかります。
また、よく実際のお客さんは「こんなデザインで」と言ってきますが、それが
「レイアウト（３カラムがいいとかのコンテンツの配置）」のことなのか
「テイスト」のことなのか
きちんとヒアリングしておく必要があります。
