企業のwebサイトのwebデザインは、会社の顔となることから、できるだけクオリティが高く、デザインセンスがあり、見やすさなどのユーザビリティも兼ね備えたものが理想です。そうしたクオリティの高いwebデザインを制作するためには、どうすれば良いのでしょうか。今回はそのノウハウのうち、基本的なことをご紹介します。
クオリティの高いwebデザイン制作の大前提
webデザインを始めるとき、まずwebサイト全体の枠組み、レイアウトを決めることになります。しかし、そのレイアウトを決めるときには、デザインセンスや最先端のレイアウトを組むといったことの前に、行っておかなければならないことがあります。
それは、そのwebサイトがどのような目的であるのか、つまり「誰が、何のために、どうするのがゴールのサイトなのか」を明確化することです。
webデザインはここから始まります。逆を言えば、この目的が決まっていなければ、最適なwebデザインができず、いくら美しく見栄えのよいwebサイトができたとしても、成果の出ないwebサイトになってしまいます。
そこで、まずは最終的なゴールを見据えたコンテンツ設計を行い、その上でターゲットに応じたレイアウト、フォントやフォントサイズ、画像、デザインテイスト、ゴールへの導線を決めていきます。
webデザインは、こうしたwebサイトの目的に応じたレイアウト設計図をしっかりと描いてから取り掛かっていくことが重要です。
クオリティの高いwebデザイン制作のノウハウ
webデザイン設計を行ったら、次はいよいよデザインを、その設計図をもとに構築し、作り込んでいくフェーズに入ります。
ここでは、クオリティの高いwebデザイン制作のノウハウをご紹介します。
●「シンプル」を心がける
クオリティを上げようとすると、人はなぜかあれこれと要素を盛り込もうとします。しかし、クオリティの高いwebデザインは、共通してシンプルです。なぜなら、シンプルが一番美しく、見やすいからです。構築していくうちに雑多な印象になってきたら、基本に立ち戻り、シンプルさを保ちましょう。
●文字・画像・装飾の比重を考えてレイアウトする
全体を見渡して、文字だけが異常に多かったり、画像が多すぎたり、装飾が目立ちすぎていたりするアンバランスなレイアウトは、ユーザビリティに劣ります。文字・画像・装飾の比重を考えてレイアウトすることが大切です。
●余白をうまく使う
レベルの低いデザインは、なぜか余白が少なく、全体的に詰まった印象があることが多いです。また余白はあっても不均等であれば、クオリティが落ちます。クオリティの高いデザインは余白もデザインの一部ととらえ、大胆かつバランスよく利用しています。
●配色・色の組み合わせを考慮する
色使いもwebデザインのクオリティを左右します。基本的に使用する色は1サイトにつき3～4種類が良いといわれており、その色の組み合わせも重要になります。配色は見本帳などを参考に、ユーザーが見やすく、快適に感じるものを選ぶことがポイントです。
●読みやすくデザインに適したフォントを使用する
フォントはwebサイトの印象を大きく左右する要素です。まずwebサイトに使用する基本フォントは、明朝系かゴシック系かに分かれますが、これもターゲットユーザーが見やすく、デザインや雰囲気、コンセプトに合ったものを選ぶ必要があります。その上で、洗練されたフォントを選ぶことで、webサイトのクオリティを高めます。
●目線の動き「左→右」「上→下」に合わせてコンテンツを配置する
コンテンツのレイアウトを行う際には、人の目線の動き「左→右」「上→下」に合わせて配置することが重要です。流れるように閲覧できることで、快適にwebサイトを利用してもらえます。
●メリハリ・コントラストをつける
クオリティの高いwebデザインは、文字や画像、配色にメリハリがあります。目立たせたいパーツを中心に、コントラストをつけることで、メリハリを出すことができます。プロは特に大胆にコントラストをつけるため、一目見ただけで「ここを強調したいんだな」と誰もが感覚でわかり、効果が出ます。コントラストをつける手法として、文字の大きさや太さ、フォント、色、濃淡、立体的にする、ラインなどの装飾をつけるといった手法があります。
●クリックできるボタンデザインを統一する
クオリティの低いwebサイトでよく見かけるのが、クリックできるボタンなのにボタンに見えなかったり、ボタンではないのにボタンに見えたりするケースです。これはページ内回遊やコンバージョンに関わることなので、深刻にとらえなければなりません。誤解を防止するためには、クリックできるボタンのデザインをwebサイト全体で統一することです。
まとめ
◆クオリティの高いwebデザイン制作の大前提として目的を明確にすることが何より重要。
◆目的に応じて設計図を作る。ここで初めてクオリティの高いwebデザインのノウハウを盛り込んでいくフェーズに入ることができる。
◆「シンプル」を心がける、文字・画像・装飾の比重を考えてレイアウトする、余白をうまく使う、配色・色の組み合わせを考慮する、読みやすくデザインに適したフォントを使用する、目線の動き「左→右」「上→下」に合わせてコンテンツを配置する、メリハリ・コントラストをつける、クリックできるボタンデザインを統一するといったノウハウがある。
