優れたホームページを作成するための3つのステップ | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
「本は表紙では判断できない」という言葉があります。確かに本（そして人）についてはそうかもしれませんが、Webサイトのホームページについてはこれは当てはまりません。ホームページは訪問者の体験の成否を決めるだけでなく、検索を諦めさせる理由になることさえあるものです。
でも、ホームページがWebサイトにとって重要な要素であるならば、いくつかのサイトで問題を見かけるのはなぜでしょうか？この記事では、この件を掘り下げ、避けるべき一般的な間違いを確認します。
今風のフラットな画像を使ったホームページ 出典: Adobe Stock Photos
「ホーム」はサイトの看板
Webサイトはホームページ無しでは存在できません。サイトにアクセスした訪問者の最初の閲覧ページがホームページではなかったとしても、遅かれ早かれそこに辿り着くことになるでしょう。
オンライン上に存在するサイトは、仮想空間に開いた店舗あるいはオフィスであり、ホームページはいわば訪問者を迎える正面玄関のようなものです。そのサイトを開設したのが誰か、何を提供しているのか、そして訪問者にとってのメリットが何かは明確でなければなりません。理想としては、訪問者はこれらの疑問に対する答えを数秒以内に見つけられるべきです。
訪問者がホームページにたどり着いてから10秒以内でページの意図を理解できることが理想 出典: Adobe Stock Photos
10秒ルール
ほとんどの場合、ホームページの体験は訪問者がWebサイトで費やす時間を左右します。Nielsen Norman Groupの調査レポートは、Webサイトの滞在時間との関係をワイブル分布で表せると紹介しています。ワイブル分布とは、失敗までの時間を分析するのに使われる概念です。ここでは、ユーザーが「ホームページに滞在した時間」を基準に分析された、「サイトを離脱するまでの時間」のことです。
チャオ・リューが同僚と共同で行った研究によると、99%のWebサイトに与えられたチャンスは10秒であると結論づけられています。すなわち、訪問者はWebサイトにたどり着いてから10秒以内に、そのサイトを閲覧し続けるか、離脱するかを判断するということです。
なぜこの結果が重要なのでしょうか？それは、10秒以内にあなたの価値をユーザーに伝える必要があることを伝えているからです。もし訪問者が10秒以上滞在すれば、そのままサイトに留まり他のページも閲覧する可能性が高くなりますが、10秒以内に訪問者の注意を引けなければ、訪問者がサイトから去ってしまうリスクに直面することになるのです。
スタートボタンを押す手のイラスト 出典: Adobe Stock Photos
ホームページのデザインとマイクロインタラクション
良いホームページは、企業の価値を伝えます。これは時として困難です。最も意味のある画像、見出し、本文、そしてアイコンを選はなければなりません。その上で、訪問者にとって説得力が生まれるようにページをレイアウトする必要があります。
ここでマイクロインタラクションが利用できます。マイクロインタラクションは、ユーザーを惹きつけるフィードバックを即座に提供すします。たとえば、ユーザーがナビゲーションバーの上にカーソルを移動すると、ドロップダウンメニューやセカンダリナビゲーションが表示されるのは、マイクロインタラクションの一例です。
そこで浮かぶ疑問は、「どのように着手すればよいのか？」でしょう。
1. 訪問者を知る
主要ターゲットとして想定している訪問者にとって重要なことが何かを調べることから始めましょう。それから、訪問者がサイトにアクセスしたときの思考や行動を推測するための情報も収集します。こういった情報の収集にはユーザー調査が効果的で、具体的には、ユーザーインタビュー、コンテクスチュアルインクワイアリ、既存サイトでのユーザビリティテストなどの手法が利用できます。
2. レイアウトを決定する
ホームページのレイアウトは、「見つけやすさ」と「学びやすさ」を兼ね備えていなければなりません。見つけやすさは、ユーザーがサイト上で探しているものまでどれだけ簡単にたどり着けるか、学びやすさは、ユーザーがサイトの機能とナビゲーションをどれほど素早く理解できるかといったことを指します。制限された時間内で価値を伝え無ければならないとすれば、UIデザインが成否のカギであることは自明です。
レイアウトする際に留意すべきデザイン原則はたくさんありますが、まずは次の3つから始めるのがおすすめです。
タイポグラフィ
Webサイトに文字は欠かせません。そして、文字をどうデザインするかはとても重要です。タイポグラフィはホームページのデザインに大きく影響しますし、同時にブランドへの信頼に関わることでもあります。たとえば、ユーザーが目を細めながらサイトのコピーを読むような状況は避けなければなりません。サイズ、位置、太さ、色を吟味して、すべてのテキストを読み取り可能にする必要があります。飾りのあるフォントは避け、サンセリフ体などのより現代的なフォントを選びます。一般的に使われているサンセリフ体にはArialなどがあります。
選択するフォントは、シンプルな形状で、bold、ultra-thin、black、light、regularなどの多様なウェイトが用意されたものにしましょう。コンテンツのセクション間に明確な対比をつくることも有効です。当たり前の様ですが、ホームページの見出しのフォントは本文よりも大きくするのはベストプラクティスとされています。
画像
人々の判断、感情、期待感は、目にしたものに影響されます。食の世界には「目で食べる」という言葉があるほどです。Webサイトのホームページについてももちろん同じです。見た目でまず判断するのであれば、訪問者が共感や親近感を持てる画像を選ぶことが大切です。彼らが解決しようとしている問題を表している画像か？彼らが感じているかもしれない気持ちを表現している画像か？という点を考慮して選びましょう。
eコマースサイトであれば、普段の生活で買い物をしている時に目にする光景を表す画像を選択しましょう。もし、犬の里親紹介所のホームページをデザインしているなら、犬だけの画像よりも、犬と人の触れ合いを描写した感情に働きかける画像を選択しましょう。Adobe Stockには豊富な画像が揃っています。
また、画像は、ビジネスの目標に沿ったストーリーを伝えるものであるべきでしょう。つまり、商品を購入する人、犬の里親になる人のように、訪問者を顧客へと転換するというニーズを表現した画像が望ましいと考えられます。
コンポジション
適切なタイポグラフィや画像を選ぶだけでは不十分です。すべてを組み合わせてバランスを取らなければなりません。たとえば、ボタンは画面の全幅に広げることもできれば、その4分の1の幅にすることもできます。ホームページに占める領域次第で、訪問者を惹き付けることもあれば、注意をそらすこともあります。
それを判断するには、訪問者にホームページで何を行って欲しいのかを考えることが必要です。この点が明確になっているのが、最も優れたホームページデザインといえるでしょう。
ホームページに訪問者を誘導するストーリーをつくり、画像やテキストを通じてそのストーリーを伝えましょう。訪問したら何を行って欲しいのか、どのようにホームページを操作して欲しいのかをはっきりさせるには、ワイヤフレームの段階からこの取り組みを始めることが有効です。その際、すべての要素の位置の決定にグリッドを使うと、作業を進めやすくなります。
スマートフォン、タブレット、ノートパソコン、デスクトップモニターに表示されたホームページのイラスト 出典: Adobe Stock Photos
3. プラットフォームを考慮する
2007年に初代iPhoneが発売されて以来、新しいWebブラウジング体験が導入されました。今では、サイトの閲覧に使用するデバイスの種類はさらに増えています。画面の解像度も様々です。訪問者がホームページを初体験するのはモバイルフォンかもしれないし、ほかのデバイスである可能性もあります。それが、レスポンシブデザインが非常に重要な理由です。
すなわち、ホームページにも複数のビューポートを考慮することになります。タイポグラフィ、画像、そしてコンポジションは、デスクトップ画面からモバイルデバイスの画面まで幅広く対応し、シームレスな体験を提供できることが重要です。
これを実現する方法のひとつとして挙げられるのが、モバイルファーストの実践です。最初に小さな画面向けのデザインを行ってから、デスクトップのような大きな場面向けにデザインするという手法です。この場合、狭い領域へのデザイン要素の配置から始めるため、出来上がったデザインに機能が多すぎてユーザーを困惑させてしまうフィーチャークリープの予防にもなります。ホームページをシンプルに保つことと、訪問者にとって意味のあるものにすることは肝要です。
モバイルファーストだけがシームレスな体験を生み出す方法ではありません。訪問者がサイトを使用するコンテキストを理解することも役に立ちます。コンテキストと言っているのは、訪問者が主にWebサイトを利用している環境です。それは自宅でしょうか？あるいは、バスを待っている間であったり、電車の車内であるかもしれません。使用環境を理解すれば、どのプラットフォームを優先させるべきかを判断しやすくなります。
ユーザーがいつどこでどのようにホームページを使用するかを理解すれば、デザインに関する判断が容易になる 出典: Adobe Stock Photos
デザインに関わる心理学
UXデザインでは心理学が重視されています。優れたホームページデザインは心理学も活用しているものです。特に有用な心理学の原則には、ヒックの法則とレストルフ効果の2つがあります。
ヒックの法則が示しているのは、決定にかかる時間が、ユーザーに与えられた選択肢の数と複雑さに応じて増大するということです。つまり、多くの選択肢を与えるほど素早い判断が困難になります。10秒以内に印象付けなければならないことを思い出せば、これは優先させるべきルールです。ページ内の情報、機能を制限し、全体的に煩雑した状態は避けるよう試みるべきです。
インターフェイスを単純化する上で特に役立つ方法には、置き換え、非表示、グループ化があります。
- 置き換え： メニューの名前やカテゴリの数を減らすために、ボタンや画像を間に介してコンテンツを利用できるようにします
- 非表示： 特定のアクションにより呼び出されるまで、情報の存在を隠したり、情報の一部のみ表示する方法です。分かりやすい例はドロップダウンメニューです。対応するページの領域をクリックするかホバーするまでメニューは表示されません。
- グループ化： 類似する情報をまとめることで、訪問者が表示される要素の多さに困惑しないようにします。たとえば、カルーセルは画像をグループ化し、ページ横方向に表示します。ここでの目的はユーザーの認知的負荷の低減です。
「孤立効果」とも呼ばれるレストルフ効果は、複数の類似した要素を提示すると、他とは異なるあるひとつの要素だけ記憶するというものです。高コントラストによる視覚的な階層をつくると、この効果を得ることができます。たとえば、あるアイコンだけ他とは異なる色にします。すると、そのアイコンは孤立して、訪問者にそのアイコンが特別または重要であることを伝えます。
心理学はページの流し読みのしやすさにおいても重要です。訪問者はWebサイトが自分に適した場所であるかを素早く評価したいと思うでしょう。ある種のアフォーダンスのパターンの実装が、見つけやすさに役に立つこともあります。
Webサイトのホームページのコンセプトを表現したイラスト 出典: Adobe Stock Photos
おわりに
ホームページは重要です。ホームページのないWebサイトをデザインすることはできませんし、そこには多くの人が訪れます。行動パターンと思考パターンを含めて訪問者を理解することは必要で、それに基づいてフォント、アイコン、画像、およびテキストを用意し、レイアウトを作成するべきです。最後に、使用しているデバイスや環境に左右されることなくユーザーがホームページを使用できるようにすることは重要です。
その上で最も大切なのは、デザインをシンプルに保つことです。最初にどれをクリックしていいのか、探している情報はどこを見ればよいのか、ユーザーを悩ませないようにしましょう。ホームページのデザイン検討に役立つヒントは他にもたくさんありますが、この記事で紹介したポイントは、ホームページを成功させるための良い土台になるでしょう。
この記事はHow to Design the Best Homepage in 3 Steps（著者:Vincent Brathwaite）の抄訳です