AirbnbをXDで目視模写&ユーザーとして体験した事。

今回は、Airbnbを目視模写をしてみました。
キャプチャを左のアートボードに置いて、ルーラーの使えないXDでグリッドだけを出して右手のサラのアートボードに目視だけで再現してみました。


模写完了 左:キャプチャ 右:模写後

色も拾わずに、目視だけであわせてみます。
アイコンは特にめちゃめちゃ観察をしながら書いてみました。(airbのロゴは除く)

レイアウトはみたまんますごく整列されて居ますね。すごくシンプルです。両サイドに24pxのマージン、カード間は12pxのマージン。4px単位が意識されているものと思います。

全部白い背景ではなく検索窓の裏手に青紫系グレーのグラデーションが敷かれてました。


違うなぁと思うのは英数字。
とりあえず、Avanirっぽいなと思って当て込んで、Aの鋭さとか、bの形とか全然違うわと思いながら、多分持ってないフォントなのでそのまま。
トレース初めてからついにSFじゃないフォントに出会いました。


答え合わせ 左:模写 右:模写とキャプチャを重ねたもの

おっ!結構あってる感じする!(ちなみに重ね始める前に検索窓を答えに合わせてしまったのでそこはバッチリ合わせた後です。)

カラーはかなりシンプルな構成で、気持ちいいですね。カラーもぼちぼち近い数値で行けた。

欧文フォントはCircularというものらしいです。こちらの方のトレース記事を参照させていただきました。

【 skectを使ったトレースにおける考察 】Airbnb編


問題のアイコンもこうやって隣に置いてみると結構なコピー度で行けたような気がします。隣において書いたわけじゃなく都度、アートボードを行ったり来たりしながら書いたので、すごく時間かかりました。人難しすぎかよと思ってましたが、及第点。


目視模写をしてみたまとめ

この、目視トレースがすごく効果的かと言われるとなんとも言えない部分があると思いますが、ただトレースをするよりは観察をする力みたいなのはつくと思います。

ただ、トンマナというかUIってこういう感じ!というのを覚えるにはひたすらにトレースをして、脳より手が動くようになったらこの模写してみると効果的かと思います。ちなみに私みたいにトップページだけじゃダメで、下層までつらなる一貫性も体感するの重要です。


サービス利用者として経験したハプニングとサポート

私は、コーヒーのセミナーのために各地にいくことがありますのでAirbを使うことが増えてきました。いやーAirb便利ですねー。日本はホストに会わないでダイヤルロック錠で勝手にチェックインチェックアウトの貸切の部屋も増えてます。

先日3連泊でお借りしたところ、1日目から給湯器が故障してお湯が出ない状態でした。窓を開けているとものすごいガス臭。
早速ホストに連絡しましたが、ちょっとだけ給湯器に詳しい私からするとホストが見に来て、当日中になんとかなる問題ではないと判断しサポートに連絡しました。

ゲスト返金ポリシー

チェックイン24時間以内に、何か問題があればその証拠を提出して、返金してくれるというポリシーがありました。

証拠は出せないけど。とにかくサポートに連絡。
そうしたらものすごく気遣ってくれている口調でメールが来て、かつ電話で細かくヒヤリングをしてくれました。

・お湯が出なかったとのことなので銭湯代だします!
・代わりの部屋もリストアップします!
・当日中にあと2日の宿を見つけるの難しいとおもうのでクーポン差し上げます!(額は差し控えますが、十分なほど)

なにこの神対応。その間もホストとの渉外もしてくれて無事に返金対応となり、ものすごく印象のいい体験ができました。

実際には外出中に血眼で違う場所を探し、外出先から部屋に戻って荷物を取り、新しいホストのところへ移動するという労力はあるのですが、これからもairb使いたいなと思わせるには十分な対応でした。

エクスペリエンスはやっぱり自分がユーザーになってみないとなと。



エアビー 新規登録で 3500円クーポンもらえますので、よろしければ。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

よかったらサポートお願いします!(切実)

\ この小吉に全米が震撼 /
16

Thingo TKSK

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。