編注：本翻訳記事の元記事は去年公開されたものであるため、取り上げられているAirbnbのサイトは現在は違うデザインとなっていますので予めご了承ください。実際のサイトからワイヤーフレームやモックアップをつくるときの参考としてご覧ください。
良いWebサイトのデザインについて考えたとき、何が思い浮かびますか？
私の場合は、Airbnbが思い浮かびます。フロントページの可愛らしいカラーパレットや目を引く動画だけでなく、良いユーザー体験を考慮して構築されているからです。
では、Webサイトの良いユーザー体験について、どのように定義していますか？
１つは、操作や検索がしやすいということでしょう。企業のWebサイトでは、その規模に関わらず、顧客や潜在的顧客に対して情報を提供します。もし顧客が情報を理解できなかったり、探している情報を見つけられなかったら、そのWebサイトは失敗でしょう。
素晴らしいWebサイトをデザインするには、コンテンツと構成が一緒になって機能する必要があります。そして、適切なタイミングに適切な場所で、有益な情報が提供されなければなりません。何回も調整されることで、悪化してしまうことも頻繁にあります。しかし焦ることはできません。コンテンツを完全にフィットさせるためにWebサイトを構築しなければなりません。
どのようにして、素晴らしいWebサイトのデザインを始めるのでしょうか？ 答えは、ワイヤーフレームを何度も作成し、それをインタラクティブなモックアップに反映することを繰り返すことです。
なぜワイヤーフレームなのか？
ワイヤーフレームは、コンセプトを素早く伝えて、あらゆるデザインを何回も反復してテストを行うための非常に良い方法です。
ワイヤーフレームは、実際のビジュアルデザインを再現したり、完璧にコーディングされたプロトタイプではありません。ワイヤーフレームは、テストを素早く反復し、フィードバックを獲得するための、忠実度の低い静的なデザインです。優秀なワイヤーフレームはインタラクティブでもあり、デザインが実際にどのように機能しているか、より高い知見でテストすることが可能です。
すべてのWebサイトには目的があります。ワイヤーフレームを活用することで、デザイナーはその目的に集中しやすくなります。そしてすべてのフレームワークやコンテンツ、ビジュアルデザインを、その目的に合わせることができます。
たとえば、Airbnbは旅行のWebサイトです。
Airbnbの唯一の目的は、人々が理想の旅行先と滞在先を見つけることによって、旅行の手助けをすることです。それにより、収益を得ています。ヘッダーのスタイルからリストの表示方法に至るまで、Webサイトのすべての部分がその目的に向けて最適化されています。
コンテンツはデザインの要です。人々はコンテンツのために、製品を使ったりWebサイトを訪れたりします。デザインを求めて訪れているのではありません。ワイヤーフレームを行うときは、制限なくテストを行い失敗して、もっとも重要なデザインアセットの構成を改良しましょう。
UIデザインの不朽の原則
ワイヤーフレームやモックアップのデザインを実践する前に、まずはAirbnbのWebサイトがどのように機能しているかを紐解いていきましょう。
１. 印象的な画像に注目を集める
旅行先について考えるとき、おそらく旅程表やレンタカー情報は思い浮かばないでしょう。
思い浮かべるのは、滞在予定の場所の写真など、見た目に関係するものでしょう。旅行したいと思うとき、その場所の写真を見たいはずです。
これはまさに、AirbnbがWebサイトで行ったことです。どの要素もビジュアルに富んでいます。
家のリストから旅行先のおすすめに至るまで、すべてのコンテンツにおいて、テキストよりも画像が優先されています。画像フレームにもっとも多くのスペースがとられていて、画像のわきにいくつかの太字の文字と、ユーザー操作用のボタンがあります。
ヘッダー全体が、Airbnbの旅行者が体験した、世界中のさまざまな文化や環境の動画になっています。これは、人々が旅行のWebサイトで見たいと思うものです。ユーザーは簡素なテキストフォームを入力したり、予約をしたりしたいのではありません。旅行を計画する間でも、旅行をしたいと思うのです。
目的のある画像は、どんなときでも単なる言葉よりも強力です。
２. コンテンツをシンプルにする
残念ながら、旅行をしたいと思う人にとって、プロセスがとても複雑なことはよくあります。
訪れたい場所を探し出して、旅行先を決めなければなりません。そして滞在場所を探して、そこでの計画を少しは立てなければなりません。さらに、航空券を購入したり、運転ルートを計画したりする必要もあるでしょう。ほかにもたくさんの準備が必要で、これらはとても手間のかかる作業です。
旅行の体験がややこしくなってしまうことは、誰もが絶対に避けたいと思っています。
AirbnbのWebサイトは、ユーザーの注意をそらすようなものはすべてページから取り除いており、もっとも関連のある要素だけを残しています。簡単な旅行データの入力には、シンプルなバーだけが設けられています。またホスト用にボタンが１つ設置されており、閲覧するためにすっきりとした見た目のリストで表示されています。リスト表示の両サイドには空白が設けられ、広告やその他の不要な情報はありません。
フォントは背景に対して目立つようになっており、文章は比較的シンプルな言葉で作られています。それぞれの旅行先について、長々とした説明文を、Webサイトのフロントページにリスト表示するのではありません。コンテンツブロックそれぞれに、シンプルな画像と太字の名称を添えています。
３. もっとも重要な機能を強調する
何よりも、Webサイトでもっともよく使われる機能を、簡単にアクセスできるようにする必要があります。
人々はあなたのサイトに、どのような目的で訪れますか？
Airbnbでは、人々は主に旅行の滞在先を見つけるためにサイトへ訪れます。そのため、Webサイトでもっとも大きく目立つコールトゥアクション（CTA）の要素は、フロントページ中央にある予約詳細のバーです。「探す」ボタンはピンクがかった赤色で目立つようにしています。また半透明の黒いバーがCTAの背景にまたがっており、CTAの要素を強調しています。
サイトのほかの部分も目立ちやすくなっています。
ヘッダー中央の大きな再生ボタンで、世界中を旅する人々の動画を見ることができます。この動画によって、旅行先を探しにWebサイトを訪れる人たちを魅了します。ページ右上の「ホストになる」ボタンと、ヘッダー右下の「得られるもの」を表示する大きなコンテンツブロックは、Airbnbのホストになることに対するユーザーの関心を高める役割があります。
これらすべてのCTA要素は、ユーザージャーニーを目的へ素早く導くものとして強調されています。
AirbnbのWebサイトのモックアップを作る：５つのステップ
ワイヤーフレームを作成することで、すべての部品が、互いにどのように機能するかがわかります。ここまで学んだことを活かして、Airbnbの静的なワイヤーフレームを作成しましょう。そして、その上で忠実度が高いモックアップに仕上げていきましょう。
素早くデザインを作るために、私はUXPin使っています。しかし、ツールに関してはあなたが１番好きなものを使っても構いません。
基本的な構造
私は、ページ内にあるすべてのコンテンツの、大まかな骨組みのアウトラインを作ることから始めるのが好きです。
コンテンツワイヤーフレームとして知られているこれらのボックスは、ページ内の異なる要素を表します。ここで着目すべきものは、情報とビジュアルの階層です。
ナビゲーションバーやヘッダー、重要なコンテンツのブロックを作ります。ビジュアルデザインの種類をまだ決めていない段階でも、この骨組みの構造から、それぞれの要素をどこに配置するのか考えやすくなります。
コンテンツワイヤーフレームを作成したら、それをより詳細なワイヤーフレームへの反復か、忠実度の高いモックアップへと直接移行することができます。
もしまったく新しいデザインを作成しているなら、より詳細に遷移がわかるワイヤーフレームを作成し、テストを反復する必要があります。そうすることで、最終系のコンテンツ構造をテストすることができます。規模の小さいリニューアルであれば、コアとなる構造はすでにできているので、忠実度の高いモックアップへと直接進むことができます。
便宜上、今回は忠実度の高いモックアップへ直接進みます。
見出しとヘッダー
次のステップでは見出しとヘッダーを作成します。どちらの要素も非常に重要なので、軽視してはいけません。
ヘッドラインには、ユーザーの注目をすぐに集められるような、大胆で印象的なものを持ってきます。「Live There（そこで生きよう）」は、「travel there（そこに旅行しよう）」や「visit there（そこに行こう）」とは異なります。Airbnbのコンセプトは、まるで自分の家のような場所での体験なので、コピーに反映されています。
では、サブ見出しを見てみましょう。「191ヵ国以上のローカルホストの滞在先を予約して、そこで暮らしているような体験をしましょう。」とあります。この内容は、Airbnbがどこでも利用可能であることと、Airbnbを使った体験がどのようなものかという２つのことをユーザーに伝えています。
ヘッダー画像はユーザーが最初に目にするものです。もしそれが見出しと合っていなかったり、注意をそらすようなものであれば、ユーザーを失うことになります。「百聞は一見に如かず」ということわざがあるように、ページに合う適切なヘッダー画像が必要です。
Airbnbの場合、動画を使って、世界中にあるたくさんの魅力的な場所や体験を追い求めている人々を映し出しています。人々の想像をかき立てるために、この動画が配置されているのです。
主となるCTA（コールトゥアクション）
ユーザーに実行してもらいたい、またユーザーが実行したいと思うものの中で、CTAはもっとも重要なものであるべきです。これは絶対に守らなくてはならないことで、「続ける」のような曖昧な用語を使ってはいけません。緊急であるような感覚を作り出しましょう。
AirbnbのWebサイトでは、CTAはわかりやすく、そして具体的です。「場所」と「日付」、「ゲストの人数」のフィールドで、主要な情報を入力させます。そして最後に、ピンクがかった赤色で強調された「探す」ボタンが置かれています。とても素早く実行でき、そしてWebサイトのコンテキストと関連付けられています。
一般的に要素そのものは、見出しの下にあてはまります。しかしAirbnbのWebサイトでは、ヘッダー下に配置することで、より多くの意味を持たせています。わかりやすいだけでなく、ヘッダーの動画を通じてユーザーが、バリュープロポジション（サイトの提供できる価値）を受け取りやすくなります。
主となるコンテンツブロック
次に、ページ内のコンテンツをいくつか作成します。Webサイト全体のコンテンツを作るのでは永遠に終わらないので、フロントページ内にある、もっとも重要なコンテンツの最初のブロックだけを作ります。これで十分目的が達成できるでしょう。
ヘッダー単体だけで、フルスクリーンがカバーされないようなWebサイトを作成するとき、最初のコンテンツブロックは、ユーザーの注目を集めるものでなければなりません。なぜなら、最初のコンテンツブロックもほぼヘッダーの一部となるからです。
Airbnbはマルチサイド型のプラットフォームです。つまり、旅行者とホストという、２つのタイプのメインユーザーがいます。そのため、最初のコンテンツブロックは、完全にホスト向けに作成されています。そのためブロックの中には「小型の」CTAも配置されています。
ナビゲーションバー
では、トップのグレーのボックス部分を完成させましょう。
ナビゲーションバーは比較的小さいサイズですが、侮ってはいけません。ナビゲーションバーはユーザーのガイドとして機能します。探しているものが、すぐページに表示されなかった場合、ユーザーが最初に止まるところはナビゲーションバーです。
ナビゲーションバーに配置するアイテムは、４つだけにすることに注意してください。なぜなら、バーのスペースが限られているからです。もし配置されるアイテムが多すぎると、ユーザーが「決断疲れ」を起こす危険性があります。さらに、見た目もゴチャゴチャします。ナビゲーションバーに置くアイテムは、ユーザーの「ナビゲート」に役立つ、もっとも重要なものだけにしましょう。
AirbnbのWebサイトには、４つのボタンが配置されています。
- 「ホストになる」ボタンは、Airbnbに訪れるユーザーの半分に関連があるボタンです。
- 「メッセージ」ボタンは、ユーザーに重要な通知を行うボタンです。
- 「ヘルプ」ボタンは、実際にユーザーが探していることに役立つボタンです。
- 「アカウント」ボタンは、ユーザーが自分の情報を管理するためのボタンです。
インタラクティブにする
最後に、インタラクティブにします。ユーザーと製品間のインタラクションは、ユーザー体験の中心的なものです。実際に機能しないのであれば、その製品をテストすることはできないでしょう。
Webサイトには、さまざまなインタラクションがあります。しかし時間の関係上、ここではページ内のもっとも重要な要素だけ、インタラクティブにしましょう。ここでは、CTAがもっとも重要な要素です。プロトタイプを行うとき、ページ上でもっともビジネスに影響を与えるアクションを、常に最優先にしてください。
モックアップをインタラクティブにするときは、細かい部分まで完全に設定する必要はありません。製品が実際に機能していると感じるられるインタラクションとリアクションだけを加えるので十分です。この時点で、少なくとも５人のユーザーでデザインテストを行い、フィードバックを獲得しましょう。
AirbnbのWebサイトでは、インタラクティブにするプロセスは比較的簡単です。画面にドロップダウンメニューを加えることと、ボタンをクリックしたりマウスを離したら、ポップアップが表示されたり消えたりするようにするだけです。そのほかにも私は、検索ボタン上にマウスがホバーしたら、色が明るくなる機能を加えました。この小さな反応が起こることで、それが本当にボタンであるということをユーザーに示して、確実にクリック可能であることを伝えています。
これを行うのはとても簡単です。私は「行き先」のフィールドのように、特定の要素のみにインタラクションを追加しました。そして、プレビューボタンを押して、実際にどのように見えるかを確認しました。上の画像の通りです。
次のステップ
さて、これでモックアップづくりは終了です。
１つの簡単なコンテンツワイヤーフレームが、忠実度の高いモックアップとなりました。今回、ワイヤーフレームやモックアップをどのように作成するかは学習しましたので、ほかの実践でテストする際に、スキルを活用してください。
このレッスンが役に立つと思った方は、UXPinの無料トライアルでお気軽にスキルの練習をしてください。
