このレッスンでは、ウェブカツ!!でエンジニアスキルを身につけていっている人を対象として、WEBデザインを教えていきます。
ここで教えるWEBデザインは、現場でWEBデザイナーとしてバリバリ働くものではなく、受託案件で多い「デザインからWordPressでHPを作って欲しい」といった案件獲得の際や自分でWEBサービスや現場常駐案件獲得時にお客さんへ見せるポートフォリを「見栄え良く魅せる」ためのデザインスキルを教えるものです。
そのため、ゴリゴリWEBデザインが出来る事を目指すのではなく、デザイン素人でも客に出せるレベル・個人受注出来るレベルの見栄えのいいデザインを目指していきます。
（とは言っても、私自身が実際にWEBデザイナーとして現場で働いてもいたので、現場でもある程度通用するスキルを一部入れています）
WEBデザインで大切な４つのこと
WEBデザインで大切なのは
- レイアウト（配置）
- 配色
- 余白
- フォント
この４つです。
ここさえきちんと抑えておけば、専業のWEBデザイナーでない限り、普通の人から見たら魅力的なサイトに出来上がります。
ちまたには「マテリアルデザイン」だの「フラットデザイン」だの多くのデザインルールがありますが、どれも共通した事は基本はこの４つです。
何度も言いますが、デザインを学ぶのに「金を払って学ぶ必要など全くありません」
余白とは？
余白は隣り合うコンテンツ同士の間であったり、コンテンツの中のコンテンツとの間であったり、文字と文字の間（カーニング）や行間など「何もない空間」のことです。
余白を持たせることで、脳を休めることができるので「読みやすさ」が向上し、読みやすさが向上すれば自然にそのページに滞在してくれてアクセスUPにもなり、きちんとした情報を最後まで伝えることができます。
CV（コンバージョン）のポイントでも、あえて余白をもたせて余計な情報を相手に与えないことで前へ進ませる（CVさせる）ことは日常的に使われています。
人間でもそうですよね？
せかせかしてて早口でマシンガントークで迫ってくる人より、余裕があって遊びのある人の方が好かれます。
余計な情報を与えないことの大切さ
実際の営業の現場でも、客との契約を決める「クロージング」という段階では迷わせるような余計な情報は与えませんし、相手が話に集中しやすいようにカフェなどの席でも他の客が通らない「一番奥の席」にしますし、その中でも「奥側のソファー」ではなく「通路側の手前のイス」に座ってもらいます。
奥側だと他の客の顔が見えてしまって話に集中しなくなるからです。
そんなことで？と思うかもしれませんが、実際にはこの差だけでもかなり成約率が違ってくるんです。
さらには、商品説明の時のパンフレットには全部の情報を１毎で見せずにストーリー立てて１毎１毎を見せていきます。
全部の情報を一気に見せてしまうと営業マンが説明している時に「はい。はい。」と頷いてはいながらも、別の場所の情報を見てしまい営業マンの大切な話が頭に入っていかないからです。
余白の知識
下記のように「WEBデザイン 余白」でググれば色々出てきます。
なぜWebデザインに余白は重要なのか？ 参考にすべき9つの事例
デザインの基礎力をアップする「雑に見えない余白のルール」５つのポイント
[CSS]WEBデザインの基本「margin」「padding」で余白を操ろう!
ここらへんさえ押さえておけば大丈夫です。
初心者でやりがちなのは
空いているスペース（余白）があるととりあえず埋めたくなる
という衝動に駆られることです。
情報が多ければ多いほど見る人は見にくくなります。
行間であれば、
line-height: 1.5;（もしくは、1.6）
くらいがちょうど見やすくなり、
各pタグの下マージンは
margin-bottom: 20px;
くらいが見やすいです。
ボタン内部の余白やボーダー、パネル内部の余白など囲まれた内部の余白なら
上下の余白と同じもしくは、それ以上（１：１や１：２など）
が鉄則です。
「上下の余白が10pxに対して、左右の余白は13px」
というような数値にした時に中途半端なものにはならないよう注意しましょう。
見やすいサイトをGoogleの開発ツールで要素と要素の余白や内部の余白をみてみると
だいたい「15pxか20pxくらい」取っているところが多いでしょう。
ニュースや論文でもない限り、ぎちぎちに情報を詰めることは決してやってはいけません。
ウェブカツのトップページのように大きなセクションごとのコンテンツの上下余白は
100px
とっています。
余白を取るほど「高級感」が出てきます（ウェブカツ の場合は文字文字しすぎてて、胡散臭さの方がデカイですが）
インテリアにしても「無駄にトイレが広い」とか、ここ何のためなんだ？といった「訳のわからないスペース」がありますね。
でも、それが全体的なバランスを取って「高級感」が出ている訳です。
結婚指輪を恋人と見ていて、ガラスケースの中に高級そうな指輪が入っていて、値札を見たら下の画像のような値札だったらどうです？
一気に買う気が失せますね
ただ何も語らず、何も主張せず、そっと
こういう値札が置いてあるから「高級」に感じる訳です。
何も言わなくても「わかりますよね？」「あなたは説明せずとも価値のわかる人ですよね？」ということです。
デザインは引き算
高級感ではなくとも、余白はとても大事なものです。
デザインは「引き算」です。
「何を削るか」
を常に考え、出来るだけ
「最小限」
で相手に情報を伝える必要があります。
