目指せ！UIデザイナー ～UIトレース編③〜

こんにちは。村田ばびです！

今日は旅行予約系サイトについて、
トレースと考察をしていこうと思います。

Airbun

アイコンは遂にマテリアルアイコンから引用しました。

Material Symbols and Icons - Google Fonts

・上部の行き先検索ボタンをクリックするとモーダルが出現します。その中にフィルター全てが集約されているおかげでスッキリとしたデザインとなっている。一番重要な役割を担っている箇所だと思うので、濃いシャドウが使用されています。

・色もほとんど使用していません。選択されたアイコンのみ赤になるぐらいでとてもシンプル。

・テキストに＃00000は使用していませんでした。
太文字も使用しておらず、主にブラック⇔グレーで強調したい部分を調整しているようでした。

・ボトムナビゲーションの『旅行』がAirbnbのアイコン！

・カルーセルの〇の大きさが違う！
スクロールしていくと両端の〇が小さくなり、センターの〇が一番大きい状態になる。（現在選択している写真が〇が大きくなっている。）


・固定ジャンルメニューが多すぎる！！51個ありました。。。
でもよくみるとピンポイント過ぎるジャンルばかり。気になって「羊飼いの小屋」で検索をかけてしまいました。主にイギリスで自然の中で羊に囲まれて宿泊できるところが出てきました。
最初は51個もあるメニューをスクロールするのかなと思いましたが、こうやって自分の中になかった新しい発見ができる場所があっていいのかもと思いました。

・情報量が多いはずなのに、かなりスタイリッシュなUIになっていて素晴らしいと思いました。さすがAirbnbです。

Booking.com

位置情報から現在地から近いホテルが検索されています。笑

・あまり色を使っていなかったAirbnbに対して、青と黄色の組み合わせがとても印象的でした。海、夏、活発を連想させる色で爽やかです。

・Airbnb→宿　Booking.com→宿、飛行機、レンタカー、タクシーが予約できる。

・Airbnbでは隠れていた検索画面が、Booking.comでは最初から表示されている。固定メニューで選択しているジャンルによって検索画面が変わる。

・メニューやカードにシャドウがかかっていて、シャドウがたくさん使われていました。

・こちらも＃000000は使われておらず、ブラック⇔グレーで強調したい部分を調整していました。

・基本フォントサイズ12。

・ボトムナビゲーションはAirbnbとほぼ一緒。Airbnbの「受信トレイ」は
Booking.comでいうと上部の位置（鐘のアイコン）

・宿の検索結果、情報量が多いからかサイドの余白4pxで幅を多くとっている。

・宿の検索結果、Airbnbではクリックしないと出てこなかった情報が検索一覧の状態で表示されている。ユーザー視点だとこちらの方が分かりやすいのかもしれない。

数日トレースを重ねてきて、世の中のアプリの共通点がなんとなく分かってきましたが、その中でも一番旅行アプリが勉強になりました。

膨大な情報量の中でいかにユーザーにとって見やすく、使いやすいと思ってもらいながら、一つの答えを導きださなければいけない。

デイトラでのロードマップでも確かにトレースをしてください、と言っていました。しかし、せっかちさんなので早く完走したかったのと、自分の作ったデザインで早く結果を出したかったという理由であまりトレースをしませんでした。

結果、

トレースはした方がいい。

今までビジュアル観点でトレースしてきましたが、設計の部分に関してもっとフォーカスしてみていきたいと思いました。