このシリーズではプロのデザイナーが現場に近い制作お題をどう解いていくのか？の流れを真似できるシリーズです。
真似していくことで”なぜそのUIになるのか？＝要件に適したデザインを作る方法”を体験していけます。
主にこのシリーズをやる目的や内容は以下の画像のようになっていますー！
詳しくは動画の中で喋っています。
このシリーズでは、見た目を整える前の段階を中心にデザインできるシリーズになっています。
UIを決める上ではどういう方向性で作るのか？情報の構造は何か？を整理していく必要が実はあります。
言葉や知識ではよくわからないけど、UIデザインの中心と言ってもよいデザインフローをこのシリーズではトレースしながら全容を体験することができます💡
主にスライドの内容のような項目を、トレースして体験していくことができます。
知識を最初につけるのもいいですが、まずはやってみて「なるほどこれがUI作る上で重要だな〜」と体験できるシリーズになっています。
要件を踏まえ、UIをどうつくるべきか？を検証しながら進めていくデザインの流れを実践します。
実際のお仕事でもこの流れを踏みつつデザインします。
実際は途中でチームメンバーに共有して確認したり、意見をもらったりします。
デザイナーからメンバーにアイデアを共有もするのでその練習やイメージを掴むことも進めながらできると思います。
このシリーズもこの流れに則って進めていきます。
いきなり作る前にデザインする内容を把握します。
ビジネスや自分が関わっているサービスの話からデザインは始まるので、まずはそこをしっかり把握します。
このシリーズでもコアになるパートです。
UIに必要な情報、いつどんな時に使われるのか？のユースケース、その画面で何をできるようになるべきなのか？のタスクなどを洗い出していきます。
こ
これがなくてもUIを作ることは可能ですが「なぜこのUIでないといけないのか？」という視点を持ちにくいです。つまり方向性がないまま作っても何が良いのか決められないんですね。
整理したことを踏まえてUIのアイデアを作っていきます。
1案だけではなく、整理した情報や構造をもとに、考えうるUIをしらみつぶしに作っていきます。
あらゆる可能性を検討して、なるべく多く実際に触れる形にしてどれが要件に1番合う形かを比較し吟味していきます。
今回は割愛しますが、UIの方向性が何個かできたら社内や実際のユーザーさんに1度見てもらいます。
デザイナーは客観性を失いやすいです。なので客観的な他の視点を入れながら今の方向性が上手くいきそうか、検証していきます。
ここまできて細かい部分をブラッシュアップします。
今までの工程がずれているとUIは作り直しになってしまうんですね。
このシリーズではデザインデータをいじる前のデザインを主に扱います。
その工程で最も力を発揮するツールが紙とペンです。その有用性を補足的に喋っています。
ぜひ紙とペンを使ってなかった方は、この機会に用意して進めてみてください。
いきなりデザインに入る前に、要件の意味を把握するところから始めましょう。
要件＝今回でいうとシリーズで取り組むお題になります。
現場では自分が関わっているビジネスの話や、サービス、誰がいつどんな時に使うためのデザインをするのか？
そう言ったことを理解しないとUIを作る難易度が上がります。
デザイナーが全て認識する必要は最初はないですが、理解しているディレクターやビジネスサイドの人に聞きながらしっかり確認するところからデザインを始めることがとても大切です。
動画の中ではどんなお題なのか？を解説しています。
ここでの話を理解しないと、これからやることが難しくなるので、しっかり理解するところから始めましょう。
お題のドキュメントはこちら
https://www.notion.so/takumikai/22-10-7001520c01224c57807c209640de85fe#f212f02a13d644828f885e9d21311c70
補足的な動画です。
現場でも要件の意味がわからない部分や、もっと知れるとデザインイメージが湧きそうなこと、色々浮かぶと思います。
そういう時は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
※他の人への共有は避けてくださいね〜。
自分の独自の考えではなく初心〜中級者ぐらいまでは、すでにあるUIの中からアイデアを選んで参考にして組み立てていきましょう。
ラフの段階からどこに何を配置するのか？を参考を見ながらアイデアを出していきます。
いきなりデータを作らない理由としては、データでアイデアを考えるのは時間が掛かるから。手書きだとすぐにイメージを確認できる。そのため”何を作るのか”を紙でまとめてからデータで起こして詳細をチェックするという工程を取っています。
なのでこの段階で、どういう情報設計にすると要件を満たせるか？という視点でガンガンアイデアを出していきます。（動画だと１アイデアですが、こんなノリで色々出していくのもこの時点でありです）
UIはあらゆるブロックで、ナビ、コンテンツ、アクションの3つの役割で構成されています。
それを意識して情報をデザインしていきます。
UI3つの基本構造についてはこちらの動画を。
https://www.bo-no.design/contents/uivisual-6-3
ラフの段階で、何をどういうグループにして、グループ内の情報はどういう関係性なのか？を考えながらデザインをしていきます。ポイントは情報同士の親子関係、グループ関係という”構造”を意識してまずは考えていくことです。
装飾は後から可能なので、肝心な伝えたい情報の優先度などが崩れてしまうとそれだけで良いUIを作ることから離れてしまいます。なのでこの段階から構造を意識して組み立てていきます。
この後のフローでも使うので、こちらで確保してください〜！
↓コピペして使ってください（Figma）
UIの基本的なパーツ（フォントや余白、色）に対して役割が分担されている状態で構造設計をするとかなり楽になります。見た目的なバランスは役割に左右されずに後から変更できると思うので、一旦ビジュアルが定まってない時は仮で定義しておいても良いかなと個人的には考えています。
ブロックのサイズに関しては割合でサイズを決めるとバランスを考えやすくなると思います。絶対値（800pxが多いetc）で考えちゃうと、~~なサイズはダメなの？という本質的じゃない問いを生み出すと思います。
デザインはパーツ同士の相対的なバランスで良い悪いなどを判断していくので割合で構造を考えて設計していくと良いです。
かつブロック配置に関して、基本的にはシンメトリーに組むとバランスは良くなります。特別な理由がない場合はシンメトリーに見えるようにバランスを考えて配置していくとオーソドックスな見た目を作りやすいと思います。
自分の頭ではなく他サービスがどういうバランスで構造化してUIを作って表現しているか、参考にしながら組み立てましょう。まずは存在しているデザインから謙虚に学んでいく姿勢が大事です。
構造化＝ブロック化が6-7割なので意識できるデータ設計をすると自分でも見直しやすいです。グループにする基準＝意味のグループになっているなので、それを意識しながらデータも組めるようになっていくのが大切です。
前回まででUIを１つ具体的なイメージをデザインしてみました。動画を観る方は「結構出来上がったらこれで良いのでは？」と思うかもしれません。（実際イメージのついてる僕が作っているので、そんなにいじる必要はないかもしれません）が、ラフは完成度を求めるものではないです。要件を基本を踏襲して具体的にしてみる（UI）とどうなるか？を自分の目で見れるようにするためのものです。なので完璧でなくて良いし、荒くともまずは形にすればOKです。
このフェーズでは、このラフを使って目に見える形で「要件」と「具体」を照らし合わせて”さらにどうすれば要件を満たした良いUIになるか”のアイデアを検討していきます。
ラフで作成したUIが本当に要件を満たせているか？よりよく満たせる形はないか？議論した方が良い箇所はないか？を整理していきましょう。自分で自分が作ったラフUIを”よりよくするため(改善)”にはどうしたら良いのかを考えていきます。これがデザイナーとしてはとても重要です。自分で自分のアイデアをブラッシュアップできる、人の意見や教えがなくても進めていける突破力は提案力にもデザイン力にも直結していきます。
改善の目線はあくまで”ユーザー”であり”要件”です。自分の感覚だけで考えないようにしましょう。
これらの癖を付けつつ、具体イメージで想像しやすくなった状態でさらにアイデアを出していきましょう。
ラフがラフである理由は”荒くても良いから形になっている”ことにあります。この完璧じゃない具体物から”要件を満たすためには”さらにどうしたら良いのか、その視点をコメントしましょう。
ツッコミを入れたFigma
https://www.figma.com/design/LVkZw68g5yIabsYGmDEvf0/%F0%9F%9B%AB%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E6%83%85%E5%A0%B1%E8%A8%AD%E8%A8%88-I%E5%87%BA%E5%BC%B5%E7%94%B3%E8%AB%8B?node-id=323-1142&t=DUBGf49LeW1oCbJd-1
２つです。「ユーザーが軸」になっているか。「要件を満たす」ための視点か。です。ボタンが小さい、押しづらい、そういうのも大事ですが、1番はそれが「要件を満たすため」に必要だから、ボタンが小さいのか。になります。
スタイリングはまずは”ふつう”のものをいつでもデザインして欲しいので限りなく単純なクオリティの低さはスルーできると本来は良いです。が、最初はそんな完璧にもできないので、どうしてもスタイルが気になる人は項目を分けてツッコミを入れましょう。
デザイナーは放っておくと見た目しか気にかけないようになってしまいがちです。この癖がある人はうまく自覚しつつ”構造”と”スタイリング”で考えるポイントや時間を区別しましょう。
ツッコミの方法論は特に手法がありません。”UIの理解”と”要件、ユーザーの理解”の深さによって良いツッコミができるかどうかが決まってきます。
ただセンスではありません。既存のUIを知っているかどうかなどの、知識と経験になります。
なので、まずはUIからヒントを得るために参考UIを集めて、比較してツッコミを考えたりしてみましょう。
どうすればよくなるのか？と言われるとバラバラとアイデアを出すかと思います。それでも良いです。が、多くなればなるほど、「あれーこれって何に意味があるアイデアなんだっけ？」となる確率が高いです。発想は広げつつ、「目的⇄課題⇄アイデア」をしっかり意識して出すことで、迷いがなくなります
”何に対して考えなきゃいけないのか”がわかればアイデアも出しやすく可能性も高まります。漠然と考えるより、明確な問いに対してアイデアを考えた方が良いケースも多いでしょう。そういう時に使える考え方が”フィッシュボーン図”です。
の３ステップでアイデアを出しやすくかつ整理しながら進めることができます。
「こういうUIなら解決できるかも..」を考える時は”必ず”参考のUIを隣に置いて考えるようにしましょう。
知識がない頭の中のアイデアだけを信用するのはリスクが高いと思います！
アイデアの優先度が高いものを全て検討するために具体化（UI）にしていきましょう。様々なパターンをリリース前に検討することで「意味のなかった開発」や「出してみて効果がなかったUI」を極力減らすことができます。
かつパターンを検討することが”何が今回の要件にとってベストか”を自分で考える行為になります。なので、UIに対して責任が増しますし、説得力を自分でデザインすることができます。
アイデア出しのFigma
https://www.figma.com/design/LVkZw68g5yIabsYGmDEvf0/%F0%9F%9B%AB%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E6%83%85%E5%A0%B1%E8%A8%AD%E8%A8%88-I%E5%87%BA%E5%BC%B5%E7%94%B3%E8%AB%8B?node-id=302-3315&t=DUBGf49LeW1oCbJd-1
相手から「こういうのもよくない？」と言われた時に、すでに検討済みな場合はメリデメと具体をシェアして議論をすることができるのでとても信頼されるデザイナーとして見られる確率も上がります。し、ユーザーメリットをデザインすることにも繋がりやすいです。
要件を満たすためにも、1度作ったUIを元に、さまざまな方向性を検討して”可能性”を潰していく、1度検討するのが使いやすいUIを考える上でとても大事です。
この動画では「表UI - TableUI」に焦点を当てて、細かくUI案を考えている様子を見ることができます。
ブラッシュアップFigma
https://www.figma.com/design/LVkZw68g5yIabsYGmDEvf0/%F0%9F%9B%AB%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E6%83%85%E5%A0%B1%E8%A8%AD%E8%A8%88-I%E5%87%BA%E5%BC%B5%E7%94%B3%E8%AB%8B?node-id=423-2540&t=DUBGf49LeW1oCbJd-1
1度作ったもの、今作っているもの、「参考のデザイン」、「要件」…を比較したり、行き来したりして”何が最適か”を検討するのが大事です。
満足いかない、イメージと違うのであれば”何が違うと思うのか？”を自分で出して、さらに違うバージョンのUIを作る…という動きをすることで、自分のアウトプットのクオリティと耐久性が上がります。情報設計のシリーズではありますが、この動きをすることが”デザイン力”を伸ばすことに直結します。かなり大事なことなので、動画の中でしっくり行ってない様子を確認しながら、「こういう時もあるけど考え続けるんやな…」を感じてもらえると嬉しいです。笑
自分が取ろうとしているUIの基本パターンがないか？を「ガイドライン」と一般的に言われる”Material Design”で確認すると良いです。全て覚える必要はないですが、作る時に調べる場所の1つとして持っておくと良いかなと思います。
□ Date Table - Material Design
https://m2.material.io/components/data-tables
要件を満たす情報設計が大体固まってきたら、配色など装飾部分にも手を出していきましょう。この動画では「アクション」部分の使いやすさと意味構造を整えるため、アクションブロックのUIの配色を考えていきます。
UIは見るだけじゃなくてなくて“操作”するのを目的に、平面のビジュアルを作成するジャンルです。なので使い手が「この画面では何をすれば良いのか？」が分かりやすいほど、使いやすいものになる確率が上がります。
そのため「アクション」できるかどうかが分かりやすいか、押した時の反応が良いか、はかなり重要な要素になってきます。色を適用すると、周りより目立ちやすくなるため「これは押せるUIオブジェクトである」と使い手に示すことが容易になります。
逆に色を使いすぎると”どこが押せる場所なのか”が分かりづらくなる確率が上がるためUI作成の難易度が上がります。
このような理由で有彩色（白黒以外の色）は基本的に1色のみを軸にまずはUIに適用していく、アクションには色をまずは配置するが重要になってきます。
動画では「UIビジュアル基礎」でも出てきた「ボタンの強さのヒエラルキー」を紹介しつつ、配色をしていきます。
動画内だと完全アドリブで製作していたのですが、話しながらかつ時間の問題で詰めきれなかった部分をシェアします。だいぶ変更点があります。これが正解だ、ではなく、”こういう考え方もできるのか”、”アイデアを出す考え方”、”細部のアイデアの出し方”などを学んで、要件を満たすUIのパターン出しが自分でできるように参考にしてみてください。
■ 目次
完成系のUIデータはこちら
https://www.figma.com/design/LVkZw68g5yIabsYGmDEvf0/%F0%9F%9B%AB%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E6%83%85%E5%A0%B1%E8%A8%AD%E8%A8%88-I%E5%87%BA%E5%BC%B5%E7%94%B3%E8%AB%8B?node-id=397-2113&t=DUBGf49LeW1oCbJd-1
※コピペしてお手元で確認してください。編集権限は付与できないです
