超マイペースにUIトレースやってみた

こんにちはデザイナーのわたなべ@asayowaです。

アプリケーションUIの考察をしたいのと、Sketch慣れしたいという目的で、UIトレースにチャレンジしてみました。まずは以下の有名どころから。それぞれ所感をまとめておきたいと思います。

1.Twitter
2.Facebook
3.Youtube
4.Instagram

・・・・・・・・

1.Twitter

5月5日 左:見本、右:トレース

最初はよく利用しているTwitterから。毎日眺めているはずなのに、新しく気付くことがたくさんありました。

メモ
・色(白・黒・グレー・水色・♥のピンク)のバランスと役割。アクセントカラーの水色はリンクやページの現在地を示す等
・ホームのアイコンが鳥の巣箱になってる!
・投稿のアイコンも羽根ペンになっている。徹底的な鳥モチーフだ!

余談ですが、採用面接にてTwitterの話になり、ついつい興奮して「Twitter大好きです!ツイ廃です!」と言ってしまいました。反省しています。

・・・・・・・・

2.Facebook

5月6日

ここからはトレースをしつつ、観察して感じたことも付け加えていくことにしました。

・・・・・・・・

3.Youtube

5月8日

Sketchにじわじわ慣れてきて、こちらのプラグインに関するブログを参考にCraftなどのプラグインを入れ始めました。Craftは簡単にダミー画像を入れることができて便利でした。しかもパパッと自動でトリミングしてくれるのでとても気持ちがいい!

メモ
・機能が複雑なためかアイコンだけでなく文字も入っているタイプのナビゲーション(日本語が長すぎるのか文字が入りきっていない…)
・下にスクロールするとヘッダーが格納される
・下のナビゲーションをタップすると赤い丸が広がっていくアニメーション
・Twitter、Facebookと比べるとナビゲーションアイコンのグレーが濃い。Youtubeカラーの赤#FF0000が強いからだろうか。

また、こちらのnoteを拝見して、使い心地を左右するインタラクションデザインの観察も始めることにしました。とても勉強になります。

・・・・・・・・

4.Instagram

5月10日

メモ
・背景に白と白に限りなく近いグレーを使って自然な奥行きを出している
・ヘッダー固定だけど白っぽいので画面が狭く感じないのかも
・Youtubeと同じでナビゲーションメニュー5つだけれど文字がない分スッキリした印象
・ストーリーズ流行ってるなあ。そういえば丸型のサムネイル、Netflixのプレビューでも見かけた。これからこのデザイン流行るのかな
・タイムラインの各投稿の区切りは余白のみでシンプル(Twitterはライン、facebookはカード型デザインで区切っている)


おわり

トレースを始めてまだ数点ですが、最初よりも意識して観察すべきポイントが見えてきました。やり続けていけば他サービスと比較して考察できそうだなと実感しています。

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

ビール飲みたい!
63

なべちゃん

nana musicデザイナーです。nana musicはスマホでつながる音楽コラボアプリ”nana”の開発・運営をしている愉快な会社です🚀昨年末インタビューしていただきました👉https://note.mu/nanamusic/n/n431b6c5d9ba1

UI勉強

3つ のマガジンに含まれています

コメント1件

トレースはいいやり方ですね!!僕も参考にさせてください!!
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。