Web制作に興味を持って、プログラミングの勉強を
始めたけどデザインのスキルが無いと案件は取れない？
デザインの勉強をしなくても案件は取れます。ただ、
知識が少しあるだけでより幅が広がりますよ。
Twitterでは毎日の学習過程を記録・発信しているのでよかったらチェックしてみてください！
また、僕が初案件を獲得するまでの過程をまとめたのでこちらもよかったらどうぞ
デザインのスキルが無くても案件は取れましたが、ある程度知識があった方が
対応できる幅が広がると思いました。
なので、デザインの勉強をして知っておけばコーディングの効率もあがるポイントを4つ紹介します。
基本なので、もう知っている方や無意識に出来ている方もいるかもしれませんが、しっかり理論を理解することで基盤になり応用できるようになるので、ぜひ読んでみてください。
今回は『なるほどデザイン』を中心に勉強したので、そちらの考え方の影響を受けております。
また、他の教材でも勉強したので学んだ全てから大事だなと思った基本のポイントを紹介していきます。
ラフ案（デザイン構成）
まず一つ目のポイントはデザインを構成する順番です。
一番最初にラフ案を考える
結論を先に言いましたが、当たり前の様で出来ていない人は僕を含め多いはずです。
デザインの勉強をする前は色や書体、具体的な配置はなどデザインの構造ではなく細かい部分から決めて全体の構成を見ていました。
これがなんかこれ違うなというサイト・デザインになる原因でした
そこで、そうならない様にするために一番最初に大まかな案（ラフ案）で紙に書く事が大事です。
（ソフトに慣れていれば最初からPCでラフ案を書いてもいいと思います）
汚くて恥ずかしいですが、これは実際に案件で使ったラフ案です。
紙に大まかに自分でわかればいいので、構造を書きます。
そしたらそれをXDなどでパソコンで形にして、クライアントの方にラフ案を提出するという感じです。
紙に書くだけでもデザインのまとまりは変わってくるので意識してみてください。
余白・マージンの取り方
見出しにしましたが2つ目のポイントは
余白の役割を理解するです。
余白によって利用するユーザーに見えない線を見えさせる事で、
視覚を操作するというデザインスキルです。
これは無意識に出来ている人もいるかもしれませんが、例を上げてみていきます。
まず左からですが、これが縦横に並んでいた時に均一に並んでいると情報量が多いと
捉え人間の脳はストレスを感じます。
大して右は写真と写真タイトルの余白が無いため情報量が少ないと感じ、
ストレスが少ないとされています。
このテクニックは無意識に出来ているかもしれませんが改めて理解しておきましょう。
足し算と引き算
3つ目のポイントは、
デザインの足し算と引き算です。
これも例をみた方がわかりやすいので例をみていきます。
お店の営業時間はよく例に使われるので今回も使っていきます。
これをデザイン初心者がデザインしようとすると、フォントの色や太さをいじりがちです。
この足し算をしてしまうと余計ごちゃごちゃとしてしまっていて、情報量が多くなってしまいストレスになります。
なので、こうゆう文字で伝えたい時はまずは引き算をして無駄を落としていきます。
曜日は無くても伝わるので無くして、『から』→『〜』とする事で文字数を減らせます。
これだけでもスッキリしてみやすいですが、ここで少しの足し算です。
この様にする事で、タイトルのグループとコンテンツのグループに分けて理解しやすくなります。
これが足し算と引き算の考え方です。
スポットライト
最後のポイントはスポットライトです。
こちらは今回の記事でも使ってきましたが。
この記事の文字配列の様な白い背景に黒の文字に対して、
色や文字の太さなどで伝えたいところに変化をつけると、自然とそこに目がいき
理解しようとします。
これがスポットライトの考え方です。
特に伝えたい事の背景だけ、色を付けて他は落ち着いた色にするとその背景に何か意味があるのかと考えますよね。
これはイメージがしやすいですね。
まとめ
今回はデザインの基本スキルとして知っておけば普段コーディングしかやらない人でも
Web制作の幅が広がると思った4つの基本ポイントを紹介してみました。
デザインはまだまだ奥が深いので興味を持った方はぜひ学んでみてください。
今回は、『なるほどデザイン』という本をおすすめしてデザインの解説をしていきました。
こちらはWeb制作する人が皆こぞっておすすめする本の一つなのでチェックしておきましょう！
Twitterでは毎日の学習過程を記録・発信しているのでよかったらフォローすると喜びます
たつき（@tatsuuu_227）