【UIUX】20170528_Airbnbアプリをトレースしてみた

前回の予告通り、今回はairbnbアプリをトレースしてみました。

トレースも少し慣れてきた感じする。

 

airbnbってそもそも自分も使ったことないんですが、

個人が旅行者に宿を貸す、数年前からどんどん話題に、人気になってきてるCtoCマッチングサービスです。

そんな攻め攻めサービス。UIも学ぶことが多いハズ…。

 

アプリをインストールして早速驚いた↓

f:id:ayaconasuta:20170528144849p:plain

つええええええorz 

最初の設定画面は無意識にトントンYesしちゃうものだし、やりすぎに見えるけどボタンが柔らかいデザインなので、自然にオンにしちゃうかも。

 

さて、粛々とトレースをしてみました。

まずガイド引いてて思ったけど、美しいなー

f:id:ayaconasuta:20170528145752p:plain

  • この均一感!!これだけで見やすいページってわかる…。

(トレースしたもの↓)

f:id:ayaconasuta:20170528152049p:plainf:id:ayaconasuta:20170528152001p:plainf:id:ayaconasuta:20170528152223p:plain

レイアウトがとても多かったので、まずは下ナビ「探す」から3画面選んでみました。

 

【気づいたこと(動的)】

  • 起動時の画面はちなみに「旅行」からも「探す」と同じ画面にアクセスされる>>「探す」ページへのアクセス方法は複数ある
  • 上ナビはスクロースによってサイズが3段階変わる(背景:緑&検索フォーム:3段>>背景:緑&検索フォーム:1段>>背景:白&検索フォーム:なし。)>>ちなみにスクロールのスピード感でも変わる。ユーザーの動きと画面の連動感が触ってて楽しい。
  • 中間のナビ「おすすめ…」を移動すると、選択ライン(白い棒)もスライドする。

階層構造、もうちょっと深掘りすると面白そうなのでそれはまた次回…

 

【気づいたこと(静的)】

  • ユーザーが宿泊先を「探す」段階においては、選択肢はタイトル(と金額)のみで、情報を最小限にしている。
  • 余白が多い。>>最小限の情報量とスペースをうまく使って、判読生を高めている。項目の横間隔はだいたい12px、縦間隔はだいたい42~50px。
  • 横スクロールのある箇所(注目の目的地等)は、ファーストビューで横に展開されることがわかるように、次の項目をチラ見せしている。
  • フィルターを画面中央下部に配置しているのも、ちょっと珍しい。>>ちなみに、上の検索フォームと検索条件は重複してないっぽい。
  • 下ナビ(Y:0.5px, Blur:0px)のシャドウを除くと、中央ナビの「おすすめ…」選択ライン(Y:1px, Blur:2px)と、フィルター(Y:1px, Blur:4px)にシャドウががっつりかかっていて、高さが高めに配置されている。
  • 欧文フォントは、Circular Std。$がかわいい。

 

airbnbはもうちょっと掘り下げたいので、宿の詳細・その他の画面もトレースしたいところです(^u^)♫

【UIUX】20170514_Facebookアプリをトレースしてみた

どうも、ayaconasutaです。ひっそり更新。

UIデザイナーになるべく日々鍛錬を重ねている(つもり)です。

 

前回のinstagramに続き、今回はfacebookアプリをトレースしてみました。

facebookは頻繁にデザインを変更すると言われていますが、

実際トレースしている間にも変更していました。(一時的かもしれませんが)

 

トレースしたのは、

  • フィード画面
  • お知らせ画面

  • メニュー画面

  • アルバム画面

の4つ。早速見ていこー。

 

f:id:ayaconasuta:20170514140306p:plainf:id:ayaconasuta:20170514135149p:plainf:id:ayaconasuta:20170514152255p:plainf:id:ayaconasuta:20170514140833p:plain

※左から、⑴フィード画面、⑵お知らせ画面、⑶メニュー画面、⑷アルバム画面

※アルバムは個人情報満載だったので実際の写真は載せていません。

 使用フォント...SF UI Text、Hiragino Sans

 

◼︎気づいたこと

その1.

instagramと同様、1つのまとまり内での要素が必ずしも均一サイズではなかった

例えば⑵お知らせ画面。

7つのお知らせが並んでますが、一番上だけサイズが違う。それ以外は高さ80pxなのに対して、一番上「リマインド」は81.5px。

どこで幅をとっているかというと、微妙に行間を広くとっているように見受けられる。

f:id:ayaconasuta:20170514143923p:plain

 ※一番上とそれ以外のお知らせを重ねてみると、微妙に一番上の方が行間の幅をとっている。

パッと見てわかるレベルの違いではないゆえ、なかなか難しい。

可能性として、1.5pxの拡がりが余裕を持たせ、窮屈感を与えないからが考えられる。

もう1つ、アルバム画面。

こちらは、123.5px*123.5pxの画像(小)が3列、244.5px*375pxの画像(大)に並んでいるけれど、スキマは縦も横も2pxと2.5pxとまちまち。 

instagramと比較すると面白い。

相違点として、facebookは画像のレイアウトが大小ランダムに配置されていることが見てすぐにわかるが、スキマのサイズが違う。(instagramは1px均一)

 

その2.

Facebookって、こうグレーの背景レイヤーに、白のコンテンツが乗っているイメージなのですが、トレースしていて、画面によって背景グレーの色が違うことにも気づいた

(1)フィード画面では、グレーが#D3D6DAであるのに対し、

(3)メニュー画面では、グレーが#F2F2F2。(薄いw)

上の自分のアイコンフィールドとのスキマがそれぞれ8pxと38pxで、確かに8pxが薄いグレーだと境界がぼやけるし、38pxが濃いとそこに注意がいきそう。

 

そもそもスキマのサイズの違いは、こんなところかな。

(1)フィード画面

・「投稿を促したい」ので「今なにしてる?」フィールドを大きし注意を引く一方で、、ファーストビューで他の投稿コンテンツを把握できるくらいのサイズに収めている。

・フィードに載ることを理解させるため、他のコンテンツとの区切りは狭くしている。

(3)メニュー画面

・プロフィール画面に飛ぶためのリンクなので、小さい。

・自分のアカウントでログインしている、という帰属感を出すため、他のメニューバーとは間を空けサイズを変える等して、差別化している。

 

 まだまだ気づいた小さなこだわりはありつつ、くどくなるので一旦ここまで…。そのうちinstagramfacebookの詳細比較をやりたいな。

 

次回はTwitterか、気分を変えてairbnbをトレースしようと思います。

【UIUX】20170502_instagramをトレースしてみた

はじめまして。

UIデザイナーを目指してデザイン勉強中の者です。

(今はコンサル的なことをやってます。)

このブログでUIUXの気づきなど挙げていきたいと思います。

 

「デザイン力を高めたい」と一口に言っても、色々な方法があるけれど、

最も費用対効果の高い方法の1つが、「良いデザインを真似ること」。

 

 ・・・とあちこちで耳にしたので早速instagramをトレースしてみた。

 

<使ったツール>

<やり方>

  1. instagramをスクショする。
  2. PCに1を取り込む。
  3. sketchにアートボードを2つ作成する。
  4. 3の片方に2を貼り付け、大きさを調整する。(375px*667px)
  5. 1pxが見えるくらいに拡大しながら、4で貼り付けた画像をトレースする。
  6. 都度都度5を、もう片方のアートボードにコピペする。

※写真は、ピクセルを図りながら切り抜きコピペ。

※アイコンはillustratorでトレース。

※フォントはネットで調べる。見つからない場合は同じor似たものを探す…。(これが面倒大変💦)

 

<完成品/気づいたこと>

今回は、instagramのトップ(渡辺直美さんのものを借用)とフィードをトレースしてみました。ほぼズレなくできたかと思います。

 

【トップ】

f:id:ayaconasuta:20170504182133p:plain

  • 使用フォント…(欧文)SF UI Text >>San FranciscoはiOS9以降iphone等で使用されているフォント。2年くらい前に出て、クセがなく見やすい。和文は自信はないが、Hiraginoに似ているので今回はHiragino Sansを使用。
  • リンクのカラーは暗めの青(#003569)を使用>>リンクだと判別できるが、暗めの色を使っているので目立ちすぎない
  • ぱっと見ブラックに見える色は#262626グレーを使用。>>ブラック100%よりも少しグレー(80%くらい)の方が周りと馴染みやすく、見やすいらしい…と昔聞いた。
  • 下タブは、均等の大きさに見えるが、若干大きさが違う。ハートが高さ約18px(横は21px)、虫眼鏡とホームアイコンがほぼ一緒で高さ21px、自分アイコン23px、画像追加ボタン25px。>>位置・大きさから追加ボタンに目線が行くようにデザインされている。
  • 3列の画像は、左124.5px*124.5px・スキマ1px・中央124.5px*124.5px・スキマ1px・そして右124px*125px。375pxだと、単純に125px*3にしたくなるが、あえて1pxのスキマを優先させているのだから、このスキマにこだわりが感じられる。>>確かにスキマをなくしてみると、窮屈で煩雑な印象を受ける。かといってスキマが2px以上だと、写真のインパクトが下がり余白が際立って見える。

f:id:ayaconasuta:20170504200410p:plain

 ※なんか窮屈感。くどめ。

f:id:ayaconasuta:20170504200531p:plain

※2pxも見やすそうではあるけど…見慣れてないからか1pxのがきれいね。

 

【フィード】

f:id:ayaconasuta:20170504174412p:plain

  • 写真下のハートアイコンと、下ナビのハートだと、若干前者の方が1pxほど大きい。太さも写真下の方が若干太め。>>パッと見た感じでも、写真下アイコンの方が目立つようにできている。コミュニケーションの促進?
  • 紙飛行機のアイコンも合同な三角形を二つ重ねたものかと思ったけど、ほんのちょっぴり下の三角形の方が大きい。>>理由はよくわからないけど、上の辺中心と、下の三角形の角がなんとなく揃っているような…。安定感が出るのかと思われる。

f:id:ayaconasuta:20170504200139p:plain

  • いいね、と名前のフォントはウェイトが高め。

【全体】

  • 意外だったのは、位置やサイズのpxが奇数・小数点 多用していたこと。もちろん、小数点.3333などはなかったが、webデザイン・アプリデザインは偶数で収める方が良いと聞いたこともあったので驚き。7割以上が奇数サイズだった。(解像度に関係している?また別途調べる予定…)
  • 今まで同グループ内であれば、サイズ・ウェイトは揃えることが基本だと考えていたが、情報の強弱をつけたい場合は、違和感がない程度にサイズを大きくしたり、ウェイトを高くしたりして注意を引くようにデザインされていることがわかった。 e.g. 下ナビのアイコン
  • UIデザインにおいて、今まで「揃えること」が美しさにつながると思っていたが、全てをキリよく揃えるのではなく、どこを揃えると美しくなるのかという視点を持ってデザインすることが重要だとわかった。 e.g. 写真のスキマ1px

 

第1回目のトレースは以上です〜。次はFacebookを予定。