UIトレース #001「Twitter」

みなさん、こんにちは🙋
rikuyaです。

UIトレース第一弾になります。
「Twitter」をトレースしてみて、気づいたことを書いていこうとおもいます。
ちなみに今回のお題は、”BONO”で提案されているものになります。

ーーBONOとは？

YouTubeでデザインのを発信している、カイクンさんが運営しているUIとUXの学習のコミュニティです。
BONOのコミュニティリンクはこちらです。

BONO(ボノ) | プロと学べるUIとUXのデザインコミュニティ

01. ホーム画面

左から元画像、余白入り、トレース画面

• Twitterはホーム画面では、一目で沢山の情報を取得できると感じました。

• 文章で簡潔なものが多いので、1投稿に滞在する時間は少なくなる印象。

• 文字制限を設けているのは、"スクロールした際に投稿コンテンツが長いとストレスを感じる"と設計していると感じました。

• メインコンテンツは「投稿」
  「投稿」に必要な要素：アイコン、ユーザー名、ユーザーID、投稿時間、本文、コメント、リツイート、いいね、共有、ツイートへの詳細設定

02. フォント

左から使用されているフォントサイズとコメント

• フォントサイズのジャンプ率は少ないと感じた。

• 太さの違いで意味の違いを表現している。

• ユーザー名が一番強調されているので、Twitterでは誰がつぶやいているを重視している。

03. 余白

• 余白のバリエーションは少ない印象。

• バリエーションが少ない分、シンプルですっきりしているので、可読性の高さに結びついていると感じました。

04. カラー

• BGカラーは真っ黒ではなく、少し青みがかっている色になっている。
  ⇨テーマカラーとの相性がよく、バランス取れている心地いい画面になっている。可読性も高くなっている。

まとめ

Twitterではアイコンからコメントを言っているようなグラフィックで、誰がなにを言っているかすぐわかるなと感じました。
コンセプトの"つぶやき"を意識したUIになっていて、統一感がありました。

最後まで、見てくれてありがとうございます！