見出し画像

週1UIトレース Airbnb編

Airbnbのアプリ(iOS版)のホーム、お気にり、物件ページをトレースしました!
こんな感じ!

パッと見てホワイトスペースが多いなと思いました!それでは詳しく見ていきましょう!

詳しく見てみる

ホーム

お気に入り

物件ページ

使っている色

実際にトレースをしてみて思ったこと
⚫︎文字のメリハリがある
⚫︎画像を大きく使っている
⚫︎色がシンプル
⚫︎やはりホワイトスペースが多かった

文字のメリハリ
トレースしたところだけでも12〜30pxと文字サイズの幅がすごく広いんです。だからここまで幅があると重要だったり見てほしいところが一発で分かって良いなと思いました。

画像を大きく使っている
やはり物件を紹介するサービスなのでどんな物件かを想像してもらうには写真はとても重要なはず。やっぱりホームに小さい写真がズラズラーっとあるよりは大きい写真があった方がアイキャッチできて良さそう。

色の話
パッと見た通りAirbnbはシンプルでした。配色はこんな感じかなと。圧倒的に色数が少ない。そしてホワイトスペースが多いので本当に見やすい!

最後にアイコンの話

配色もシンプルなんですけど物件紹介のアイコンもシンプルでしかも可愛いんです。まずアイコンたちがどんな意味合いなのか考えてみました。

何個かわからないものはありましたがこんな感じかなと。個人的にはテレビありとモニターが難しいところだなと思いました。また洗濯機と乾燥機がベースは一緒なのにちゃんと区別されているところが面白いなと思いました。
それでは答え合わせ!

わかりやすいように間違えていたところと調べたけどわからなかったところは色を変えて区別しました。

まとめ

●色もホワイトスペースのことも考慮してシンプル
●物件紹介のアイコンが効いてる
●画像をうまく使っている

この記事が気に入ったらサポートをしてみませんか?