TwitterのUIトレースをして学んだこと
こんにちは、デザイナーアシスタントの藤田です！
デザインスキルを上げるため、人気アプリのUIトレースを行いました。
今回は、「Twitter（iOS）」のUIトレースで得た学びや気づきを書いていきます。
色
プライマリーカラー
プライマリカラーである青は、4パターンありました。
テキストリンクの色は、彩度と明度が低く可読性を高くしている事がわかります。
また、非活性ボタン用の色もありました。活性ボタンを透過し非活性ボタンとして表示することもありますが、Twitterは非活性の色を使用しています。
「透過したボタン」と「非活性の色を使用したボタン」でどういった違いがあるのか比べてみました。
（上）透過したボタン、（下）非活性の色を使用したボタン
透過したボタンを見ると、テキストと背景色のコントラストが強いです。無効状態でも操作する可能性がありそうです。
それに比べ非活性の色を使用したボタンは、テキストと背景色のコントラストが弱いため、無効状態のボタンとわかりやすいです。
透過するより非活性の色を使用する方が、誤操作を防げることが分かりました。
グレースケール
グレースケールは5色あり、グレーにプライマリーカラー（青）を加えた色で構成されています。
まとまりのある色を使用することで、アプリに統一感を出しています。
文字
フォント
フォントはシステムフォントを使用していました。
- 英字・数字：SF Pro
- 和文：Hiragino Sans
フォントサイズ
フォントサイズは Human Interface Guidelines (Typography) 通りの標準サイズを使用していました。
また、「和文」と「英字・数字」でフォントサイズが異なっており、「和文」は「英字・数字」より1pt小さいフォントサイズになっていました。
フォントサイズでどういった違いがあるか「全て同じフォントサイズ」と「和文を1pt小さくしたフォントサイズ」で比べてみます。
（上）全て同じフォントサイズ、（下）和文を1pt小さくしたフォントサイズ
和文を英字・数字より1pt小さくすることで、文字の大きさが揃いました。
調べたところ、システムフォントの仕様で和文はフォントサイズが約1pt小さくなるようです。読みやすいようiOS側でフォントサイズを調整していることがわかりました。
リツイート数や動画視聴回数の表記は、数字を単位より太くしていました。
- 数字：Regular（SF Pro）
- 単位：W3（Hiragino Sans）
余白
8の倍数
画面両端の余白のほとんどは、8の倍数で設定されていました。
- 16px
- ホームタブ画面
- ツイート作成画面
- アカウント編集画面（モーダル）
- 32px
- ドロワーメニュー画面
- タイムラインコンテンツ変更画面（モーダル）
ただ、FAB周りの余白は12pxで設定されていました。FABはタイムラインの上に位置しているため、余白が大きいとタイムラインの邪魔をする可能性があります。また、余白が少ないとタップしにくいです。タイムラインを大きく見せつつ、タップしやすい位置を考慮し12pxの余白を設定したと考えます。
余白の値が違うモーダル
アカウント編集画面のモーダルだけ他のモーダルと余白の値が違いました。
（左）アカウント編集画面のモーダル、（右）通常のモーダル
色々なモーダルを確認してみると、32pxで設定されているモーダルのほとんどが比較的新しい機能でした。そのためデザインも新しいものが反映されています。
それに対し、アカウント編集画面は昔からある機能のため、デザインが更新されていない可能性が考えられます。
機能の配置
ホームタブに置かれてる機能を見ていきます。
- ヘッダー
- ドロワーメニュー
- アカウント編集
- マイページ要素一覧
- 設定とサポート
- ページのトップへ戻る
- タイムラインのコンテンツ変更
- ドロワーメニュー
- タイムライン
- FAB
- アカウント編集（ホームタブ長押し）
アカウント編集の機能は、2ヶ所に置かれていました。
アカウントを使い分けている人は、ホームタブを長押しした方が切り替えは簡単です。ドロワーメニューにも置いている理由は、その機能に気づかない方を考慮したからかもしれません。
ヘッダーには、使う頻度が少ない機能があり、FABやタブなど高頻度で使用するものは、画面下にありました。このアプリにとって重要だと位置付けている機能がわかります。
触覚のフィードバック
タイムラインのコンテンツ変更は、コンテンツを選択した後モーダルからホーム画面に戻ります。その時、バイブレーションのフィードバックがありました。触覚を利用したフィードバックは、視覚をよりメイン機能に集中させるための工夫をしていると思いました。
さいごに
今回は、Twitterのメイン機能であるホームタブ画面を中心にトレースを行いました。UIを分解し考察することで、見るだけでは分からない気づきや学びが沢山ありました。
引き続き、他アプリのトレースも行いデザインの引き出しを増やしていきたいと思います！
今回の内容が少しでもお役に立てれば幸いです。
