見出し画像

【sketch】TwitterのUIトレースをして気がついた事

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

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


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

早速Twitterのプロフィール画面とタイムラインの2画面を、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のマージンの取り方の意図はまだまだ気になりまね。


まとめ

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

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

108

Masaki

多摩美2年デザイナー。メディアアート VJ 読書 映画。Twitter(@Masaki_4_5)

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
2つ のマガジンに含まれています

コメント3件

これ、漫画の練習と似てます。漫画もざっと技術を学ぶ際、名作をまるまる1話、ネームを模写したり、コマ割り、背景、トーン、集中線、描き文字、写植など、仕上がりそっくりに別の原稿に模写して(下書き→ペン入れ→仕上げまで)、技術を身につける方法があります。無論これだけでは、まだ売れる漫画を描けるわけではないですが、作家さんがものすごく細かいところまでこだわってることがこれでかなりわかります。
すごく勉強になりました。いくつか実践してみようと思います。
いえいえとんでもない! 「なんだか似てるな〜」って思ったんですよ。 職人さんが伝統芸能とか身につける時も似たようなものだと思います。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。