初めまして。UIデザイン勉強中のマサキ(@Masaki_4_5)です。

UIデザイン、とりわけiOS appのデザインスキルを得る一番の近道を探した結果、良いデザインから吸収するのがまず大事という事を聞きました。

このように、sketchで優れたアプリのUIトレースをし、その工程でページの遷移やそのUIになった訳を考察して行くことがスキル獲得にはもってこいらしいです。sketchさえあればお手軽ですしね。

早速Twitterのプロフィール画面とタイムラインの２画面を、Sketchを用いてトレースしてみました。Sketchを用いたトレースについてはネットで既に多く説明されていたのでつまずく事はありませんでした。

Twitterをトレースして気がついた事

左：元画像　右：トレース

1.フォントについて

Twitterにはinstagramなどと同様に、和文には"Hiragino sans"、英文には"SF Pro text"というApple純正のシステムフォント（https://developer.apple.com/fonts/ ）　が使われていました。

文字をトレースしていてまず気になったのがフォロー・フォロワー数の表示部分。数字部分はSF Pro textで書かれていますがカンマはHiragino sansです。

カンマまで英文で書いた物と比べてみます。カンマが英文だとその部分の縦の幅が広がってぼんやりしますが、和文の方が数字が締まって見やすい印象です。或いはカンマを含めた記号は和文で書くというルールがあるのかもしれません。

　次にフォントのサイズについてですが、プロフィールやツイートの文章は基本15pxで統一されています。しかし和文と英文が同じ文書内に入る際に和文が14px、英文が15pxと和文が1px小さく表示されます。

意図を考えてみましたが、上ツイートの通りどうやらこれはシステムフォントの仕様のようです。そしてその仕様の意図には和文と英文を同じピクセル数で表示させた際に英文の小文字に対し和文が大きく見えすぎないようにという点があるのではないかと思っています。

また、Twitterは投稿文と同じフォントサイズで投稿時間（何分前かなど）が表示されています。対してinstagramでは投稿時間は3.5px分小さく表示されていました。これはTwitterでの投稿時間が、ツイート内容や名前に次いで見られている物であるからでしょうか。確かにリプライする際などに気にするのでこのサイズで納得できます。

Twitter:投稿テキストと同サイズ

Instagram:3.5px小さい

2.色について

Twitterは主に白、黒、グレー、青でデザインされています。トレースしていて気がついたのはユーザのアクションが及ぶ部分よりもフォーマットの影が薄くされている事。例えばこのバー、

選択している文字やアイコンが青色になっていますがそれ以前に選択されていない状態が黒ではなく薄いグレーです。そのおかげでツイート内容の黒いテキストを見る際にチラつかず、差別化がされています。

また、アイコンで使われている青（＃33ABF4）ともう一つ青色が文章内で使われています。リンクを書いた際にそのテキストがアイコンに比べて少し濃く暗い青（＃1291E0）で表示されます。これは、アイコンと同じ色では背景の白に埋もれてしまうため、より濃い色で可読性を高めているのだと思います。パッと見では気づかない程の差なので全体としては青一色で統一感が保たれています。

3.配置,マージンについて

プロフィール画面では左右17px、タイムラインでは左右16pxの余白が取られています。

またアイコンサイズは32px、52px、68pxと4の倍数pxになっていました。自分が見つけたのはそれくらいでしたが、Twitterのマージンの取り方の意図はまだまだ気になりまね。

まとめ

トレースをしている中で、なぜこのパーツがそこにあるのか、なぜこのデザインが良いと自分は思うのか、など様々な疑問が湧いてきます。そしてそれについて考えるプロセスが今まで体験したことのない物で、この記事のように言語化するのはとても難しいです。ですがデザインにはそれぞれ意図理由があると思うのでこれを機に良いな~！と思ったデザインを解剖して、アウトプットしようと思います。今回はスクショの１画面の中にあるデザインばかり考えてしまいましたが、今後はプラグインのProttを用いてその前後のページ遷移も含めて吸収したいです。