Webデザインは複雑な世界です。サイトの目的を達成する優れたWebページを作成するには、たくさんの規則や業界用語、技術が必要になります。しかし、Webデザインは適切に訓練していないと技術の習得が難しいものです。その一方で、デジタル化が進んだ現代では、Webデザインの価値が上昇し続けています。Webデザインの基礎を学ぶことで、企業のブランドを確立し洗練することができるでしょう。
私たちSPINX Digitalは、もっとも優れたオンラインプレゼンスを実現するWebデザインサービスをクライアントに提供しています。私たちのこれまでの経験をもとに、必ず順守すべきWebデザインのルールをご紹介します。
１. 読みやすさを重視する
ユーザーがWebサイトのテキストを適切に読むことができないと、メッセージはユーザーに届きません。読みやすいテキストを提示することは決定的に重要です。しかし、初心者のデザイナーは読みにくいテキストをデザインする間違いをよく犯してしまいます。
テキストの色の選択を間違えると逆効果になることがあります。たとえば、淡い色の背景に白色のテキストを配置したり、濃い色の背景に暗い色のテキストを配置したりするととても読みづらくなります。画像（バナーなど）の上にテキストを配置するときも、認識しにくくなるかもしれません。
これらを避けるために、適切な色のコントラストを選んでください。白い背景の上には濃い色のテキストを、濃い色の背景の上には淡い色のテキストを使いましょう。どちらも優れた選択ですが、前者のほうがコントラストが強くなります。ただ、長時間読み続けると目に負担がかかりやすいです。画像の上にテキストを置く場合、テキストと画像のコントラストを強めるために、オーバーレイを採用しましょう。暗い色のオーバーレイは明るい色のテキストを引き立たせ、明るい色のオーバーレイは暗い色のテキストを引き立たせます。
さらに、読みやすいフォントとサイズを選ぶことも大事です。筆記体やセリフ体などの複雑なフォントは、とくに高齢の方にはとても読みづらいものです。また、テキストが小さすぎても同様の問題が起こるでしょう。はっきりとした、サンセリフ体フォントを使用し、サイズを大きくすることで、読みやすいサイトを作成しましょう。
２. ビジュアルヒエラルキーを取り入れる
「ビジュアルヒエラルキー」はWebデザインのもう１つの基礎的なコンセプトです。ビジュアルヒエラルキーは、Webページでユーザーが情報を取得する順番を意味します。
異なるフォントサイズや色を使うなど、ユーザーが理解しやすいコンテンツの階層を作る技術はたくさんあります。たとえば、この記事のタイトルは見出しよりも非常に大きく、見出しはテキストのフォントよりも大きく表示されています。この理由は、ユーザーにまずタイトルを読んでから記事に進んでもらいたいからです。タイトルや見出し、テキストのサイズをそれぞれ変えることで、ユーザーを誘導し、コンテンツに夢中にさせることができるでしょう。
色調もビジュアルヒエラルキーを作る上で効果的です。ホームページ上にある「サインアップ」や「今すぐ購入」といったボタンは、ほかよりも明るい色が使われており、リンクは通常のテキストの色とは異なることが多いでしょう。
Webサイトの最終的な目的は何なのか考えてください。商品を購入してもらうことでしょうか？ メールマガジンを購読してもらうことでしょうか？ 無料相談の予約をしてもらうことでしょうか？ どのような目的を持っているにしろ、ビジュアルヒエラルキーはユーザーをWebサイトのセールスポイントに誘導することができます。
３. フォントにこだわりすぎない
フォントを考える一般的なルールとして覚えておくべきなのは、使用フォントを３種類以下にすることです。ほとんどの場合、１種類のフォントがあれば十分デザインできます。使用するフォントが多すぎると、どうしても構造性のない印象や素人仕事のような印象を受けてしまいます。
また、フォントの選択は一貫するべきです。加えて、伝えたいメッセージや業界のイメージに相応しいフォントを選んでください。サンセリフ体のフォントは現代的なイメージを与えるのに効果的なので、Webサイトなどのデジタルプロダクトにも理想的です。デザインが凝りすぎていたり、幼稚な印象を受けるようなフォントを選ぶのは絶対にやめましょう。
４. 目立つCTAを設置する
ユーザーがWebサイトを訪れて最初に目を向けるコンテンツの１つは、わかりやすいコールトゥアクション（CTA）です。基本的にCTAとは、Webサイトのトップページにある「今すぐ購入」や「詳細はこちら」、「無料相談の予約」といったメッセージを伝えるボタンを指します。CTAはセールスポイントとして機能し、訪れた顧客の興味を引きます。
しかし、CTAがページの下部分に埋もれていたり、CTAを配置していないサイトもいくつか存在します。CTAは顧客にしてもらいたい反応を喚起するため、訪問者が最初に目にする場所に配置しましょう。
５. 問い合わせ先を表示する
当たり前だと思うかもしれませんが、意外にも多くの企業がホームページに問い合わせ先を載せていません。訪問者が企業サイトを訪れる主な目的の１つは、その企業に連絡したいからです。ページを訪れてから数秒の間に欲しい情報が見つからないと、訪問者は離脱してしまいます。
離脱を防ぐために、Webサイトの目立つ位置にはっきりと問い合わせ先を掲載してください。問い合わせ先には以下の情報を載せましょう。
- 電話番号
- 会社の所在地
- 郵送先住所（所在地と異なる場合）
- 担当者のメールアドレス（少なくとも代表のメールアドレス）
ユーザーがクエリを記入する「コンタクトフォーム」の設置も有効的です。ただし、その場合も電話番号や住所といった問い合わせ先の情報は必ず明記しましょう。電話や訪問による問い合わせを好むユーザーがいることを忘れないでください。「従来」の問い合わせ方法を好むユーザーの割合はターゲット層によって異なります。ユーザーが問い合わせしやすい環境をつくるほど、サイトの効率性は向上するでしょう。
６. 迷惑な自動再生機能を設定しない
動画や音声などといったデジタルメディアを配置することでWebページに動きやエンゲージメントを加えることができますが、自動再生機能は設定してはいけません。自動再生される動画や音声によって、ユーザーがサイトを操作しにくくなります。また、これらの機能はCTAを目立たなくしてしまいます。
それだけでなく、音声や動画が自動再生されると、訪問者を不快にさせるでしょう。スマートフォンからWebサイトのリンクにアクセスしたら、突然埋め込まれた動画から大音量の音声が流れてきたことはありませんか？ このようなサイトは耳障りなだけでなく、公共の場にいたらユーザーが気まずくて恥ずかしくなるでしょう。
唯一の明快な解決策は、自動再生機能は設定せず、単にユーザーが自由に再生ボタンをクリックできるよう設定することです。
７. 何度も校正を繰り返す
企業のサイトを閲覧しているときに、明白な誤字に気づいたことはありませんか？ 誤字のせいで、Webサイトのコンテンツよりも、企業が見落としたミスばかりに注意が向いてしまうでしょう。サイトのビジュアルがデザイン全体にとって決定的な要素であるように、テキストも同等に重要です。
句読点や文法の誤り、誤字といった間違いはどれも企業の信用を損ないます。たまに誤字があるだけなら必ずしも大問題になりませんが、間違いが幾度となく続くと、築き上げてきたブランドイメージを傷つける恐れがあります。
Webサイトの完成版をデザインする段階で、時間をかけてすべての項目を推敲してください。同僚の１人か２人に見落としがないか見直してもらいましょう。ミスを見つけたらすぐに修正してください。ミスのない美しいWebサイトを維持し、ユーザーには魅力的なデザインやコンテンツに集中してもらいましょう。
最後に
Webデザインは習得するのが複雑なスキルであり、専門家に一任するべきだとも言われています。しかし、もし自分でデザインしているのなら、これらのルールを把握することで、サイトの品質や有効性を判断する際に、機能するものと機能しないものとを見分けられるようになるでしょう。
