トレースで要件に適したUIを作る方法を学べます

このシリーズではプロのデザイナーが現場に近い制作お題をどう解いていくのか？の流れを真似できるシリーズです。
真似していくことで”なぜそのUIになるのか？＝要件に適したデザインを作る方法”を体験していけます。

‍

何をするのか？メリットは？誰向け？

主にこのシリーズをやる目的や内容は以下の画像のようになっていますー！
詳しくは動画の中で喋っています。

‍

‍

‍

‍

何を学べるのか？

このシリーズでは、見た目を整える前の段階を中心にデザインできるシリーズになっています。
UIを決める上ではどういう方向性で作るのか？情報の構造は何か？を整理していく必要が実はあります。
言葉や知識ではよくわからないけど、UIデザインの中心と言ってもよいデザインフローをこのシリーズではトレースしながら全容を体験することができます💡

‍

‍

具体的に身につくデザインスキル

主にスライドの内容のような項目を、トレースして体験していくことができます。
知識を最初につけるのもいいですが、まずはやってみて「なるほどこれがUI作る上で重要だな〜」と体験できるシリーズになっています。

‍

‍

‍

‍

要件を反映するUIをデザインする流れはこちら

要件を踏まえ、UIをどうつくるべきか？を検証しながら進めていくデザインの流れを実践します。
実際のお仕事でもこの流れを踏みつつデザインします。

実際は途中でチームメンバーに共有して確認したり、意見をもらったりします。
デザイナーからメンバーにアイデアを共有もするのでその練習やイメージを掴むことも進めながらできると思います。

このシリーズもこの流れに則って進めていきます。

‍

‍

1.まずは内容を把握する

いきなり作る前にデザインする内容を把握します。
ビジネスや自分が関わっているサービスの話からデザインは始まるので、まずはそこをしっかり把握します。

‍

2.UIの要件を整理します

このシリーズでもコアになるパートです。
UIに必要な情報、いつどんな時に使われるのか？のユースケース、その画面で何をできるようになるべきなのか？のタスクなどを洗い出していきます。
こ

これがなくてもUIを作ることは可能ですが「なぜこのUIでないといけないのか？」という視点を持ちにくいです。つまり方向性がないまま作っても何が良いのか決められないんですね。

3.UIの構造を考えパターンを作ります

整理したことを踏まえてUIのアイデアを作っていきます。
1案だけではなく、整理した情報や構造をもとに、考えうるUIをしらみつぶしに作っていきます。
あらゆる可能性を検討して、なるべく多く実際に触れる形にしてどれが要件に1番合う形かを比較し吟味していきます。

4.作成したUIを検証します

今回は割愛しますが、UIの方向性が何個かできたら社内や実際のユーザーさんに1度見てもらいます。
デザイナーは客観性を失いやすいです。なので客観的な他の視点を入れながら今の方向性が上手くいきそうか、検証していきます。

‍

‍

5.最後にUIの細かい部分を

ここまできて細かい部分をブラッシュアップします。
今までの工程がずれているとUIは作り直しになってしまうんですね。

‍

整理をするデザインには紙とペンが強力です

このシリーズではデザインデータをいじる前のデザインを主に扱います。
その工程で最も力を発揮するツールが紙とペンです。その有用性を補足的に喋っています。

ぜひ紙とペンを使ってなかった方は、この機会に用意して進めてみてください。

まずは要件をしっかり理解しよう

いきなりデザインに入る前に、要件の意味を把握するところから始めましょう。
要件＝今回でいうとシリーズで取り組むお題になります。

現場では自分が関わっているビジネスの話や、サービス、誰がいつどんな時に使うためのデザインをするのか？
そう言ったことを理解しないとUIを作る難易度が上がります。

デザイナーが全て認識する必要は最初はないですが、理解しているディレクターやビジネスサイドの人に聞きながらしっかり確認するところからデザインを始めることがとても大切です。

‍

お題について解説

動画の中ではどんなお題なのか？を解説しています。
ここでの話を理解しないと、これからやることが難しくなるので、しっかり理解するところから始めましょう。

‍

お題のドキュメントはこちら
https://www.notion.so/takumikai/22-10-7001520c01224c57807c209640de85fe#f212f02a13d644828f885e9d21311c70

わからないときは1人で抱え込まない

補足的な動画です。
現場でも要件の意味がわからない部分や、もっと知れるとデザインイメージが湧きそうなこと、色々浮かぶと思います。

そういう時は1人で抱え込まずに共有しましょう。
デザイン以外は自分より知っている人がいる場合は頼っていきましょう。そうやって少しずつ知識をつけていくことが大事です

‍

動画で話している定義書はこちら

https://takumikai.notion.site/UI-37901e974c4d43ddb83e5c72633bf039

※他の人への共有は避けてくださいね〜。

‍

‍

‍

動画で話している定義書はこちら

https://takumikai.notion.site/UI-37901e974c4d43ddb83e5c72633bf039

※他の人への共有は避けてくださいね〜。

‍

‍

動画で話している定義書はこちら

https://takumikai.notion.site/UI-37901e974c4d43ddb83e5c72633bf039

※他の人への共有は避けてくださいね〜。

‍

動画で話している定義書はこちら

https://takumikai.notion.site/UI-37901e974c4d43ddb83e5c72633bf039

※他の人への共有は避けてくださいね〜。

‍

‍

‍

動画で話している定義書はこちら

https://takumikai.notion.site/UI-37901e974c4d43ddb83e5c72633bf039

※他の人への共有は避けてくださいね〜。

‍

‍

‍

動画の目次

1. 00:00 見どころとイントロ
2. 01:34 ラフを描く手順
3. 03:20 参考からアイデアを拝借する
4. 05:31 紙でUIラフを描く
5. 08:40 コンテンツのラフ
6. 17:31 アクションのラフ
7. 21:43 まとめと次

‍

参考UIからアイデアを出す

自分の独自の考えではなく初心〜中級者ぐらいまでは、すでにあるUIの中からアイデアを選んで参考にして組み立てていきましょう。
ラフの段階からどこに何を配置するのか？を参考を見ながらアイデアを出していきます。

‍

紙でラフを描いていく

‍

いきなりデータを作らない理由としては、データでアイデアを考えるのは時間が掛かるから。手書きだとすぐにイメージを確認できる。そのため”何を作るのか”を紙でまとめてからデータで起こして詳細をチェックするという工程を取っています。

なのでこの段階で、どういう情報設計にすると要件を満たせるか？という視点でガンガンアイデアを出していきます。（動画だと１アイデアですが、こんなノリで色々出していくのもこの時点でありです）

‍

UIの基本構造に則って考えていく

‍

UIはあらゆるブロックで、ナビ、コンテンツ、アクションの3つの役割で構成されています。

それを意識して情報をデザインしていきます。

‍

UI3つの基本構造についてはこちらの動画を。

https://www.bo-no.design/contents/uivisual-6-3

‍

ブロックごとに情報を構造化していく

‍

ラフの段階で、何をどういうグループにして、グループ内の情報はどういう関係性なのか？を考えながらデザインをしていきます。ポイントは情報同士の親子関係、グループ関係という”構造”を意識してまずは考えていくことです。

装飾は後から可能なので、肝心な伝えたい情報の優先度などが崩れてしまうとそれだけで良いUIを作ることから離れてしまいます。なのでこの段階から構造を意識して組み立てていきます。

‍

‍

‍

このデータから始めよう

この後のフローでも使うので、こちらで確保してください〜！

↓コピペして使ってください（Figma）

https://www.figma.com/file/mKYwB2QwNAM46x4jPyeSyR/%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E8%A8%AD%E8%A8%88---5-2%E3%81%AE%E5%85%83%E3%83%87%E3%83%BC%E3%82%BF?node-id=0%3A1&t=8EdXi64RJry7FxZr-1

‍

‍

簡易なデザインシステムを使うと楽

UIの基本的なパーツ（フォントや余白、色）に対して役割が分担されている状態で構造設計をするとかなり楽になります。見た目的なバランスは役割に左右されずに後から変更できると思うので、一旦ビジュアルが定まってない時は仮で定義しておいても良いかなと個人的には考えています。

‍

‍

ブロックの配置場所のセオリー

ブロックのサイズに関しては割合でサイズを決めるとバランスを考えやすくなると思います。絶対値（800pxが多いetc）で考えちゃうと、~~なサイズはダメなの？という本質的じゃない問いを生み出すと思います。

デザインはパーツ同士の相対的なバランスで良い悪いなどを判断していくので割合で構造を考えて設計していくと良いです。

かつブロック配置に関して、基本的にはシンメトリーに組むとバランスは良くなります。特別な理由がない場合はシンメトリーに見えるようにバランスを考えて配置していくとオーソドックスな見た目を作りやすいと思います。

‍

他のサービスの構造を参考にしよう

自分の頭ではなく他サービスがどういうバランスで構造化してUIを作って表現しているか、参考にしながら組み立てましょう。まずは存在しているデザインから謙虚に学んでいく姿勢が大事です。

‍

ブロックを意識できるデータを作っていこう

構造化＝ブロック化が6-7割なので意識できるデータ設計をすると自分でも見直しやすいです。グループにする基準＝意味のグループになっているなので、それを意識しながらデータも組めるようになっていくのが大切です。

ラフは具体イメージを沸かせるために

前回まででUIを１つ具体的なイメージをデザインしてみました。動画を観る方は「結構出来上がったらこれで良いのでは？」と思うかもしれません。（実際イメージのついてる僕が作っているので、そんなにいじる必要はないかもしれません）が、ラフは完成度を求めるものではないです。要件を基本を踏襲して具体的にしてみる（UI）とどうなるか？を自分の目で見れるようにするためのものです。なので完璧でなくて良いし、荒くともまずは形にすればOKです。

このフェーズでは、このラフを使って目に見える形で「要件」と「具体」を照らし合わせて”さらにどうすれば要件を満たした良いUIになるか”のアイデアを検討していきます。

‍

‍

要件とUIを照らしてアイデアを出そう

ラフで作成したUIが本当に要件を満たせているか？よりよく満たせる形はないか？議論した方が良い箇所はないか？を整理していきましょう。自分で自分が作ったラフUIを”よりよくするため(改善)”にはどうしたら良いのかを考えていきます。これがデザイナーとしてはとても重要です。自分で自分のアイデアをブラッシュアップできる、人の意見や教えがなくても進めていける突破力は提案力にもデザイン力にも直結していきます。

改善の目線はあくまで”ユーザー”であり”要件”です。自分の感覚だけで考えないようにしましょう。

これらの癖を付けつつ、具体イメージで想像しやすくなった状態でさらにアイデアを出していきましょう。

作成したラフに自分でツッこみを入れる

ラフがラフである理由は”荒くても良いから形になっている”ことにあります。この完璧じゃない具体物から”要件を満たすためには”さらにどうしたら良いのか、その視点をコメントしましょう。

‍

ツッコむポイント

２つです。「ユーザーが軸」になっているか。「要件を満たす」ための視点か。です。ボタンが小さい、押しづらい、そういうのも大事ですが、1番はそれが「要件を満たすため」に必要だから、ボタンが小さいのか。になります。

スタイリングはまずは”ふつう”のものをいつでもデザインして欲しいので限りなく単純なクオリティの低さはスルーできると本来は良いです。が、最初はそんな完璧にもできないので、どうしてもスタイルが気になる人は項目を分けてツッコミを入れましょう。

デザイナーは放っておくと見た目しか気にかけないようになってしまいがちです。この癖がある人はうまく自覚しつつ”構造”と”スタイリング”で考えるポイントや時間を区別しましょう。

‍

ツッコみをする時は参考デザインを

ツッコミの方法論は特に手法がありません。”UIの理解”と”要件、ユーザーの理解”の深さによって良いツッコミができるかどうかが決まってきます。

ただセンスではありません。既存のUIを知っているかどうかなどの、知識と経験になります。

なので、まずはUIからヒントを得るために参考UIを集めて、比較してツッコミを考えたりしてみましょう。

‍

課題に対して、関連するアイデアを出す

どうすればよくなるのか？と言われるとバラバラとアイデアを出すかと思います。それでも良いです。が、多くなればなるほど、「あれーこれって何に意味があるアイデアなんだっけ？」となる確率が高いです。発想は広げつつ、「目的⇄課題⇄アイデア」をしっかり意識して出すことで、迷いがなくなります

‍

アイデアも出しやすい

”何に対して考えなきゃいけないのか”がわかればアイデアも出しやすく可能性も高まります。漠然と考えるより、明確な問いに対してアイデアを考えた方が良いケースも多いでしょう。そういう時に使える考え方が”フィッシュボーン図”です。

1. 目的を定める
2. 目的に対して課題を出す
3. 課題に対してアイデアを出す

の３ステップでアイデアを出しやすくかつ整理しながら進めることができます。

‍

‍

フィッシュボーン図についてはこちら

https://u-note.me/note/950

‍

‍

参考UIからアイデアを出す癖をつける

「こういうUIなら解決できるかも..」を考える時は”必ず”参考のUIを隣に置いて考えるようにしましょう。
知識がない頭の中のアイデアだけを信用するのはリスクが高いと思います！

‍

‍

参考を元にアイデアを具体化しましょう

アイデアの優先度が高いものを全て検討するために具体化（UI）にしていきましょう。様々なパターンをリリース前に検討することで「意味のなかった開発」や「出してみて効果がなかったUI」を極力減らすことができます。

かつパターンを検討することが”何が今回の要件にとってベストか”を自分で考える行為になります。なので、UIに対して責任が増しますし、説得力を自分でデザインすることができます。

‍

‍

パターン検討＝深く考えること

相手から「こういうのもよくない？」と言われた時に、すでに検討済みな場合はメリデメと具体をシェアして議論をすることができるのでとても信頼されるデザイナーとして見られる確率も上がります。し、ユーザーメリットをデザインすることにも繋がりやすいです。

‍

‍

1度作ったUIをブラッシュアップしよう

要件を満たすためにも、1度作ったUIを元に、さまざまな方向性を検討して”可能性”を潰していく、1度検討するのが使いやすいUIを考える上でとても大事です。

この動画では「表UI - TableUI」に焦点を当てて、細かくUI案を考えている様子を見ることができます。

‍

‍

比較して繰り返し改善することがデザイン力に繋がる

1度作ったもの、今作っているもの、「参考のデザイン」、「要件」…を比較したり、行き来したりして”何が最適か”を検討するのが大事です。

満足いかない、イメージと違うのであれば”何が違うと思うのか？”を自分で出して、さらに違うバージョンのUIを作る…という動きをすることで、自分のアウトプットのクオリティと耐久性が上がります。情報設計のシリーズではありますが、この動きをすることが”デザイン力”を伸ばすことに直結します。かなり大事なことなので、動画の中でしっくり行ってない様子を確認しながら、「こういう時もあるけど考え続けるんやな…」を感じてもらえると嬉しいです。笑

‍

‍

参考を集めよう

自分が取ろうとしているUIの基本パターンがないか？を「ガイドライン」と一般的に言われる”Material Design”で確認すると良いです。全て覚える必要はないですが、作る時に調べる場所の1つとして持っておくと良いかなと思います。

https://material.io/

‍

□ Date Table - Material Design

https://m2.material.io/components/data-tables

‍

構造が固まったら配色をはじめよう

要件を満たす情報設計が大体固まってきたら、配色など装飾部分にも手を出していきましょう。この動画では「アクション」部分の使いやすさと意味構造を整えるため、アクションブロックのUIの配色を考えていきます。

‍

UIにおいてアクションは目立つ必要性が高い

UIは見るだけじゃなくてなくて“操作”するのを目的に、平面のビジュアルを作成するジャンルです。なので使い手が「この画面では何をすれば良いのか？」が分かりやすいほど、使いやすいものになる確率が上がります。

そのため「アクション」できるかどうかが分かりやすいか、押した時の反応が良いか、はかなり重要な要素になってきます。色を適用すると、周りより目立ちやすくなるため「これは押せるUIオブジェクトである」と使い手に示すことが容易になります。

逆に色を使いすぎると”どこが押せる場所なのか”が分かりづらくなる確率が上がるためUI作成の難易度が上がります。

このような理由で有彩色（白黒以外の色）は基本的に1色のみを軸にまずはUIに適用していく、アクションには色をまずは配置するが重要になってきます。

動画では「UIビジュアル基礎」でも出てきた「ボタンの強さのヒエラルキー」を紹介しつつ、配色をしていきます。

‍

最終的に固めた”詳細ページ”のデザインを共有します

動画内だと完全アドリブで製作していたのですが、話しながらかつ時間の問題で詰めきれなかった部分をシェアします。だいぶ変更点があります。これが正解だ、ではなく、”こういう考え方もできるのか”、”アイデアを出す考え方”、”細部のアイデアの出し方”などを学んで、要件を満たすUIのパターン出しが自分でできるように参考にしてみてください。

■ 目次

1. 概要系の情報 - アイコンを使う
2. アクションUI - 定番パターンに
3. 認証者の情報 - 意味でブロック
4. 表/テーブルUI