ウェブデザインにおけるパレートの法則 - 80/20の法則でより効果的なウェブサイトをデザインする

ウェブデザインにおける完璧主義者の問題点

多くのグラフィックデザイナーやウェブデザイナーにとって、完璧主義というのは難題です。優れたものを作ろうと努力するのは立派なことですが、ウェブサイトのすべての要素が完璧になるまで、延々と変更と調整を繰り返すことになり、フラストレーションがたまることもあります。書体やカラーパレットの選択、ピクセル単位でのデザイン決定など、多くのデザイナーはデザインプロセスに没頭し、時間を忘れてしまいがちです。確かに、優れた作品を提供することは重要ですが、デザイナーとして、これが何を意味するのか、焦点を見失いがちではないでしょうか。ウェブサイトは、デザイナーの目標ではなく、クライアントの望む結果を満たすと同時に、時間、リソース、エネルギーの制限のバランスをとることが重要です。制約がないと、ウェブサイトは簡単にオーバーエンジニアリングになり、遅くなり、要素や機能が多すぎてユーザーを混乱させる結果になりかねません。また、限られた時間の中ですべての機能を盛り込むことは難しく、デザイナーは単に時間切れになるかもしれませんし、期限までに良いウェブサイトを提供できないことは、関係者全員にとって大きなストレスになります。

パレートの原理とは？

80/20の法則」とは、「パレートの法則」とも呼ばれ、「20%の原因から80%の効果が生まれる」というものである。パレートの法則は、1895年にイタリアの経済学者ヴィルフレド・パレートが、イタリアの富の80％が人口の20％にしか所有されていないことを観察したことから始まりました。彼はまた、庭にあるエンドウ豆のさやの20％が、80％のエンドウ豆を生産していることに気づいたのだ。パレートの原理とは、ある結果の大部分は、少数の重要な要素によって生み出されていることを示唆するものである。それ以来、ビジネス、経済、心理学などさまざまな分野に応用され、日常生活にも応用できるようになったのです。

このことは、小規模な例にもよく当てはまります。あなたの収入のほとんどが、一握りの同じ安定した顧客から得ていることに気づいたことはありませんか？あるいは、いつも同じ服を着ているように見えて、ワードローブのほとんどは使われていないことに気づいたことはありませんか？この比率は必ずしも80/20とは限らず、常に例外はありますが、どの行動が自分の成功に最も影響を与えるかを特定し、それに応じて優先順位をつけるのに役立つ素晴らしいツールです。

ウェブデザインとデジタルマーケティングにおけるパレートの原則

ウェブデザインに適用されるパレートの原則では、ほとんどの結果は少数の重要な機能から得られると想定されています。マーケティングでは、あるキャンペーンは他のキャンペーンよりもはるかに良い結果をもたらします。最良の結果を得るためには、まず少数の重要な機能に焦点を当て、それが最も注目されるようにし、重要でない部分はより早く終わらせることが理にかなっています。ユーザーがどのようにコンテンツを利用し、必要なものを見つけることができるかに注意を払えば、単に美しさだけにこだわるよりも大きな収穫を得られる可能性が高いのです。完璧さは必ずしも必要ではなく、重要な20％の機能を最適化することで、さらに効果的なウェブサイトを実現できることを教えてくれるのです。

例えば、ハンドメイド製品を販売する小さなECショップのトラフィックデータを調べたところ、いくつかのパレート傾向があることに気づきました。例えば、ほぼすべての訪問者がモバイルからアクセスしている。商品の売上のほとんどは、少数のカテゴリーからのものである。ソーシャルメディアからのトラフィックはFacebookが最大である。製品ページのヒートマップを見ると、より多くのエンゲージメントが得られるエリアがある。典型的なFパターンは、ページの上段と左側にインタラクションのクラスターがあることで、ある程度観察することができます。

この情報を使って、このクライアントの売上を向上させるにはどうしたらいいか？

この例では、元々デスクトップ用に作られたこのウェブサイトのモバイル体験を改善することが、最も手っ取り早い方法でしょう。すべてのページのヒートマップを調査し、ユーザーの好みを把握することができます。例えば、FAQの中で最もクリックされている質問を、隠さずにトップページに移動させることができます。収益性の高い商品は、最もクリックされる可能性の高いページ領域に掲載することができます。

常に「なぜ」から始める

(画像出典：Envato Elements)

私の経験上、多くのデザイナーは、プロジェクトの目的に関連する重要な情報が欠けていても、喜んで概要を受け取り、デザインに取り掛かることがあります。しかし、このような場合、デザイナーは企画書を受け取り、デザインに取り掛かることができます。作業を始める前に、一歩引いてみてください。なぜそのようなことをするのか、その理由を明確に理解しなければ、Webデザインは方向性を見失うことになります。自分ではよく見えても、クライアントにはよく見えても、何時間かけても、クライアントが期待した結果が出なければ、残念な結果になってしまいます。

自問自答してください。なぜこのウェブサイトは存在するのか？そのウェブサイトのエンドユーザーは誰で、その人たちはウェブサイト上でどのように交流するのでしょうか？そのウェブサイトは、クライアントにとってどのような価値と成功をもたらすのか？クライアントはこの成功をどのように評価するのか？ウェブサイトはどのように訪問者を引きつけ、リードを獲得するのか？これらの質問に答え、「なぜ」を理解できれば、デザイン要素の「何を」「どのように」の優先順位付けがより容易になります。 望ましい結果がイメージできれば、それを達成するために最も重要な部分にエネルギーを集中させることができるようになるのです。

ウェブデザインにおけるminimum viable productアプローチの採用

Webサイトのデザインには多くの決定事項があり、何から手をつければよいのかわからないことがあります。MVP（Minimum Viable Product）アプローチとは、Webサイトの中核となる要素だけをすぐに構築し、時間をかけて顧客からのフィードバックにより継続的に改良していくものです。これは通常、コストと時間を節約するため、あるいはビジネスアイデアが多くの仮定に基づいている場合に行われます。開発者は、一度にすべてを試みるのではなく、顧客ニーズに基づいて機能の優先順位を決め、できるだけ早くプロトタイプを作成することができます。時間や予算のプレッシャーがない場合でも、ウェブサイトをMVPとして受け入れることは、パレートの原則を適用し、完璧主義者の傾向と戦うための素晴らしい方法です。後でいつでも機能を追加できるが、今は最も重要な要素に集中すべきだということが、精神的にも楽になる。

モバイルファーストのデザインは、ウェブサイトをシンプルにするのに役立つ

ウェブサイトをデザインするとき、ユーザーに効果的で直感的な体験を与えたいと思うものです。そのためには、「モバイルファースト」の設計手法でデザインするのが一番です。この考え方では、デスクトップ用のウェブサイトをモバイル用に合わせるのではなく、まずモバイルデバイス用に最適化したウェブサイトを作成します。なぜこれが必要なのでしょうか。techjury.netによると、2022年には、ウェブサイトのトラフィックの60.66%を携帯電話が生み出し、デスクトップとタブレットを合わせると39.34%になると言われています。これは業界やWebサイトによって異なるかもしれませんが、この傾向は注目に値します。モバイル版のサイトにデザインを集中させることで、成功の確率を高めることができるのです。

モバイル端末向けのデザインを始めると、文言のスペースが少なくなり、ごちゃごちゃしていることにすぐに気がつくでしょう。デスクトップ向けに長い間デザインしてきた人にとって、これを適応させるのはかなり難しいことです。しかし、この方法はパレートの法則にうまく合致しており、最もインパクトのあるコンテンツを選ぶことができます。これは2つの利点があります。1つは、ユーザーが好むモバイルプラットフォームに最適化され、もう1つは、デスクトップ用に変更したときに、視覚的にモダンでクリーンな印象を与えることができることです。しかし、モバイルファーストのアプローチでは、すでにシンプルなデザインになっているため、その作業ははるかに簡単です。

競合他社サイトの調査・分析

Webデザインにおけるリサーチというと、デザイン性の高いWebサイトやテンプレートなどを見ることだと思われがちです。しかし、Webデザインのためのリサーチは、単に他のWebサイトの美観に感心するだけではありません。効果的なウェブサイトを作るためには、人々がどのようにウェブを使うのか、ユーザーがさまざまなデザインにどう接するのか、コンテンツはどのように構成されているのかを理解することが必要です。クライアントから解析データを提供してもらったり、Ranktrackerのようなモニタリングツールを使うことで、より良いパフォーマンスを発揮するウェブサイトのための改善点をより明確にすることができます。

リサーチには、既存の業界標準、ターゲット層、ユーザーの嗜好を競合他社分析によって調べることが必要です。競合他社を見つけるには、クライアントに問い合わせるか、自分で検索して上位にランクインしているウェブサイトを確認する方法があります。競合他社をある程度特定したら、そのデータを入手するための信頼できるソースが必要です。Ranktrackerのお気に入りの機能の1つは、自分で特定した競合を追加することができ、競合のパフォーマンスを自分のドメインの結果の横に列で表示することです。競合が自分のキーワードで上位にいる場合、そのウェブサイトを分析して、競合から学ぶことは価値があります。競合を追加するには、競合のURLを貼り付けるだけです。

競合他社分析の方法について詳しく書かれた記事はこちら。

リサーチをしながら、搭載可能な機能や要素をすべてまとめた「ドリームリスト」を作成します（心配しないでください、これらは必ず絞り込まれますが、すべてのアイデアをまとめておくと便利です）。

プランニング主要なデザインフィーチャーを特定する

(画像出典：Envato Elements)

ウェブサイトのデザインは、その意図された目的に基づいて行われるべきです。夢のリストにあるすべての要素／機能を見て、クライアントが目的を達成するのに役立つと思うものを選んでください。白紙を用意し、Webサイトのワイヤーフレームを描き始めます。ワイヤーフレームでは、盛り込む予定の各要素を成果に結びつけます。明確な目的が見つからない場合は、その部分を削除してください。 デザインの美しさにはこだわらず、ユーザーエクスペリエンスとユーザビリティのために何がベストかを考えてください。

一般に信じられていることとは異なり、最初のワイヤーフレームは、高級なデザインソフトウェアでデザインする必要はありません。鉛筆と紙を使ったアナログな手法でも問題なく、時にはソフトウェアに気を取られることなく、より良い結果を得ることができます。また、紙を使うことで、より自由で、より永続的に、より素早く、クリエイティブなプロセスを進めることができます。ワイヤーフレームをクライアントに見せる必要がある場合は、ラフ画を描き終えてから、よりプロフェッショナルな作業を行うことができます。

時間を節約するために、ウェブプラットフォームでデザインするのではなく、まずモックアップを作成します。

昔から、「飛行機を作りながら飛ばすことはできない」と言われています。コンテンツや機能、デザインについてまだ決めかねている状態でウェブサイトを作ろうとすると、フラストレーションが溜まる一方です。効率よく進めるには、計画が必要です。すべてのページのモックアップを作成することは、時間がかかり、直感に反するように思えますが、多くの目的があり、長い目で見れば時間の節約になります。モックアップは、ウェブ開発が始まる前に、クライアントがウェブサイトを視覚化することを可能にします。色やフォントの違いを体験し、何を変更すべきかを簡単に予測することができます。モックアップを見ながら議論することで、さまざまな疑問や質問が生まれます。そうすることで、クライアントが初めて本番のサイトを見たときに、喜んでくれる可能性が高まります。そして何より、モックアップを見ながら作業をすることで、開発段階に移ったとき、すでにほとんどすべてのクリエイティブな決定がなされているため、ウェブサイトをより速く構築することができます。

検索エンジンで上位に表示されるコンテンツで仕事をする

クライアントは、あなたの役割は美的要素のデザインだけだと考えているため、「プレースホルダーテキスト」でデザインを始めるよう主張することがあります。可能であれば、一般的なプレースホルダーテキストを使ったデザイン作業は避けてください。デザインは美しくても、肝心のコンテンツがおろそかになっては、ウェブサイトの意味がありません。

検索エンジン最適化（SEO）は、検索エンジンがあなたのウェブサイトを有機的に発見する方法です。検索エンジン最適化（SEO）は、検索エンジンがあなたのウェブサイトを見つけるための方法です。SEOには、ページで使用する言葉の選択が重要であり、デザイン要素はその言葉をサポートするものでなければなりません。キーワードがわかっていれば、より効果的です。コピーライターにコンテンツを依頼する場合は、彼らがSEOに精通していることを確認しましょう。SEOの専門家でなくても、この話題に精通することで、ウェブデザインの過程でより意識することができるようになります。

キーワード検索ツールの中には複雑なものもありますが（特にSEO初心者）、Ranktracker Keyword Finderは非常にシンプルで直感的です。キーワードをリストに追加するだけで、キーワードの難易度で色分けされた結果が表示されるのです。良いSEOのためには、競争率が低くても十分な検索ボリュームがあるキーワードを選びたいので、検索ボリュームがすぐそこに表示されるのは非常に便利です。

ですから、作業を始める前に、少なくとも文言のドラフトを入手するようにしてください。もしあなたが独立したデザイナーであれば、クライアントがウェブサイトのどこにその文言が一番適しているかを理解する手助けも必要でしょう。デザインプロセスの現実として、この文言は何度か変更される可能性がありますが、何もないよりはずっとましなのです。

フォント、カラー、階層、ビジュアル要素に関する選択の簡素化

もしあなたがあまり経験のないデザイナーであったり、時間を節約したいのであれば、テンプレートを使って作業を行い、それを基礎として使用することが有効です。WordPressのようなCMSの場合、何千もの素晴らしいテンプレートがリーズナブルな価格で提供されています。これらのテンプレートには、フォント、色、階層、視覚的要素などがすでにデザインされており、まとまったスタイルになっています。もし、オリジナリティを重視するのであれば、ワイヤーフレームをテンプレートに当てはめるので、テンプレートとは異なる外観になることをご承知おきください。デザイン資産と一般的なスタイルがあれば、方向性を見出すことができ、意思決定の疲労を軽減することができます。ウェブサイトを彩る色は、2色か最大でも3色までにしておくのが無難です。

おわりにインパクトの最大化

どこに焦点を当てるかを知ることで、デザイナーは完璧主義的な傾向を克服しながら、成功を収めることができるのです。パレートの法則とは、ウェブデザインにおける経験則のひとつで、20%の労力で80%のユーザーエクスペリエンスを達成できるというものです。つまり、ウェブデザイナーは、コンテンツ、ページ上のデザイン要素、ユーザビリティなどの最適化に力を注ぎ、検索エンジンで上位に表示されるような効果的なウェブサイトを作る必要があるのです。