みなさんは、良いWEBデザインとは一体なんだと思いますか？
何をどうすれば、クオリティが高くなるのでしょうか。
デザインとは一見、ある種のセンスが必要に見えます。
ところが実際、プロになる程度であれば、センスは必要ありません。
何度も練習をすれば、誰もがプロになれるのです。
ただ、闇雲に練習しただけでは、成長は遅くなります。
何を基準としていいか、まったく分からないからです。
例えば他のサイトを参考に、同じように作ってみたら、なぜか格好悪いものになった。
同じ方向性を目指して作ったのに、何か違うし自分のサイトはクオリティが低い。
でも、一体何が悪いのかが分からない。
デザインを始めたばかりの時、よく陥る悩みです。
一体、何に気をつけてデザインを作っていけば良いのでしょうか。
今日は、WEBデザインをする時に、気をつけるポイントをご紹介いたします。
いくつかのポイントを押さえることによって、より成長は高速化されます。
ぜひ、今日の記事のポイントを押さえて、練習してみてください。
色のパターンを決める
まず良いWEBデザインのポイントとして、配色があげられます。
良いと感じられるWEBサイトでは、大抵、最高の組み合わせで配色がパターン化されているんですね。
例えば、この役割を持つボタンは赤だとか、こういう場合の文字色は青であるとか。
色そのものに役割をもたせ、一定のパターンにあわせて配色されています。
これは自分の中でルールを決めれば誰もが可能です。
単純に目立たせたい箇所は目立つ色、重要度の低い場所は目立たない色。
それだけ決めて、色の配色ルールを決めてもよいでしょう。
ただ、難しいのが、どの色を使うかです。
色は組み合わせによって、大きく印象が異なります。
ダサい組み合わせを使えばダサくなります。
クールな組み合わせにすればクールなデザインになります。
しかし、最初からどんな組み合わせがダサくて、何がクールかなんてわかりません。
特に初心者の状態で最初から組み合わせるのは、ほとんど無理と言っても良いでしょう。
では、どのようにして配色を決めれば良いのか。
方法として実践しやすいのは、他のサイトから色のパターンを持ってくることです。
Photoshopを始めとして、デザインツールにはスポイトツールがあります。
他の箇所の色をコピーして持ってくるツールです。
スポイトツールを使って、何箇所か象徴的な場所から色をとってきます。
ボタンの色、背景の色、ヘッダーの色、フッターの色、リンクの色。
それらの色を配色ルールとしてデザインに反映させていくのです。
完成したデザインから配色をとってくれば、それがダメということはありません。
プロが作ったデザインと同じ配色ですから、あとはどこに配置するかだけです。
こうして他のサイトを参考に配色を決め、ルールを作り、反映させます。
すると、色としては問題のないサイトができあがります。
ただ、ずっと誰かのサイトを真似ているわけではありません。
真似を繰り返すうちに、自分の中に配色パターンが出来てきます。
結果的に、何も見なくても良い色合いでデザインできるようになるのです。
色を選ぶ訓練としても最適です。
余白の空け方に規則性をもたせる
余白の空け方1つでも、大きくデザインのクオリティが変わります。
余白のバランスがおかしいだけで、一気に素人っぽいデザインが出来上がるでしょう。
ダメなデザインをしたければ、適当に余白を決めることです。
他の素晴らしいと思うサイトを観察してみてください。
ほぼ必ずと言っていいほど、余白に規則性やルールがあるのに気づくでしょうか。
例えば、セクションとセクションの間にある余白。
セクションごとのタイトルにおける、上下の余白。
横並びになっているコンテンツ同士の余白。
あらゆる余白に一定のルールをもたせるのが基本です。
WEBデザインは、ある意味規則性がクオリティを引き出すのです。
ダメな例は、余白がバラバラな場合です。
最初のセクションで、タイトルの上下にある余白が20px。
でも次のセクションで、タイトルの上下は5px。
あるコンテンツの上下の余白は30pxなのに、横の余白は10px。
このように、余白の空け方がバラバラだと、素人っぽいデザインになります。
STARTOUTのトップページを観察してみてください。
余白の空け方に規則性があるはずです。
セクションにおけるタイトルの上下余白は60px。
セクション同士を隔てる余白は基本80px。
ボックスの内周における余白は上下左右、すべて統一。
背景に写真を入れたセクションは上下60pxの余白。
全体として余白は60px〜80px。
つまり、60〜80pxでほとんどの余白を統一しているのです。
こうした規則性をもたせると、デザインのクオリティが上がります。
余白の幅が場所によってバラバラにならないように注意しましょう。
フォントに規則性をもたせる
規則性をもたせるのは、余白だけではありません。
フォントのサイズもまた、一定の規則性をもたせるとキレイになります。
- 例えばセクションごとのタイトルは24pxで統一。
- 付け加えるリード文は18px。
- 読ませるテキストは16px。
- 強調して伝えたい文字列は16pxで太字。
と言った感じで、文字の役割にあわせてフォントサイズを決めていきます。
フォントサイズも規則性が崩れた場合、一気に素人っぽさが出るのです。
デザインしながらフォントサイズのルールも決めていきましょう。
なお、パソコン版の場合、大体フォントサイズの基準は下記の場合が多いです。
- セクションのタイトル – 20px〜40px前後
- 読ませるテキスト – 12px〜16px前後
- 注釈は補足 – 10px〜12px前後
上記を基準としていれば、サイズ感は大きくは崩れません。
また、フォントサイズを考える時は、ジャンプ率を考慮しましょう。
ジャンプ率とは、読ませる文字と見出しにおけるフォントサイズの差を意味します。
例えば見出しと読ませる文書が同じサイズだった場合、どうなるでしょうか。
一気にデザインのメリハリがなくなり、役割が不明確になります。
視認性もデザイン性もなくなってしまいますよね。
フォントを格好良く見せるコツは、ジャンプ率を大きめに取ることです。
見出しは「少し大きすぎるかな」というくらいが丁度よかったりします。
反対にジャンプ率が少なければ、何かメリハリのないデザインになります。
もしWEBデザインにメリハリが無いなと感じた場合。
見出しのサイズを大きくし、ジャンプ率を上げてみてください。
それだけで、だいぶデザインにメリハリがつくはずです。
また、1つのデザインの中で、色々なフォントを使いすぎないようにしてください。
多くてもフォントは3つ以内に収めて使うべきです。
複数のフォントを使いすぎると、WEBサイトのイメージが定まらなくなります。
フォントの使う場所も決めておきましょう。
例えば、見出しはヒラギノ明朝、文章はメイリオ、といった感じです。
どこにどのフォントを使うかもまた、規則性とルールをもたせてください。
それだけで、プロっぽさを出すことができます。
画面を広く使う
素人っぽく見えるデザインは、小さく中心にまとまっています。
左右に何も無い余白が多く、コンテンツが多くてもどこか寂しい印象を与えます。
また、文字や余白が小さいので、そもそも読みづらいことも多いです。
確かに昔は、ギュッと詰まったようなデザインが主流の時もありました。
しかしそれは、昔のパソコンが解像度が低く、小さくまとめるしかなかったからです。
例えば同じ10pxでも昔のパソコンは大きく表示されました。
たった10pxでも画面を大きく占領してしまうのです。
たくさん要素表示できないので、あまり大きくエリアを使えません。
しかし、今は解像度も上がり、広く画面を使えるようになりました。
わざわざ小さく収めてしまったら、ただ読みづらいだけになってしまいます。
画面を広く、ダイナミックに使いましょう。
文字を置くにしろ、デザインを入れるにしろ、大胆に使うことを意識してください。
どこか、小さくまとまってると思ったら、少し大きめに拡大しましょう。
余白を倍にする。
コンテンツの大きさを倍にする。
フォントサイズを思い切って上げる。
全体的に大きく広く画面を使っただけで、一気にイメージが変わります。
背景として対応できるところやメインビジュアルなどは、より広く使います。
横幅いっぱい、画面サイズ右から左まで、ぶち抜きで使いましょう。
思い切りが大事です。
デザインの初心者さんで良くみかけるのが、パソコン版であれば、コンテンツが横幅800px程度にすべて収まっていることが良くあります。
それでは、画面の広さを最大限活用できません。
広く、大きく画面を使うようにしてください。
最初はオリジナルで作らないこと
ここが、最も大事なことかもしれませんね。
最初から完全オリジナルで作ろうとするのは無謀です。
初心者のうちは、既存のサイトを参考にデザインするようにしましょう。
なぜなら、まだ頭の中に引き出しが無いからです。
デザインがうまい人は、頭にたくさんの引き出しをもっています。
どのケースにどういった表現をすればいいか、何を見なくても想像できるのです。
以前、プロのデザイナーがデザインする時の思考を研究しました。
わかったのはプロも「ゼロからデザインを作っているわけではない」ということです。
どこかで見たデザインや表現を組み合わせ、改良してデザインを作ります。
本当に何もないところからデザインを作る人はほとんどいません。
なので、基本的に始めたばかりの方は、下記のフローでデザインを作ってください。
- 参考デザイン集から、参考になるサイトを3サイトほど選ぶ。
- レイアウトが似た箇所のデザインセクションを探して、そのまま当てはめる。
- 当てはめたデザインを完璧に模写する意識で作っていく。
- 模写して作ったデザインを少しだけ変えてオリジナリティを出す。
参考サイトはイケサイやbookma!などWEBデザイン参考リンク集で見つけます。
上記の詳しいデザインフローは別途、記事で解説しました。
僕たちは、半模写WEBデザインと読んでいます。
あとで練習してみてください。
半模写WEBデザインに挑戦しよう
https://startout.work/single_pc_web.php?id=609&cat=design
半模写デザインを続けているうちに、デザインの引き出しが増えていきます。
結果的に、良いデザインを作れるようになっていくのです。
ただ、上記に関しては、次からの項目を一通りやった後、挑戦しましょう。
基本的なWEBデザインの概念を抑えないことには、はじまりません。
実際、プロのデザイナーも他のサイトやデザインを参考にしています。
ただし、自分の記憶にあるデザインを参考にしているのです。
デザインを作るフローそのものには、大差はありません。
記憶の中から引っ張り出すか、参考サイトから引っ張り出すかです。
今回のフローを繰り返し、慣れてみてください。
最初は何か見ないと作れなかったものが、徐々に見なくても作れるようになります。
デザインの引き出しが増え、頭の中の記憶を参考にデザインを作る時が来るでしょう。
上手く「参考にする」というフローを頭の中で習慣づけてみてください。
それこそが、デザインを上達させる秘訣です。
デザイン学習の順番としては下記です。
- まず、一通りデザインのフェーズを終わらせる。
- 完了したら半模写WEBデザインをベースにサイト制作をする
- 半模写WEBデザインをしているうちに、デザインの引き出しが増える
- 10サイト程度作ったら、オリジナルで作ってみる
この順番で進めると、デザインの上達も早くなるはずです。
上記の流れでデザインを進めるようにしてください。