【後編】Figma,Sketchを活用して現場で実践できる ─アプリUIデザインハンズオン─

【ワーク1】UIトレースしてみよう

UIデザインの基礎知識を学んだ後は、実際にデザインソフトを使いながら作業を進めていきます。環境設定をした後、UIトレースの進め方や考え方、ノウハウについての講義から開始されました。

今回のハンズオン講師・メンターの皆さん！

▲左から、藤井 謙士朗さん、宇野 雄さん、池田 拓司さん、吉竹 遼さん

●UIトレースとは？

UIトレースとは「既存のデザインを上からなぞって、同じデザインを自分で作り上げること」で、まずはそのまま写してみて、何も工夫せずにはやってみることが大事。エンジニアの世界では、コードをそのまま書いていく「写経」などと呼ばれる。アートの世界でいう模写に近い。

●なぜ、トレースをするのか？

なぜ、トレースをするのかについては、以下の3点が挙げられました。

　　1. ゴールイメージが明確になっているため、習得が実践的にできる
　　2. 優れたアプリのデザイン意図を深く知ることができる
　　3. デザインの意図やルールを知ることで自分でデザインを作るときの参考にできる

1については、UIデザイン初心者が習熟を上げるためは、一番実践的で簡単だから。これを作ればゴールだというイメージがあるのは、とてもやりやすいという心理的なメリットもあります。

現場のUIデザイナーたちがこれを実践しているのは、2）3）の理由が多いといいます。

「なぜこの要素とこの要素は揃ってないのか、逆にあえてずらしてあるのか、こことここの文字が同じ色で大きさだとか、一緒だと思っていたら、わずかに違うものがあったとか。こういう場合は同じルールを用いている、違うルールを用いた方がいいことが明確になる。それが自分でデザインするときの参考になります」

●UIトレースのポイントは？

見た目を写すのではなく、その意図を考えながら写すことが大事。見た目は44pxのボタンだけど、実際に触れるタップ領域はもっと広いことがよくある。また、余白、スペースはどことどこが一緒でどことどこが違うのか。同じ余白のスペースをとっている部分は同じ意味合いで使われているし、余白の寸法が違うところは違う意味がある。

タップしたら色が変わる、一行と二行の表示ってどう変わるのか、高さが変わるコンポーネントと変わらないコンポーネントもあるので、それぞれどうルールが設定されているのか意識する必要があるといいます。

また、改めてパーツなどに命名をする際には、役割に沿った意味を持った名前をつけること、特に使いまわしをするパーツはどれを修正したらいいかわからなくなってしまうので、より丁寧につけるほうが便利。スタイルやコンポーネントは使うことで効率化され、便利であるということも大前提にあるが、意図を考えることが大事だと、宇野さんは語ります。

「それを作ったデザイナーの意図をくみ取りスタイルを定義することで、もしこういう機能が追加されたら、この大きさの文字を使うんじゃないかというルールがだんだん見えてくる。役割としてもとらえることをお勧めします」

逆に、やらない方が良いこととして、アイコン模写と写真のコピーなどが挙げられました。

「アイコンのトレースや写真や画像もコピーはやり出すと時間がかかるし、再現性がないのであまり意味がありません。標準のアイコンセットを使ったり、最初は〇とか□で構いません。それぞれのパーツがどういう役割を持っているのか、どういう塊で使われているのか、どういうルールになっているのかを知ることのほうが重要です。写真や画像もUnsplashなどを有効活用する方が簡単だし、実際のサービスに近いものになります」

お手本をもとにトレースに挑戦！

続いては、講師の方々が用意したInstagramのスクリーンショット画像をもとに、いよいよトレースのワークに入ります。宇野さんは「パーツは作りこみすぎず、全体把握をするが大事。がんばりすぎないこと」と念押ししながら、Figmaの画面URLを共有。みんなが手元でその作業画面が見れる、見本を示しながら説明を受けれるのも便利です。

まずは画像をコピーして、Figmaを立ち上げ、アートボードの大きさを設定。この画像の上に、パーツの図形を重ねて似たものを作り、トレースしていきます。

説明を受けた後は、各自トレース作業に入ります。皆さん、真剣な顔で取り組んでいます。

講師の皆さんたちによる「僕だったらこうやるよ」解説や、Figmaのオートレイアウトという便利な機能の説明などを聞きながら作業を進めていきます。

【ワーク2】リデザインしてみよう

2時間ほどトレースしたところで、以下の3つから作業を選択してのワークとなりました。

　1）お手本を見ながら、参考にしてトレースの続きをやる
　2）別の画面をトレースしてみる（検索ページなど）
　3）リデザインしてみよう（難易度高め）

3）は以下のストーリーを参考に、Instagramでお店をお気に入りに追加できる機能を考えてリデザインしてみようというお題（お題1）が出されました。ストーリーは自分で加工してもOK、インスタの意図を考えながら、追加機能を作ってみるという課題です。

●ストーリー

1. 昼休みにInstagramを見ていたら、同僚のAさんがおいしそうなハンバーグの写真を投稿していた
2. 「肉好きは必ず行っとけ」とのこと。これは見逃せない。
3. 今日はもうお弁当を持ってきてしまったので明日必ず行く！
4. お店の場所をお気に入りに追加しておこう。これで明日はバッチリだ！

お題2：お題1で追加したお気に入りの店に行ける機能デザイン

1. 昨日お気に入りに追加したハンバーグの店にさっそく行ってみよう
2. ランチは何時からなんだっけ？12時だけどどうも行列ができるっぽいぞ？
3. 会社からだと歩いて5分くらいか。前のミーティングを11:30には切り上げて出発だ！
4. 思ったよりも並ばずに入れた。Aさんが頼んでたのなんだっけ？
5. 「チーズインハンバーグ」これか！
6. 予想通りのボリュームと肉感。大満足。Aさんにお礼言わなきゃなー。

1日目のハンズオン終了後は、懇親会で楽しく交流を深める

ハンズオン終了後は、講師の宇野雄さん、池田拓司さん、吉竹遼さん、藤井謙士朗さん、主催の仙台市役所・佐藤伸洋さん、TECH PLAY 運営事務局・スタッフを交えて懇親会を開催。宇野さんの音頭で乾杯。参加者の皆さんと、楽しく盛り上がりました。

Figmaのプロトタイピング機能の紹介から

二日目のハンズオンは、Figmaのプロトタイピング機能の使い方について、実際の動きを交えながらの講義から始まりました。

今回は白い画面と青い画面が用意され、その二つの画面をボタンを押すと行き来する動きを作ります。画面遷移はプロトタイプモードで要素を選択し、ドラッグして遷移したい画面の要素につなぐことで設定。その動きを画面が切り替わった部分だけアニメーションで確認することもできます。

グループに分かれて、トレースとリデザインをワーク

次に、一日目の続きでトレースを行うグループとリデザインを行うグループに分かれ、ワークを開始。TECH PLAY事務局が用意したお弁当とお茶でランチ休憩をはさみ、午後も講師陣からのUIデザインの進め方やアドバイスを受けながらワークを続けます。

リデザインワークの講評と振り返り

15:00からは、ワーク2のリデザインに取り組んだグループの発表と、それに対する講評が講師陣から語られました。

1）お気に入り写真を自分に送る機能を追加

トップバッターの佐藤さんは、新しい機能をあまりつけたくなかったため、お気に入り写真を自分で自分に送る機能に絞って追加。送るボタンの設置とカテゴリをソートして自分に送るシンプルな機能に特化しました。

●講評
池田さん：インスタの構造を理解して、機能を最小限にしたのがGood。送るという概念が自分になかったので、自分に送るという発想が斬新だった。

宇野さん：トレースした中でミニマムで取り組み、シンプルに仕上げたこと。インスタの世界観を活かしているのもよかった。

吉竹さん：新しい機能をユーザーにどうやって知らせるか、ユーザーに認知してもらう仕掛けもあるといいのでは。

2）お気に入りのお店の混雑時間がわかる

2番目に発表した佐々木さんは、お気に入りのお店の情報がすぐに探せるように、お店のブックマークリストへの導線を追加。さらにお気に入りの店の混んでる時間がわかる機能を加えました。

●講評
池田さん：このお店に行くという目的に注力し、画面遷移がしっかり考えて設計されている。アラートや写真の一覧など、お店の投稿を活かしているところも興味深い。

宇野さん：この短時間でやりきったのがすごい。機能が多くなったわりには、きちんと既存の画面を踏襲していろんなものが作られている。こういうアプローチはいいなと思った。

吉竹さん：UIとしてはよくまとまっている。お店の情報に行くためのアイコンはシンプルにお店の外観とかであってもいいかも。リマインドのストーリー設定は他にもありそう。

3）お気に入りのお店をスピーディに登録できるように画面設計

3番手で発表した鍋島さんは、肉や魚、カフェなどのよく使うカテゴリをデフォルトで用意し、スピーディに登録できるように設計。さらに詳細な情報を書く・書かないの選択肢を与える導線を設置しました。

●講評
池田さん：途中で詳細を書く・書かないを選べる画面で、仮に書かない人が8割だと思ったら、書かないUIに飛ばせば、8割の人にはその画面遷移が一つ短くて済む。そういう優先順位を意識しながらやってみるのもあり。

宇野さん：複雑な機能のわりにはシンプルにまとめられていて、志向性が出ていて面白い。UIはインスタぽくない面があるので、トレースしながらパーツを拾ったり、余白の取り方やボーダーの太さ、文言、レイアウトなどを踏襲するといい。

吉竹さん：アイコンは一目でわかるように、これが何の機能を表すかを自分で言語化してみるといい。名詞よりも動詞で考えるとシンプルになる。

4）お気に入りのお店に行くマップ機能を強化

4番目に発表した鮫島さんは、お店を登録するときの位置情報を活用し、マップ情報がメインに見れる画面設計を行いました。

●講評
池田さん：お店にどうやって行くか、今日どこに食べにいこうか、お友達のお気に入り以外にも保存したものを見て決めるプランが面白い。インスタの特性を捉えている。細かいトランジェッションとかアイコンの気配りもあり、Figumaの操作を習得する姿勢が良かった。

宇野さん：インスタぽいところが良かった。インスタの機能として出したら信じる人いそう。みんなが望む拡大機能をきちんとルールを理解した上で盛り込んでる。あえていうと、 その友達が何を食べたのかの情報が見れると、SNSであるインスタらしさが増すと思う。

吉竹さん：タイムライン上の情報と詳細情報は違うので、情報の出しわけや画面によって役割が変わることを意識してほしい。ユーザーの利用文脈に合わせて最適な情報だけを出す。目的に合わせた情報の出し方、絞る判断をするとより良くなると感じた。

5）他サービスの良いとこどり！写真の保存先を選べる・営業時間がわかるetc.

最後に発表したあいざわさんは、タイムラインを見ていいなと思う写真を見つけたら、Twitterのように保存先を選んだり、新規コレクションを作成して保存できる機能を追加。詳しい情報はGoogleページにリンクさせ、混んでる時間帯や営業時間を見れるようにリニューアルさせました。

●講評
池田さん：体験ストーリー、UIのカラーリング、遷移も違和感なくてインスタっぽい。ここからはGoogleでいいという割り切りもいい。新しい機能のアイコンを知らせるUIのコンポーネントをしっかり使って告知していたところも良かった。

宇野さん：ストーリー性がすごくあった。機能をつけたというより、こういうふうに使うんじゃないの、こういう順番でやるんじゃないの、だからこういうものが求められているんじゃないのという工夫が全体的に感じられた。Facebook,Twitter,Googleがやっていることを使うという割り切りもいい。

吉竹さん：Googleに飛ばすは、事業者目線でいい。だが、時間軸、新規、食べ物の情報が同列に扱われているところが惜しい。新規作成の使用頻度や位置なども考えてみてほしい。

最後に参加者の皆さんからひと言ずつ、今回参加しての感想・振り返りの一言をいただき、ハンズオンは終了となりました。そのコメントの一部をご紹介します。

「UIデザインを実践されてる方の話が参考になった」
「UIトレースの正しいやり方が学べてよかった」
「デザインのルールと支えるツールの関係が理解できた」
「Figmaを実践的に学べて楽しかった」
「実際に使う人のことを考えてデザインすることを学べた」
「エンジニアがどう作りやすいところも考えるべきだと気づいた」
「Figmaを使ってみて、想像以上にコミュニケーションツールの重要さを知った」
「Figmaを現場でどう使われているのか実践的なことが知れてよかった」

仙台市では、今後もこうしたハンズオンや勉強会を開催していく予定です。 参加してみたいと思った方は、ぜひ、仙台市のグループをチェックしてみてください。

▶︎イベントレポートの前編はこちら！→ 【前編】Figma,Sketchを活用して現場で実践できる ──アプリUIデザインハンズオン──

▶︎仙台市主催のイベント
【2019年11月7日(土)～11月8日(日)】KotlinでWebアプリケーションを開発してみようハンズオン
【2019年12月7日(土)～12月8日(日)】SwiftでiPhoneアプリ作り体験！
【2020年1月18日(土)～1月19日(日)】アプリUIデザイン実践ハンズオン
【2020年2月7日(土)～2月8日(日)】デザインシンキング体験講座
【2020年2月29日(土)～3月1日(日)】ビジネスプラン構築ワークショップ