新しい仕事着を探しに、とあるお店に入店したとします。すると、床にはシミがあり、商品は乱雑に陳列され、さらには店中に異臭が漂っていました。あなたなら、そんな店で仕事着を購入したいと思いますか？
店舗のデザインは、お客さんの行動に影響を与えますが、ウェブサイトにも同じことが言えます。
Clutch社が612人を対象に行った調査によると、83%のユーザーが、ウェブサイトのデザイン性、閲覧しやすさ、更新頻度を意識すると回答しています。さらに、50％の人は、コンテンツが自分の求めているものでなかったり、無関係と感じたら、二度とそのサイトを訪れることはないと回答しています。
では、ユーザーに親しまれるサイトは、一体どのようにデザインすればいいのでしょうか。
それこそが、この記事のテーマです。優れたウェブデザインの重要性、そして質の高いサイトを構築するために欠かせないウェブデザインの15の基本をご紹介します。
ウェブデザインの15の基本について動画での解説もご用意しています。
優れたウェブデザインの重要性
ウェブデザイナーの平均年収は、5万7,000ドル（約830万円）と言われています。平均年収4万4,000ドルのジュニアウェブ開発者より約8,000ドルも多く、デザイナーがなかなかの収入を得ているのには理由があります。
ウェブサイトの印象は、ブランドと新規見込み客の今後の関係性を形成するため、非常に重要です。つまり、ユーザーがサイトを訪れた時点で、ブランドに対する第一印象が決まってしまうということです。
ウェブサイトは、ブランドのアイデンティティ、ビジョン、そして業界内での位置づけなどを伝えるプラットフォーム。同じような商品を販売する競合他社がいる場合は、優れたデザインのサイトを構築することで、ユーザーの印象に残り、他社に差をつけながら、ブランドの認知度を高めることができます。
そして、優れたウェブサイトを構築するには、検索エンジン最適化（SEO）も欠かせません。
検索エンジンでは、サイトの表示順位を決定する際、ユーザーのサイト内での行動が考慮されます。サイトのトップページだけでなく、複数のページが閲覧されれば、直帰率の高いサイトよりも上位にサイトが表示される可能性が高くなります。
また、テクニカルSEOも重要です。タイトル、ページ構造、リンクが適切に設定されたサイトは閲覧しやすく、それゆえに検索エンジンから訪問者からも好感を持たれます。次に、ウェブデザインにおける大切な基本を見ていきましょう。
優れたウェブデザインの15の基本
この記事内における「ウェブデザインの基本」とは、サイトやウェブページのテクスチャや、視覚的な要素をデザインする際の一般的なルールを指します。ベストプラクティスに基づいているものもあれば、そうでないものもあり、ブランドによってこの基本の採用方法は異なります。
それでは、優れたウェブデザインの15の基本を、いくつかサイト例を挙げながらご紹介します。
1. ページの見やすさを考慮する
Clutch社が行ったサイトのユーザー体験に関する調査によると、94%の人がサイトのナビゲーションを最も重要な機能と考えています。
例えば、ある人が検索エンジンで「モバイルデザイン」を検索してあなたのサイトに辿り着いたとします。もしそこに関連情報が見つからなければ「戻る」をクリックして他のサイトに移動するのは当然のこと。ナビゲーションの重要性は明らかです。
では、ウェブサイトのナビゲーションを改善するにはどうすればいいのでしょうか。カードゲームやポスターを販売している、The Cool Clubのウェブサイトを見てみましょう。
トップページのレイアウトは非常に明快です。左上のボタンから「card games」、「bucket list」などの主要な商品ページ、右上のボタンから「about（会社紹介）」、「contact（お問い合わせ）」などのページに移動することができます。
商品ページはとても見やすくデザインされています。The Cool Clubでは現在、おしゃれな54種類のカードを1組のトランプとして販売しています。トップページをスクロールダウンして、気になるカードがあれば、クリックするとポスターとして購入できる商品ページにアクセスすることができます。
このような効果的なサイトを作るには、ヘッダーとフッターでコンテンツを明確なカテゴリーに分類し、一目でわかる説明的なタイトルをつけましょう。そして、トピックごとにページを並べて、類似のトピック間を簡単に行き来できるようにデザインしてください。
また、ヘッダーとフッターは、ウェブサイト全体で統一しましょう。
2. 余白を活用する
余白（ネガティブスペース）とは、文字通り、画像、動画、テキスト、ボタンなど、ページの周りにできる余った領域のこと。
多くのマーケターが、訪問者に多くの情報を提供して興味を持ってもらおうと、サイト上の空きスペースを隈なく利用しようと考えがちです。しかしその結果、ページが情報で埋め尽くされ、かえって訪問者を混乱させてしまうことがあります。
そこで欠かせないのが、余白の存在です。余白を上手く活用することで、色彩がない部分から明るい部分に視線を誘導し、1番大切な情報を目立たせることができます。
もちろん、余白を活用するといっても、退屈な白を基調としたサイトを作ればいいというわけではありません。例えば、Garoaのウェブサイトのようにブランドカラーを生かした雰囲気を作り出すことも可能です。
クリーム色の余白で独自の世界観を演出しつつ、中央にある「Skincare For Autumn（秋のスキンケア）」の紹介コンテンツに自然と目がいくようにデザインされています。
このように、余白を活用して、階層構造を見せるようにサイトを設計してみてください。
3. 個性を出しながら統一感をもたせる
Hershey’sやNikeなどのブランド名を目にすると、そのロゴ、フォント、デザインスタイルがぱっと思い浮かぶ方が多いはず。これが一貫したブランディングの強みです。
サイトをデザインする際には、統一感をもたせて各ページを構成し、ブランドの明確なビジュアルアイデンティティ（VI）を確立することが重要です。具体的には、以下のような点を考慮しましょう。
- ヘッダーで同じフォント、スタイル、色を使用する
- 視覚的要素間のスペースを統一する
- 適当に好きな色を選ぶのではなく、配色パターンを使用する
- ブログなどの長文になるコンテンツにはレイアウトのガイドラインを設ける
- 全ページにサイトテンプレートを使用する
統一感を出すと言っても、個性のない画一的なデザインになってはいけません。むしろ要素を混在させて、一貫性とエンゲージメントのバランスを取りましょう。
例えば、H1、H2、H3の見出しにそれぞれ別のフォントや色を使うのも手です。あるいは、ページの種類によってレイアウトを変更して、幅を持たせるのもいいかもしれません。
4. 補色を取り入れる
補色とは、隣り合わせても違和感のない色の組み合わせです。
画面上の色の表示には、印刷に使われるCMYK（シアン、マゼンタ、イエロー、ブラック）ではなく、RGB（レッド、グリーン、ブルー）のカラーモデルが使用されています。また、画家の間でも、赤と緑、青とオレンジ、黄と紫を補色とするRYB（レッド、イエロー、ブルー）のカラーモデルが使用されることが一般的です。
どのカラーモデルであっても、補色を使うことで白と黒と同じような効果を出すことができます。補色で視覚的な強調が生まれ、ブランドの明確なビジュアルアイデンティティを確立することができます。
血液がんの慈善団体であるSwab The Worldのウェブサイトを見てみましょう。
トップページには緑とマゼンタの色合いが使われており、別のセクションに移動すると他の補色の組み合わせに変化するようになっています。ただし、彩度を統一することでブランディングの一貫性は保たれています。
補色は、デザインに採用しやすい原則です。シンプルにまとめたい場合は、2つの補色を選んで、対照的な要素（見出しと本文のテキストなど）に加えます。または、各ページにそれぞれの色と同じ色調を使用するのも手です。
5. ターゲットユーザーを意識する
ここまででご紹介した、The Cool Kids、Garoa、Swab The Worldのサイトそれぞれに、独特の雰囲気があることにお気づきでしょうか。これは、ターゲット層に合わせたデザインが意識されているためです。
サイトのパーソナライゼーションは、究極の原則です。消費者は、自分の気持ちを代弁してくれるような、共感できるブランドから製品やサービスを購入したいと思うもの。実際、72%の消費者が、自分の信念や価値観と合った企業から商品を購入することを意識している、という調査結果もあります。したがって、ターゲットとする訪問者の価値観や目標、大切にしているものをサイトに反映できれば、商品を購入してもらえる確率が上がります。
サイトのデザインを訪問者に合わせるには、以下のような点を考慮してみてください。
- ターゲット層に響くイメージとは何か
- どのようなトーンが適しているか（形式的、シンプル、明るいなど）
- ターゲット層はどのようなコンテンツを見るためにサイトを訪れるか
- ウェブデザインを通じてどのようにブランドの位置づけを発信するか
- ターゲット層が反応するCTAとは何か（クリック率/CTR最適化を考慮した配置場所）
また、サイトの自動化を利用して、ユーザーのプロフィールや過去のコミュニケーションに基づいてパーソナルな体験を提供できれば、なお良しです。
競合他社や同じターゲット層を持つ別のブランドのウェブサイトを調査して、インスピレーションを得ることもお勧めします。
6. 読みやすいフォントを使用する
サイト上で使用するフォントは、訪問者がコンテンツに目を通すかどうかを決める非常に重要な要素です。
フォント選びにおいて、まず考慮すべき点はウェブセーフあるかどうかです。ウェブセーフフォントとは、オペレーティングシステムやウェブブラウザで広くサポートされ、多くのデバイスにデフォルトでインストールされるものです。
また、アクセシビリティにも配慮しましょう。アクセシビリティに優れたフォントとは、フォントサイズにかかわらず、明瞭で読みやすいものを意味します。例えば、筆記体ベースのフォントよりも、Times New Romanの方が可読性に優れています。
他のサイトでのフォントの傾向にも注目しましょう。2021年に、データサイエンティストのMichael Li氏が1,000件以上のサイトのフォントを分析し、以下のような傾向があることを報告しています。
- 85%のフォントがサンセリフ体（新聞活字などに見られる文字の先端につく飾り/セリフがないもの）である
- 最も使用されているフォントは、Sans Serif、Arial、Helvetica、Helvetica Neue、Roboto
- H1見出しは58％の確率でサンセリフ体（段落テキストは93％）
- 段落のフォントサイズは14pxと16pxの2種類が一般的
この分析をもとに、一般的にサイトに求められているであろうフォントを選ぶのも手です。ただし、必ずしもこれに従わなければいけないというわけでもありません。
ヴァージン・アトランティック航空のウェブサイトは、別のアプローチをとっています。以下のように、少なくとも5つのフォントを使用し、ページのセクションを区切る役割を持たせることで、サイトを魅力的に見せています。
7. フィッツの法則とヒックの法則を利用する
フィッツの法則は、1954年に心理学者のPaul Fitts氏によって定義されましたが、2022年現在のウェブデザインにも大きく関係しています。フィッツの法則は、ターゲットの大きさが、そのターゲットに到達するまでの時間に影響を与えることを論じたものです。
ウェブデザインやユーザーエクスペリエンス（UX）の文脈においては、大きなボタンのクリックほど時間がかからず、小さなボタンのクリックほど時間がかかることを意味します。つまり、フィットの法則を活用するというのは、CTAボタンを大きく目立つものにし、クリックされやすくすることです。
別の重要な要素としては、クリックが簡単な操作であること。イギリスの心理学者William Edmund Hick氏とアメリカの心理学者Ray Hyman氏によるヒックの法則では、人は選択肢が多いほど、意思決定に時間がかかると言われています。
つまり、サイト訪問者は選択肢が多すぎると、疲れてサイトへの興味を失ってしまう可能性があります。
8. 大事な情報は不変性を生かして強調する
不変性とは、1つ異なる選択肢を似たような複数の選択肢の中に加えることで、それを強調するというものです。わかりやすい例としては、Boxのウェブサイトの価格ページのように、宣伝したいプランを目立つかたちで表示できます。
不変性を利用する方法はこれだけではなく、ページ上で視覚的階層を確立し重要な情報を強調して、ユーザーの目を引くことも可能です。
フランス・ハルス美術館のウェブサイトでは、不変性を生かした視覚的階層が作られています。
この階層は、「WELCOME（ようこそ）」のサイン、画像、「BUY TICKETS（チケット購入）」ボタン、「ALL EXHIBITIONS（すべての展覧会）」ボタン、そして、その他のコンテンツの順になっています。
不変性を利用して独自の階層を作るには、ページの要素を重要度の高い順に並べましょう。そして、各要素のサイズ、色、配置を調整して、訪問者の視線が各要素に向くようにデザインします。
9. CTAにはクリックしたくなる明瞭な表現を
先ほど、ボタンを大きくして、クリックしやすくすることの重要性について触れましたが、ボタンを用意する際に大切なのはサイズだけではありません。
クリックしやすいボタンは、わかりやすいのと同時に説得力のあるものです。つまり、そのボタンのリンク先に興味を持ってもらい、移動するきっかけを与えるということ。
例えば、「ブログはこちら」や「マーケティングのヒントはこちら」、「2022年のレポートはこちら」など、ボタンの文言を具体的にするのも1つの方法です。もしくは、ボタンを視覚的に面白くするのもありです。
Rainforest Protectorは、この両方を採用しています。そのサイトでは、気になる場所を訪れながら、アマゾンの熱帯雨林に親しむことができます。それぞれの場所につながるボタンには、画像と「Visit the village（村を訪ねる）」といった文言が盛り込まれています。
10. F型パターンかZ型パターンか
ニールセン・ノーマン・グループ（NNグループ）の研究者の面々が、13年以上にわたり、アイトラッキングを用いて500人以上の人々がどのようにコンテンツを閲覧しているかを調べました。この調査から、人はまず上から下に目を通し、その後左から右に視線を動かすというF型パターンが確認されています。
これを利用して、F型パターンでサイトのコンテンツを構成してもいいですし、別のパターンを採用してもいいでしょう。
Facebookは、トップページ（ログイン画面）にZ型パターンを使用していることで知られています。訪問者の視線は、Facebookのロゴ、ログインボタン、左の画像、そして最後にアカウント作成ボタンの順に動きます。
11. 優れたサイトは高速でモバイルフレンドリー
2021年第4四半期の時点で、世界のトラフィックの54.4%がモバイル端末からのものでした。したがって、今日サイトがモバイルフレンドリーでなければ、アクセス数が半減してしまう可能性があります。
また、サイトの速度は、オーガニックトラフィックに影響を与えます。Googleの調査で、サイトの読み込みに3秒以上かかると、53%の人がサイトから離れてしまうことが分かっています。
サイトをモバイルフレンドリーそして高速化する最も簡単な方法は、プロのデザイナーが作った高速なテーマを使用すること。ウェブデザインに自分で手を加え、レスポンシブサイトを自分好みに構築することも可能でしょう。
映画『1917』の公式サイトを見てみましょう。映画の中に入り込んだかのようなユーザー体験を実現しています。第一次世界大戦の塹壕の中を指で操作しながら移動できる仕組みになっており、特にモバイル端末向けに設計されています。
ちなみに、このサイトもF型パターンを採用しています。
12. テキストを程よく分割する
例えば、「心理ゲーム」と検索して、面白そうなウェブページを見つけたとします。ところがクリックしてみると、読みにくい長文テキストの塊が現れ、読む気が失せてしまうなんてことも。
たとえどんなに有用なコンテンツであっても、サイトを離れてしまうユーザーは少なくないでしょう。
ミズーリ科学技術大学のアイトラッキング調査によると、サイト訪問者がテキストを読むのに費やす時間は平均5.59秒と言われています。つまり、この時間内にサイト内の文章を読み終えることができなければ、期待するエンゲージメントを得ることはできないということです。
この問題を解決するには、テキストを小さな塊に分割して、さらに以下の点に気をつけましょう。
- 短い文章を心がける
- 口語体を使わない
- 業界特有の用語を使用する場合はその定義を明記する
- 装飾過剰な表現（不必要な比喩、副詞、形容詞）は避ける
13. グリッドを使用する
「グリッドを使う」といっても、サイトをエクセルの表のようにするわけではありません。訪問者がすぐにコンテンツを見つけられるように、特定の目的を持った明確なセクションにサイトを分割しましょう。
グリッド線は不要です。デザインスタジオAtlasonのサイトのように、色や余白、陰影を利用して、グリッドスペースを区別することができます。このサイトでは、新製品や人気の商品をグリッドで表示しています。訪問者のお目当ては、ここにある商品群のいずれかであることが多く、グリッドレイアウトで瞬時に商品を見つけることができるようになっています。
サイトでグリッドを使用する最も簡単な方法の1つは、グリッドレイアウトを使用しているWordPressテーマを選ぶことです。Gridframe、Masonry Grid、Shuttle Gridなどのテーマがお勧めです。
14. バランスを忘れずに
ウェブデザインの文脈では、バランスとは、デザイン要素がどのように配置され、調和しているかということを意味します。具体的には、以下のような要素などを配慮してバランスをとりましょう。
- 対称性（両側対称、放射状対称、並進対称）
- 補色か反対色を使用する
- 似たような形やサイズの要素を使用する
- 繰り返しのパターンを使用する
アパレルブランドWovenのウェブサイトを見てみましょう。バランスのとれた配色、白と黒を使ったテキストのコントラスト、訪問者の目をコンテンツに向けるシンメトリー（対称性）が取り入れられています。
15. 細部まで気を配る
ゲシュタルトの法則とは、人は個々の要素を見る前に、全体として何であるかを認識する傾向があるというものです。また、Kurt Koffka氏の言葉にあるように、全体は部分から独立して存在するとされています。ゲシュタルトの法則は心理学でよく使われますが、ウェブデザインにも応用できます。
つまり、ウェブサイトの細部にまで気を配り、洗練された完成度の高いデザインを実現しましょう。デザインをしていると、見出しや画像、CTAなどの重要な要素ばかり気になり、それ以外のことを忘れがちです。
- フッターとヘッダーアイコン
- SNSボタン
- 効果的にサイトをWordPressに移行できたかどうか（該当する場合）
- テキストの間隔
- 誤字脱字や文法の誤り
- ブラウザの互換性
- 画像サイズ
サイトを公開する前に、上記の要素を見直して、サイトが信頼に足るものになっているか必ず確認しましょう。たとえ小さな見落としでも、訪問者は簡単に見つけてしまうものです。
そして、ウェブデザインの基本に関する最新トレンドやコンセプトは常に把握しておくこと。そして実際に取り入れることで、サイトは常に新鮮で、魅力的なものになります。
まとめ
お店が清潔で美しければ、優れた顧客体験を提供できるもの。逆に店内に清潔感がなく乱雑であれば、潜在的なお客さんを失うことになります。ウェブデザインにも同じことが言えます。
視覚的に魅力的なウェブサイトを構築することは、単に楽しいプロジェクトというだけでなく、以下のような点でも有用です。
- プロ意識のアピール
- 訪問者との信頼関係の構築
- 競合他社に差をつける
- 検索エンジンからオーガニックトラフィックを獲得
今回の記事でご紹介したウェブデザインの基本を活用して、訪問者に良い印象を与える素敵なサイトを構築してみてください。
ウェブデザインについてすべて網羅できたところで、ご質問です。サイトを閲覧している際に、何かお気づきになった点はありますか？また、この記事で取り上げられていないウェブデザインの原則を何か採用されていますか？以下のコメント欄でぜひお聞かせください。
コメントを残す