B2BのUIデザイン、学んじゃう？〜その10：わたしはデザイナーだから、手を動かす〜

こんにちは、さおり(@iropon30)です。

この記事では、私が受講している実際のプロダクトで学ぶB2B UIデザイン [Uzabase B2B SaaS Business CDO]×[1on1] を通して学んだことや感じたことなどをまとめていけたらなと思います。備忘録です。

中間発表と前回の1on1はこちら

前回の1on1で迷いが全面に出ていた私。中間発表後の1on1で喝をいれていただき、あとは腹をくくってつくるんだ！と自分を奮い立たせました。

クライアントさんの名前やプロダクトをだせないので、ここからはUIデザインを通して学んだことを書いていきます。喝を入れていただいた後から3回1on1がありました。今回は2回分の1on1の振り返りを書いていければと思います。

2022/03/15

前回の1on1の時にいただいたアドバイスを元に、自分が思っているプロダクトやサービスに近しいもののHPをたくさん見ました。競合他社のプロダクトというよりも、「自分が提案したいもの」が実装されているサービスを重点的に見ていきました。また、普段プロダクトやサービスを見るときも、こういう見せ方もありかも？と思いながら見ていました。

上記を繰り返すと、自分の中にもだんだんイメージが湧いてきたので、やりたいことを整理して手を動かしてみることに。先週とは変わり、イメージを形にしたいとどんどん手が動きます。先週のうちにこれをやっておけばよかったという後悔の念です。ただ、この経験をしたことにより、こういう場合は、このような方法があるのか！ということを知れたこと、また普段からプロダクトを意識的に見る必要があるなと感じました。

だんだんしたいことがわかってきたと言っていただいた！

私は言葉で説明するのが下手。（という逃げを今後しないために、現在訓練中）
いろんな画面をつくっていき、トモさんに見ていただくと「だんだんしたいことがわかってきた！」と言われました。複数の画面から2画面に絞り、その完成度をあげていけば良いとおっしゃっていました。

やることが見えてくると、後は走るだけだ！となりますね。

この日いただいたアドバイスや記憶したいことは

• 遷移するページもデザインで、ここからページAに飛ぶのか、Bに飛ぶのかどちらがいいのか？を考える必要がある
• ナビゲーションの位置や順序を改めて考える（使うことを想定して）
• それぞれのブロックの境目をわかりやすくする。例えばメニューはメニュー、ヘッダーはヘッダー。今回はくっつけないほうがいいのでは？
• タイトルひとつも細かく考える。「メモ」とすると簡単なメモのように捉えられてしまう可能性がある。他の言葉を探してみる
• 参考にしても、全く同じものになるわけではない。手を動かしたり、プロダクトを見る目で見ることで見えてくるものもある
• デザインで勝っても、事業で負ければ意味がない

今回、ワイヤーフレームやプロトタイプをつくる上で「ダミーテキストを入れず、想定しているものを入れよう」と言われていました。入りそうな内容を自分で考え、タイピングしていきます。最後に「今日の総括」のようなものを入れていたのですが、自分でワイヤーフレームに「今日の総括」を書いていると、上と同じになるな、何入れようとなりつつも、そのままにしていました。

トモさんがじっとそのページを見て「ここに総括いるかな？いらない気がするな」とおっしゃっていて、改めてダミーテキストを入れず、自分で考えて入れてみるの大事なんだ！と感じました。違和感を大切にしなければと思いました。

ここからラストスパートになるので、発表のストーリーを考えながら手を動かします。

また実務ではどのようにプロダクトの案、デザインをしていくのでしょう？と質問したときも具体的なイメージを共有していただきましたが、とりあえず「この本読んでイメージつかんでみて」とおすすめされたので、次の積読会はこれを読もうと思いました。

色の決め方、意識を持って色を決めること

他の方のチャットを見たり、中間発表のフィードバックから「プロダクトに入れる色を決める」というのは、とても意思のいるものだと感じました。「色はいつも最後に決める」

前回の課題のひとつに「10段階のグレースケール、リンク色、アクセント色を決める」ことがあり、私はまずベースのカラーを決め、それを10％透過して色をスポイトして10段階をつくりました。

…そもそも、色決めってどうすべきなのだろう？と思い、Discordで質問してみました。

グレースケールを10段階で（ちなみに、5段階でも15段階でもピッチは自由）決める意図は大きく２つで、
1.色選びの効率化
2. 有彩色の色を考える必要がなくなるので、レイアウトと造形に集中できる

モノクロで画面がつまってないとき、有彩色を使用しても画面の完成度はあがらない。

色はH：色相。S：彩度。B：明るさ。 これらを使って、10段階をつくる。 例えば、B：100、S：100の場合。それぞれ-10ずつしていきます。 色相は基本固定。赤系の黒（ナチュラルグレー）か青系の黒（ニュートラルグレー）かは先に判断する。

また、ミニチュア模型をつくる意図も聞いてみました！全体のイメージをざっと掴むためとのことでした。そして質問した後にプロダクトを見ていると、ミニチュア模型をバナーに使っている会社さんもあって。ざっとしたイメージを掴む・伝えるためにつくっておくの、いいなと思いました。

また質問をしたときに、色を決める時に迷っていたけれども、Adobeのデザインシステムがわかりやすいよと、他の受講生の方からアドバイスいただきました！

色の定義に意味づけや使用用途書かれているの、勉強になります。

2022/03/22

前回いただいたアドバイスを元に、画面を細かくつめていきました。トモさんが「先々週の悩んでたときが嘘のよう！」と笑いながら言ってくださったのが印象的でした。発表までもっとつめるぞー！という気持ちになりました。

• ナビゲーションは視線の流れる方向を意識する（横、縦、横、縦、横になるのは、あまりよろしくない）
• 意味が違うものを、同じアイコンにするのは良くない。（意味が違うものを同じ★アイコンにしていた）
• グレーが濃い、内容よりもグレーの背景に目がいく。内容が入ってこない（色の意識を持つ）
• ボタンの色とカテゴリーの色を一緒にしている。押せるものとそうでないものは区別（せっかくリンクカラーとアクセントカラーを決めたのに…）
• borderひとつとっても意味づけ（線があるものが入力、ないものは表示のようにわけてもいい）
• ナビゲーションに並ぶものは、情報の階層として同じ
• たくさん画面があるより、ひとつにまとめるほうがいいけど、すべてひとつにまとめようとするのも良くない（場合によるよね。場合を考えよう。オブジェクトを意識）

「ナビゲーションは視線の流れる方向を意識する（横、縦、横、縦、横になるのは、あまりよろしくない）」のフィードバックですが、こう書いてみるといや…疲れるな…となりますよね。（でもFigmaで見ると、なんかできてる感がでるんです。）

最初に手書きしてみるという課題がありましたが、改善段階になるとなかなか手描きに戻ってやってみることはなく…。改めて手でかいてみるって大事だなと。ちなみに、実際の画面もこんな感じで割ってました。目線が泳ぎますね…

普段プロダクトを見る時にも、情報がどういう風に割られているか？というのを意識して見てみるのが、訓練かなぁと。確かにそういう目で見ていなかったなと…1週間、そのような目でプロダクトを見る、見に行くことを意識しようと思いました。

なにがオブジェクトか？構造化は？を考えてから手を動かしても良かったなと思いました。迷ったら少し戻ることも大切だなと。

この1on1で、私が提案したいことがすっと言語化していただきました。すごく気持ちがすっきり。本当に全力疾走するだけだ！という気持ちになったのを覚えています。

まとめ

あと1週間と少し、駆け抜けるぞー！となりました。どちらの1on1のときも「ここは必要？いる？」とすぐに判断できるのは、経験と普段からプロダクトを意識して見られているからかな？と感じました。

次は最終発表前の1on1と最終発表のことをかければと思います。突っ走りますー！