見出し画像

UIトレース#001

トレース実践結果

(左)アプリ画面 (右)トレースした画面

UItrace#1比較

【トレース概要】

・ツール→Adobe XD

・トレース対象アプリ→Pinterest


【トレースでやりきれなかった部分】

・フォントの統一

→WindowsPCでトレースを行ったところ、UI画面で使われているヒメラギゴシックを使用できなかったため、フォントを統一することができなかった。ヒメラギゴシックはMacにデフォルトで入っているがWindowsで使おうとすると、数万払って購入する必要があるため、断念。(他の人どうやっているんだろう?みんなMac勢なのかな)

・写真の明度

→アプリ画面の写真は、オリジナル写真から明度などが調整されていた。その調整度合いがわからなかったため、目分量で調整せざるを得なかった。

(上)オリジナル写真 

(左下)アプリ画面の写真 (右下)トレースした画面の写真

UItrace#1_画像比較


【トレースで気づいたこと】

・黒背景→画像で、画像を見やすくしている

→画像が色彩豊かなため、黒背景に対しての画像のコントラストで、見やすくなっている

・靄をかけた写真→白文字で、文字を見やすくしている

→【トレースでやりきれなかった部分】でも書いたが、掲載されている写真には靄みたいなものがかけられている。恐らく、明度・彩度を下げて、白い文字が映えて、読みやすいようにしているのだと思う。

・文字が灰色がかった白色である

→文字の色が#FFFFFFではなく、#EFEFEFになっている。

(上)#EFEFEF(アプリ画面の文字) (下)#FFFFFF

グループ 8


【次回トレース】

・もっとアプリの機能の特徴にも注目する

→アプリ画面のグラフィックな部分のみに注目して分析していたが、前後の画面とのつながり、タブの種類など機能の部分にも注目して分析したい

・できない部分は潔く諦める

→トレースの目的は、デザインの忠実な再現ではなく、デザインの目的、考え方を学ぶことである。今回は、フォントの一致や画像の明度の一致を目指して、かなり時間がかかってしまった。諦めるところは、スパッと諦めるようにしたい。


この記事が気に入ったらサポートをしてみませんか?