Airbnbを事例に学ぶ！失敗しないWebサイトの作り方とは
Webサイトの上手な作り方をAirbnbを事例に学んでいきます。サイト作成をする上でワイヤーフレームやモックアップを作りますが、どうやって作るのか参考になるでしょう。ユーザーにとって使いやすい優れたサイトを作る上でぜひご覧くだささい。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。 また本記事はIndra Sofian氏によって投稿されました。
Webサイトの優れたデザインというと何を思い浮かべますか？ 私にとってはAirbnb（エアビーアンドビー）です。
トップページに人目を引く動画があったり、カラーパレットの構成が良いだけでなく、優れたユーザー体験を考えて設計されているように思います。
では、優れたユーザー体験の定義とは何でしょうか？
1つの条件は、ナビゲーションや検索機能が優れていることです。ユーザーの求める情報を提供することが、ビジネスで使われるWebサイトの主な存在理由だからです。
もしユーザーが必要な情報を得られない（または情報がわかりにくい）としたら、そのサイトは失敗作です。 ユーザーが必要なときに必要な情報を得られるように、レイアウトとコンテンツを上手く組み合わせましょう。 他にも考えるべき事は多くあり、失敗も数多く経験するかもしれません。
最初は急がず、まず土台となるコンテンツから作り始めます。 ワイヤーフレームから始めて、次にイテレーション（反復型の短期の開発サイクル）を実践し、最後にインタラクティブなモックアップを作成します。
なぜワイヤーフレームを作るのか？
ワイヤーフレームを作るメリットは、デザインのアイデアを形にしたり、イテレーション（反復型の短期の開発サイクル）を行うのに役立つことです。
ワイヤーフレームはサイト完成時のコードを備えたものではなく、静的な試作デザインです。さらに動作性もテストできるインタラクティブなワイヤーフレームであれば、完璧です。
ワイヤーフレームを作るときには、重要なデザイン要素を改良するために、失敗や試行錯誤があってもいいでしょう。 またWebサイトにはそれぞれ目的があるものですが、ワイヤーフレームを使うことで、目的に最も合ったフレームワーク、コンテンツ、デザイン要素を作成できます。
たとえば、Airbnbは旅行サイトでは、ユーザーに良い旅先と良いホスト先の情報を提供することが目的です。ヘッダーからリスト構造に至るまで、この目的に最適なデザインが考えられています。
また、デザインの要はコンテンツです。ユーザーがWebサイトに訪れるのは、美しいデザインを見るためというよりも、情報を得るためです。
UIデザインの不変の原則
ワイヤーフレームやモックアップを使った練習に入る前に、もう一度Airbnbの優れた点を考えてみましょう。
1.質の高い画像で注目を集める
多くの人は旅行しようと考えるとき、おそらく詳細な計画やレンタカーの情報よりも、視覚的なイメージが先に思い浮かぶはずです。
こうした傾向を踏まえて、視覚的なイメージを活用しているのがAirbnbです。
ホスト先のリストなどすべてのコンテンツにおいて、画像がテキストより優先して使われています。レイアウトの大半は画像で占められていて、画像の隣に太文字の使われた要素やボタンを置いて、ユーザーがクリックしやすいようになっています。
ヘッダーには、Airbnbの利用者が世界の旅先で異文化や多様な環境を体験している動画を使っています。これこそまさにユーザーが旅行サイトで見たいと思っているものです！フォームに文字を入力してホスト先の予約をするだけではなく、実際の旅行を疑似体験できるのです。
2.コンテンツをシンプルにする
旅行の計画は、複雑で煩わしいものになりがちです。旅行先選び、行く場所の下調べ、滞在期間、ドライブの経路など考えるべきことが多くなります。
Airbnbのサイト上ではこうした情報を整理して、最も関連性の高い情報に的を絞って提供しているのです。 データ入力用フォームはシンプルで、ホストの使うボタンも見つけやすいです。
また、リスト構造もブラウジングが容易になるすっきりした設計です。 ページには要素がリスト構造で並べられ、両端には余白が設けられているだけで、広告など余計な情報もなくすっきりしています。
背景とフォントのコントラストが高く、コンテンツの文章もシンプルな語り口です。トップページで冗長な文章が続くこともなく、各コンテンツはシンプルな画像とその上の太文字のテキストから構成されています。
3.最も重要な機能を強調する
Webサイトは、最もよく使われる機能へのアクセスが、最も容易になるようにデザインするべきです。 ユーザーがサイトを訪問する理由を考えましょう。 たとえばAirbnbでは、ユーザーはホスト先を探すためにサイトを訪問しています。そのため、次のようにCTA（コールトゥアクション）が上手く使われています。
- トップページの中央には、ユーザーにホスト先を案内するためのボタンが、CTAとして配置されています。
- また検索バーのボタン（「Search」）には、よく目立つピンクの色が使われています。検索バーの背景に、透過性のある黒い色を置くことで、検索バーをCTAとして一層目立たせています。
- ヘッダー中央に動画再生ボタンが配置されていて、ユーザーがクリックすると、旅行体験の動画が再生されます。
- また、Airbnbでは、ホストになることに興味のあるユーザー向けにも、「ホストになる」というボタンやホスト収入を示したブロック要素によって、わかりやすく情報を提供しています。
AirbnbのWebサイトを作るためのステップ
ではAirbnbのWebサイトを作ってみましょう。最初はワイヤーフレームです。 ワイヤーフレームを作るメリットは、レイアウトに必要な要素を組み立て、全体としてどのように機能するかを試せることです。
Airbnbのサイトをまず静的なワイヤーフレームから組み立ててみましょう。
1.基本のレイアウト
私の方法では、まずレイアウトの骨組みを作ることから始めます。「 コンテンツワイヤーフレーム」として知られるこれらのボックスは、サイトのページ上の各要素を表しています。
このステップでは、コンテンツ、視覚的な階層構造を主に考えましょう。 これらのボックスを使って、ナビゲーションバー、ヘッダーなど各要素の配置を試してみます。
この骨組みを作っておくことで、実際のデザインを詳細まで考えなくても、全体のレイアウトを考えることができます。
- 新規のデザインを作成するときには、ボックス型のワイヤーフレーム同士を矢印でつないで関係性を示し、コンテンツの全体構造を把握するのもいいでしょう。
- 既存のデザインに修正を加えるだけであれば、基本のデザインは完成しているので、最初からモックアップ作成のプロセスに進んでもいいでしょう。
2.ヘッドライン（見出し）とヘッダー
見出しとヘッダーは、重要な要素です。 見出しはユーザーの視線を瞬時に集められるような、はっきりとした表現力のあるデザインがいいでしょう。
たとえば、Airbnbでは「Live There（暮らしてみよう）」という見出しを使っています。Airbnbは旅行先のホストを紹介するサービスなので、「travel there（旅してみよう）」や「visit there（訪れてみよう）」ではなく、このキャッチコピーが合っているのです。
次に小見出しとして、「現地のホストのお家に宿泊して、191か国以上で暮らすように旅しよう 」を作ります。ユーザーに、Airbnbの体験やどこからでも使える利便性を伝えられます。
ヘッダー画像は、ユーザーが最初に目にするものです。ヘッドラインとのバランスが悪かったり、気を散らすような画像だとユーザーを失いかねません。ページにふさわしいヘッダー画像を使いましょう。
Airbnbでは、ユーザーが世界中で魅力的な旅をしている動画をヘッダーに使っています。
3.CTA（コールトゥアクション）
CTA（コールトゥアクション）は、ユーザーを必要な動作へ上手く誘導できるデザインにすべきです。使う文言は、「続きの内容はコチラ」のような曖昧なものではなく、明快にすべきです。
デザインとしては、緊急性が高いことを上手く伝えられるものがいいでしょう。 AirbnbのCTAは明快かつ詳細です。検索バーでは、「場所」「日時」「宿泊人数」などの要素、ピンク色の「探す」という要素を使って、わかりやすく構成されています。
CTAをヘッドラインの下に配置するのはよくあるレイアウトですが、Airbnbのサイトではこれが特別な効果を発揮しています。つまり、ただ目立つだけではなく、ユーザーはヘッダーの魅力的な動画を見ながら、検索バーで旅行のプランを検討できるのです。
4.コンテンツのブロック
次にページのコンテンツを作ります。ここでは実験的に一部を作ります。 Webサイトの作成で、ページにヘッダー以外の要素も入れるときには、一番上のコンテンツに注目を集めるようなデザインにします。
このブロックは、ほとんどヘッダーと同一化した要素と見なせます。
Airbnbのユーザーには、「旅行者」と「ホスト」の2タイプいます。ここで作成したブロックは、「ホスト」向けのものです。ブロック内に小さなCTAの要素（see what you can earn：「収入を見る」）を配置しています。
5.ナビゲーションバー
ナビゲーションバーは小さいながら、ユーザーの案内役として非常に役立ちます。ユーザーがサイト上で探している情報を見つけられない場合にも、最初に使うのはおそらくナビゲーションバーです。
ナビゲーションバーに使うアイコンの数は限定しましょう。ナビゲーションバーのスペースは限られているので、あまり多くのアイコンを詰め込みすぎると、ユーザーを疲れさせる原因となります。
それに見た目にもごちゃごちゃした感じになります。 ユーザーを案内するのに必要十分なアイテムだけでいいのです。
たとえばAirbnbでは、4つのアイコンに限定しています。
- 「ホストになる」は、ユーザーの約半数に向けて作られたものです。
- 「メッセージ」では、ユーザーに重要な通知を送ります。
- 「ヘルプ」は総合案内です。
- 「アカウント」はユーザーの情報管理のためのものです。
6.インタラクティブな設計にする
インタラクティビティ（動作性）は、ユーザーエクスペリエンスの要です。 インタラクティブな設計にするには様々な方法がありますが、ここではページ上で最も重要な、CTAの要素に動作性を加えてみます。
モックアップの作成では、すべての要素にインタラクティビティを加える必要はありません。完成したサイトをイメージするのに十分な程度で構いません。また、少なくとも5人のユーザーに試用してもらいましょう。
ドロップダウンメニューを追加して、ページ上にポップアップウィンドウで表示されるようにして、ユーザーがボタンをクリックしたり、マウスのカーソルをボタンから移動した時に消えるようにしてみました。また、マウスが検索ボタンの上にホバーした時に、ボタンの色が変わるようにしています。
このような小さな工夫を加えることで、ユーザーにボタンに気づいてもらいやすくなります。 上の画像は、検索バーの「目的地」にドロップダウンメニューを加えてみたものです。
次のステップへ
これですべてです！ 今回は、コンテンツのワイヤーフレームを作成し、イテレーションを実践し、動作性を備えたモックアップへと作り変えるステップを紹介しました。
Webサイトを作るときの、ワイヤーフレームとモックアップの作成スキルは、きっと他の場面でも応用できます。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
