Cocoda!+で学んだUIトレースの方法

前回の記事では、Cocoda!+を通してできるようになった事を書きました。
今回は更に一つ詳しくお伝えできたらと思います。
また、Cocoda!+で私のメンターになって下さった、ココディーさん（斎藤さん）がトレースの提出の度に下さった、たくさんのフィードバックも交えてUIトレースの方法をお伝えできればと思います。
また、他にもいい方法やポイントなどがあれば是非コメントをいただければ嬉しいです。

1.はじめに

私は、Cocoda!+参加前に考えていたUIトレースの方法とは以下の様なものでした。

1. トレースをする見本のスクショを撮る
2. SketchやAdobeXDに 1. を貼り付ける
3. スクショの上にトレースする

何ともあっさりしたもので、考察なども何を残せば良いのかなど全くわかっていませんでした。
ですがCocoda!+で色々と教えていただき、UIトレースってデザインのストックが無い初心者には特に重要で、自分を確実に伸ばすことができると感じました！！

2.Cocoda!+で実施したUIトレース

私がCocoda!+期間内でトレースしたものは以下のメインページです。

・Wantedly
・kurashiru
・Twitter
・instagram

上記のアプリはココディーさんが選んでくれました。
AppleのHuman Interface Guidlinesやマテリアルデザインガイドラインのルールに従って作られている方、なのだそうです。
確かに、トレースをしている時にガイドラインを見てみると、ルールとして書かれていた事が再現されている箇所がたくさんありました！！

3.UIトレース -大まかな流れ-

1. 模写をする
2. AppleやGoogleのガイドラインと照らし合わせてルールを確認する
3. 模写の後、考察をする

非常にざっくりした方法なので詳しくお話ししていきたいと思います。

4.実践UIトレース -模写編-

ここではUIトレースの大まかな流れにある
1. 模写をする
2. AppleやGoogleのガイドラインと照らし合わせてルールを確認する
まずはこの2つについてです。

トレースをする前の説明でココディーさんがおっしゃったのは、
見本の横に新しいアートボードを置いて模写をするようにして下さい。
ということでした。
どういう事かというと、下のように新しいアートボードを右（もしくは左）に置いてトレースをするという事です（アートボードはもっと近づけていいと思います）。

これが私には難しくて、とにかくどこから手をつけて良いのかわからず時間がかかりました。
UIデザインのトレースをするというより、絵を書いているような感覚でした。
それに気付かれたココディーさんからのフィードバックで以下のPOINTを下さいました。

POINT:
・ コンポーネントごとに画面を分割できる事を意識して模写をする
コンポーネントについては、AppleとGoogleのガイドラインでパーツ毎に覚える事をしました。また、大きさや形などのルールも模写をしながらガイドラインで確認をしました。

10日間で4つのUIトレースを行ったのですが、上記のPOINTに気を付けるとトレースを重ねる度にアプリの構成がわかるようになりました。
そしてトレース2回目以降、ガイドラインのルール以外の気づきも次第に増えていきました。

また、細部にまで目を凝らす事もとても大事でした。
例えば以下の箇所です。(kurashiruのアプリのHome画面です)

次の文字を少し見せることで、ユーザーがスクロールができるのでは？と気づけるようになっていると思います。
UIのデザインのルールに気づくためにも模写をする時には、細部にまで注意が必要でした。

5.実践UIトレース -考察編-

UIトレースの方法の大まかな流れにある
3. 模写のあと、考察をする　
についてです。

まずは、ココディーさんからのフィードバックです！
考察する際のPOINTを教えて下さいました！！

POINT:
・使用されているフォントは？
・情報の優先度は？
・どこに視線を持って行きたいのか？（優先度やUIルールとも関係する）
・どの様なルール（配色、グルーピング、余白などなど）がある？
・色の選択理由は？
などなど...

上記を踏まえて考察をしていった結果、UIトレース考察の流れができてきました。それがこちら↓です。

考察の流れ
1. デザインのルールに気づく
2. それはなぜ？と自分に質問する
3. 他のアプリと比較

私は、デザインのルールに気づく段階の時、
デザインの4原則に沿って考えるようにました！
例えば以下のような感じです。

どこが揃ってる？
どこがグルーピングされている？
ボタンや文字の大きさが違う部分はある？
同じ様なパターンになっている所は？

そして次になぜかを考える段階の時、
自分を質問攻めにしました！
例えば以下のような感じです。

この距離（余白）をとっているのはなぜ？
この文字の大きさはなぜ？
なぜここのボタンはこの配色をされているのか？
なぜ同じデザインが繰り返されているのか？

自分の質問に答えられなかった時には、模写した画面を色々いじります。
例えば、コンポーネントの距離を狭めたり、広げたりしました。また、文字の大きさや太さを変えたり、色を変えたりと実験をしました。
すると、見本の方が良い理由も見つかりやすくなりました。

最後に他のアプリとの比較についてです。

考察の時に見つけたデザインのルールは、他のアプリではどのように表現されているのか？
を調べる！
（by ココディーさん）

このように取り組むと一段と深める事ができるようになったと思います。
デザインの勉強を始めて間もないため、自分の中にデザインのストックがほとんどありませんでした。なので、そのストックを作るためにも他のアプリと比較することは必要でした。

6.まとめ

今回、UIトレースの方法がわかった事で、今まで使ったことの無いジャンルのアプリの事を調査する時でも役立ちます！
例えば、上記の方法でトレースをするとこだわっているなと思う箇所や、自分のアプリではこうすればいいかな。など、多くの気付きとアウトプットにも繋がりました！！
また、少しでもデザインの意図に気づけるようになると、嬉しくなってモチベーションも上がりました！！

今回、Cocoda!+でUIトレースの方法を知って、UIトレースって良いことばかりで、とっても大事！！と本当に感じました。なので、これからも楽しくUIトレースをしていきたいと思います！！

こちらの記事はココディーさんが書かれたもので、UIトレースについて丁寧に解説してくださっています。ありがたい！！

最後までお読みいただきありがとうございました。