CA MOBILE TECH BLOG

株式会社シーエー・モバイルのエンジニア・デザイナーの活動を綴るブログです

株式会社シーエー・モバイルの技術広報による、
技術に特化したブログです。
エンジニアとデザイナーの活動や思想を綴ってゆきます。

非デザイナーにも勧めたい!より良いデザインのためのUIトレース

f:id:cam-engineer:20180831141945j:plain

女性向けサービスのデザイナーをしているカワイと申します。私は担当の2サイトを立ち上げからデザインとフロントエンドにて制作し、続けて更新対応を行なっております。

このデザインとフロントを対応している自分の強みを活かしてUIデザインスキルを向上していくため、UIトレースを行ってみましたので、その学びや気づきについてブログに書かせていただきます。


| なぜUIトレースなのか

UIトレースにて、良いサービス、良いデザインの構造を把握することで「なぜこのデザインなのか」ということについて理解を深めることができると思います。

その理解による新たな視点で自分たちのサービスを見直すことで、より上質な体験を提供するサービスを作っていくことができるようになると考えられるのでUIトレースを行なってみました。

デザイナー以外の方も現状のサービスの改善や、デザイン発注の際の構成案に活かすことができると思うので、是非UIトレースにチャレンジしていただきたいです。

トレース作業にはSketchやAdobe XDなどのUIデザインに特化したデザインツールを使用すると便利です。デザインツールと言っても、これらはかなりわかりやすい操作感になっているので、少し使い方を学べば非デザイナーの方もすぐに使用できると思います。

自分は以前から使用していることもあり、Sketchにて作業しました。


| トレースのやり方

まず、トレースをするサービスを決めます。サービス内容を理解している方がデザインの意図を読み取りやすいので、普段から利用しているサービスの中から選ぶと良いと思います。今回は、デザインの参考にする際に便利な「Pinterest」のiPhoneアプリをトレースします。

トレースの方法としては、トレースしたいページのスクリーンショットを撮りSketchに貼り付け、横に同じデバイスサイズの枠を置いて、まずは見比べながらある程度同じ位置に同じ要素をざっくりと置いていきます。

いきなりスクリーンショットの上から綿密にトレースを行うよりも、見比べながら位置関係を把握していくことで、作り手の気持ちになって現在のデザインに至るまでの意図を探ることができるので、一度大まかでいいので自分なりに似たような構成を作り上げてみると良いと思います。

f:id:cam-engineer:20180831141949j:plain

ただ、見比べるだけでは完全にトレースすることはできないので、構成の意図をなんとなく掴んだら要素の微調整をする段階でスクリーンショットを重ね、完全に同じ位置関係になるように細かくトレースしていきます。

ステータスバーに関してはSketchにデフォルトで入っている「iOS UI Design」のシンボルの中から選択するだけで簡単に設置することが可能です。

トレースの際に使われているフォントがわからない場合は、Webサービスの場合はブラウザの機能の「検証」などでわかると思います。Androidの場合は端末やバージョンによってデフォルトで使用されるフォントが決められているので、端末の情報から調べてみると良さそうです。

iPhoneアプリの場合もバージョンによって使用されるシステムフォントが決まっていたりしますが、現在は主に「San Francisco」というフォントが使用されています。

こちらのフォントは画面デザインやモック画像を作成する場合の利用は認められているのでiPhoneアプリのトレースの際は下記からダウンロードして使用します。

Fonts - Apple Developer

英字などで「San Francisco」が合わない場合は、過去に使用されていたシステムフォントが下記にまとめられているので、ここから探してみると良いと思います。

iOS Fonts

アイコンなど、パスを取ったりして作成するのが難しい要素がある場合は、スクリーンショットをクロップして使用するのも良いかと思います。Sketchの場合は画像をダブルクリックするとクロップすることが可能な画像編集モードに切り替わります。

また、今回は世界的に有名な「Pinterest」のトレースなので特定のアイコンフォントから「Pinterest」のロゴを使用することができます。Sketchのプラグインにアイコンフォントを使用可能にするプラグインがありますので、こちらをダウンロードするとアイコンを作ることが難しい場合でも簡単にイメージを作成できます。

github.com

f:id:cam-engineer:20180831141927j:plain


写真が入る部分などはSketchプラグインのCraftを使うと便利です。

www.invisionapp.com

f:id:cam-engineer:20180831141925j:plain

ウェブ上にある画像を表示して写真を入れることもできますし、デフォルトで用意されたジャンルの中からクリックひとつでランダムに写真を配置することもできます。

今回は「cats」の中からランダムに猫の画像を配置して、「猫」で検索をした時のような表示を簡単に再現することができました。かわいい。

f:id:cam-engineer:20180831141952j:plain

これで「Pinterest」トップのトレースが作成できました。左がスクリーンショットで右がトレースして作成したものになります。

アプリ内のデザインについてより深く理解するために、写真ごとに付与されているオプションメニュータップ時の表示と、写真自体をタップした際の詳細ページも合わせてトレースしてみました。

f:id:cam-engineer:20180831141956j:plain

f:id:cam-engineer:20180831141958j:plain


| UIトレースによって得られる気づき

トレース作業中にもデザインの意図についていくつか気づくことが生まれてくると思いますが、今回はよりUIを理解するためにデザインの構成を深掘って見てみます。

「なぜこのデザインになったのか」と、現在のUIに至るまでの背景を考えながら見ることで、そのデザインの意味を感じ取ります。

まずは、トップページから考察していきます。

トレースを行ったことでSketchのデータ上に各要素の大きさや色がクリックひとつでわかるようになっていますが、今回は分かりやすいように気になる点について余白やカラーコードなどをざっくりと記載してみました。

f:id:cam-engineer:20180831141937j:plain

  • 写真以外に使われている色は5種類のグレーと背景の白、ホームアイコンのアクティブカラーの赤(#BD081C)のみです。ユーザーの投稿した写真や画像がメインのコンテンツとなるので、他の要素はなるべく目立たせないデザインになっています。

  • 左右の端と中央のマージンは16px取りたかったけど、iPhone8のディスプレイサイズが横幅375pxと奇数になっているので右端は15pxになってしまったのかなと思われます。

  • グロナビバーの背景色は透明度97%の白になっています。ユーザーの投稿した画像が下にほんのり透けることで、まだ下にもコンテンツが続いていると認識させ、スクロールできることを察することができるデザインになってるのだと思われます。

  • グロナビバーのテキストは小数点の含まれる半端な数値になっています。これはおそらく何かの要素に対して相対的な値がつけられているためだと思います。ディスプレイサイズはデバイスによって異なるので、画面が大きくても小さくてもタップしづらくならないようにグロナビバーの大きさを相対値で決めているのだと思われます。


次に、各写真の右下についているオプションメニューボタンをタップした際のメニュー表示画面について考察します。こちらのボタンを押すと下からアニメーションでメニューが出現し、今まで表示されていた領域には影が乗るようになっていました。

f:id:cam-engineer:20180831141939j:plain

  • こちらの画面もグロナビバー同様にユーザーにタップさせる箇所になるので、あらゆるところで相対的な値が指定されており、デバイスサイズの多様化に対応している構成になっていると思われます。(iPhoneのRetinaディスプレイは通常の2倍の解像度があり、そのスクリーンショットを50%に縮小することで通常のディスプレイサイズに合わせてトレース作業を行なっているので、0.5px単位の数値が表示されています。)

  • 今まで表示されていた領域は両端2px分縮小表示され、上から透明度30%の白のフィルターがかかり、さらにその上からステータスバーも含めた範囲で透明度60%の黒いフィルターが乗るようになっていました。縮小表示で立体感を与えるだけでなく、2種類のフィルターをかけることで黒っぽい画像や白飛びした写真が同時に表示されていた画面の場合でもメニュー内に注目がいくようになっており、とても気の利いたデザインになっています。

  • オプションメニューを閉じる罰のアイコンとメニュー内の各アイコンの右端が揃っていて、各領域でアイコンの大きさを変えて差別化していてもスッキリとして見えるデザインになっています。

  • 「Pinterest のコミュニティガイドラインに反している」の箇所におそらく単語ごとに固定したワードブレイクがかかっており、漢字とひらがなの間で改行されてしまっています。翻訳されている影響もあるかと思いますが、iPhone8のディスプレイサイズではちょっと気持ち悪い位置になってます。


最後に、写真をタップした際の詳細ページも見ていきます。ここは写真に対するアクションのUIも見ていきたいので、少し下にスクロールした状態でトレースしました。

f:id:cam-engineer:20180831141958j:plain

  • ここでも各ボタンの横幅は小数点以下の数値になる箇所がいくつかあり、相対値を指定することでディスプレイサイズが変化してもタップしやすいデザインになっていると思われます。

  • このページはトップにもナビゲーションバーが入っており、さらにその上にステータスバーが入ることも考慮し上のマージンが小さめになっています。

  • トップナビバー内の横並びの二つのボタンは角丸のR半径の大きさが微妙に異なっています。やはり「Pinterest」なのでピンをつける保存ボタンを推奨するため、相対的にシェアボタンが目立たなくなるようにR半径を少し大きくしているのだろうと思われます。

  • 写真のタイトルや各項目タイトルとテキスト部分の書き出し位置は、通常の左マージン16pxよりも4px多く、20px取られています。写真やボタンなどの角丸がR半径4pxでかかっているため、その終了地点に合わせて書き出すことで、柔らかい雰囲気を残しつつも整然と綺麗に各要素が並んで見えるデザインにしているのだと思われます。

  • 他のユーザーも保存していることがわかることによって、その投稿の人気度が計れるピンの数を示す項目のテキストは、和文と欧文でフォントサイズが異なっています。調べたところ、システムフォントの仕様で和文のみフォントサイズが1px小さくなるようです。アプリ側ではなく、その方が読みやすいと判断したiOSのUIデザインですね。


一見シンプルなUIですが、細部を見て行くとアプリとしてとても気を遣って設計されたデザインだということがわかりました。

また、メインコンテンツである投稿された写真を邪魔しないように各要素をできるだけ簡素に、かつわかりやすく組み立てるのはとても大変だったんじゃないかなと思わされました。


| 得られた気づきから生まれる改善案

今回はUIトレースと構成の考察により得られた知見を活かして、簡単にUIの改善案も考えてみました。アウトプットをすることで今までのインプットに意味が出てくるので、その一例として参考にしていただければと思います。

f:id:cam-engineer:20180831141929j:plain

トップページの各写真の下にはピンアイコンを設置しました。検索した写真をボードごとにまとめて保存することが「Pinterest」ユーザーの主な行動になるので、各写真のメニューを開いたり詳細ページに飛んだりすることなく、サクサクとピンを刺せるイメージを目指しました。

また、現状では既に保存した写真かどうかの確認が、保存するボタンを押した際にしかわからなくなっているので、保存したものには赤色のピンアイコンを表示させて一目でわかるようにしてみました。

ただ、このアイコンの設置により若干ごちゃつきが生まれ、わずかに写真の邪魔をしてしまうので、その点を考慮して現在はオプションメニューアイコンのみになっているのかもしれません。

使いやすさか、投稿された写真の存在感を大切にするかで悩んだ結果が今のデザインなのかもしれないです。

f:id:cam-engineer:20180831141932j:plain

オプションメニューの表示画面には、まず上部にオプションメニューを押した写真を配置しました。現状ではどの写真に対するオプションなのかわからないので、選択した写真が目に見えてわかるようにさせました。

また、下部メニュータイトルの「オプション」とアイコンボタンのテキストが両方ともボールドで表示されており、差別化が弱く感じたのでメニュータイトルはボールドを外しました。

アイコンが左寄りで並んでおり右側が大きく空いているので、かなり多くいると思われる右利き片手持ち親指操作のユーザーでもタップしやすくなるように、アイコン下にボーダーラインを敷きタップできるエリアを拡大することで、画面右側からでもアイコンを選択できることを示唆して使いやすさを向上させてみました。

f:id:cam-engineer:20180831141934j:plain

写真をタップした際の詳細ページはボタンやテキストの優先度が細かく定められているので、それらを改修するとしても、このページ内から多く利用されている機能の順番などを理解してからが良さそうだろうと感じました。

なので、一点だけですが、「カメラロールから追加」とその横の「コメント」がタブボタンになっているのがとてもわかりづらいので、「コメント」にも同形状の枠線を敷いてタブであることを認識できるデザインにしました。

他の角丸ボタンとはR半径の大きさで差別化されていますが、非アクティブの方がテキストだけなのは直してあげたいなと思いました。

このような流れでUIトレースから掴んだデザインの意図をストックしてから現状のサービスを改めて考えることで、より使いやすく、よりコンセプチュアルで、より素晴らしい体験を提供できるサービスに改善をしていくことができると思います。

今回の記事で、UIについて今一度考える機会を作っていただけましたら幸いです。自分もUIトレースの旅を続けて、より良いUIデザインを生み出していけるように頑張っていきたいと思います。

(デザイナー・カワイ)