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

第2回目はAirbnb！

（ せっかくなので、前回トレースしたInstagramとの比較も最後にやろうかな、と ）

Airbnbは創業者がデザイナーということもあって、ワクワク、、、！

では、早速〜！

まず注目したいのがこの綺麗さ！！！

      　     　

                  

               　

               　     

                

・ TRIPS以外のページでは、両端に全て24pxのマージンを設けているから綺麗に見えるのかな、、？

・フォントはCircular Stdを使っていますね。サイズは小さいのは9pxからで、大きいのは30pxまで。

ちなみにここからダウンロードできます。

Search results Circular Std - Font2s.com

・全体的に4の倍数を意識して設計されている印象が強いです

沢山ありすぎるので、横着かもしれないですけどまとめてドーーンと置いておきます

（見やすいようにこれだけグレーの背景でなんか違和感あるかもです、、、） 　

     　　

・所々に仕切りとして引かれているグレーのラインは全て、太さ１pxで色は#EBEBEB、長さは勿論『画面の幅（ 375px ）- 両端のマージン（ 24px × 2 ）』の327pxですね。

・角丸はEXPLOREのページでは2 ~ 4px、その他のページでは4pxで取られています

          

 ・次はアイコンのお話、、、

inboxの所のアイコン（上）とprofileの所のアイコン（下）なんですけど、直径が4の倍数になっていますね。

（ マージンが24pxであるっていう話とかと絡めて、4の倍数って書いてます、、、

単体だと16の倍数なので、どっちで書くか１分悩んだ、、、）

　    　

・タブバーは該当するページのところは色を変えてわかりやすくなっています。

ちなみにタブバーの高さは56pxで、これも4の倍数。

     

・エアビーは検索方法がめちゃくちゃ多くて、

前回のアップデートから「日程」「人数」が見える部分で設定できるようになって、

（ 色が変化することで設定したことが視覚的にわかるようになってる ）

そこから「宿泊先」「体験」「（ 注目の ）スポット」を基本に、

エアビーがオススメする体験とかスポット

（ Ex.アート＆デザインの体験、ロンドンの注目スポット etc... ）

とかからも選べるようになっている。

　　　

ちなみにこのEXPLOREのページ、ここ２週間くらいでこんな感じに少しずつUIを変えてきていて、、

（ ここも見やすいようにグレーを背景にしてます、、 ）

　  

いま現在、検索部分を固定でスクロールできるようになっています。赤く囲ってある部分ですね。

高さ90pxで、半透明のグレーの背景がスクロールすると出てくるようになっています。

（ 不透明度とか色とかは結構バラバラしてたので、拾えなかった、、、 ）

            

・そして、、、！　私がモヤっとしているのはこの部分、、！

なんでここの四角と四角のグレー具合（ Shadow？ ）が違うのかな、と。

黄色間のグレーと、グレー間のグレーだから、こんなに違う色に見えるのかな？とも思ったのでちゃんとその部分だけ引っ張ってきて比較したんですけど、やっぱり違うんですよね、、、

こんな感じに、、、

                 

このグレーにどんな意図があるのか、、、とても知りたい！

そんなにくっきりとしている訳ではないから、わかりやすくするためではない、はず。

教えてください、、、

で、最後にせっかくなので、前回やったInstagramのトレース結果と比較してみたものも申し訳程度に貼っておきます、、、

　　　　　　

おしまい。