0からのデザイン指針

注意.icon

ただ、個人開発のデザインに頭を抱えてきた中で、少しだけコツのようなものが見えたきがしたので、備忘録的にここに記録しておく。

先に重要事項

hr.icon

これだけは忘れちゃいけない重要事項を書き殴っておく。頭に叩き込んどけ。

上段工程がいかに大事かを血肉で理解しよう。簡単な分析じゃ足りない。もっと深くもっと深く。

最初は体験設計に全振りしろ。見た目なんて最後の最後や。

Figmaでデザインを作って「これだ！俺は天才だ！」と思って一晩経つと「やっぱ違うな...なんか違う...」となって無限ループに陥っていた原因はここにある。

建物は土台がないと作れないように、UIデザインも土台がないと作れない。

というかUIデザインは、製品の主役じゃない。

先にUIデザインから触り始めても安定したものは絶対にできないと心得ておくこと。

完成するどころか、ずっと無限ループにハマって時間を溶かすことになる。

ところで「体験設計」とは何か

ターゲットの抱える問題が解消されるまでの具体的なプロセスを、ユーザー抱く感情や印象も含めて設計すること

Tips：ターゲットが持つ問題は上手く解消されてないジョブとも言える

体験は2つの軸からなる

1. 機能的体験

問題解決のプロセスそのものであり、ユーザーの行動も考慮しながら解決までの論理的な流れを設計する部分

2. 情緒的体験

ユーザーがプロセスの中で、どのような気持ち・感情を抱くか、できる限り感情的な満足感を与えれるよう設計する部分

例えば、1が同じだとしても、ターゲットが女性か男性かによって「2」は大きく変わるはず。

性別以外にも、年齢や文化などでも変わってくる。

たとえ男女関係なく同じ問題を解決できるツールだとしても、女性的な見た目の場合、男性的には気持ちよくないはず。極端な話そういうイメージである。

なお、機能的体験もターゲットに左右される。2だけの専売特許ではないので注意。

情緒的体験こそがビジネスにおいて重要なファクター隣らない限り。

なので、0 -> 1ビジネスでMVPを作る際は機能的体験を重視して設計すると思われる。

そして、体験設計よりも先にターゲットなどの上段工程の分析を徹底的に行うこと

耳にタコができるくらい言われるだろうが、一番大事。

なぜならここが基礎であり土台だから。ここがないなら体験設計すらできないぜ。

あなたが作るものも、誰かの抱えてる問題を解決するために作ろうとしてるはず。

「やってるよ！」って思ってる人でUIデザインに無限ループしてる人たちは分析が足りてない。

ターゲットの分析であれば、表面的な性格とかだけじゃなく、普段の生活レベルまで分析する必要がある。

彼らは、生活のどう言うタイミングでどんな感情を抱き、何のためにその行動を取るのか

彼らは、その行動を取る際いつもどんなことをしてるのか、普段の性格としてどう言う行動傾向があるのかなどなど

表面的な分析じゃなく、もっともっと深層まで分析しないと意味ない。

あと競合と差別化したいポイントも意識しておくと良い

競合と違ってどう合って欲しいのか。

などを意識することで、その後のフェーズの意思決定に役立つ。

自分の課題から始まる製品作りのフロー

hr.icon

1. その課題に関して自分をひたすら深掘りする

その課題は他の代替案でうまいことできない？

できないのはなぜ？より理想のイメージはどんなの？

最終的にはどうなりたい？どこを目指してる？

など

ターゲットが自分な分だけ楽なはず

2. その課題を解決できる体験を細かく言語化する

現状からどう始まり、何とどう関わるのか

その関わりの中で何が変わるのか

それらの連続の旅路で最終的にどう解決まで至るのあ

言葉で表現することが大事。自分の性格とかも考慮して理由も答えれるように

3. 作るものがあるなら、それの性格とかも考えておくと良い

ユーザーに抱いて欲しい印象とかそう言うイメージ

性格ともいったりする。クール？厳格？荘厳な？かわいい？ニュートラル？シンプル？

適したコンセプトは何だろう？

みたいな抽象的イメージを言語化しておく。

これが後々効いてくる。「ムードボード作成」とかよくあると思うが、このムードボードを参考にする際に、どのムードを選ぶかはこの工程が効いてくる。

4. 作成する製品の情報設計的なことする

製品を使う際、どの情報をどうやって取得できるか

製品に対して何かアクションを行う際、どのフローで行えるのか

自分を考慮しながら、設計していく

5. ワイヤーフレームで「3」を表すPoCを作る

デジタル製品なら、画面設計になる

「3.」を元に、画面のレイアウトを設計していく

複数案を出しながら、どれが良いかを選んでいく

6. この段階でビジュアルとか適当に動くものを作ってもいいと思う。

動くものを使いながら継続して使えるか、使えないなら何がダメかなどを分析する。

意匠とか気にする段階ではない。なぜなら、情報設計が自分の課題解決にフィットしてないと作り直しになるから。

もし先に意匠してしまうと、作り直しのコストが高くなる。

7. ビジュアルを固めていく

ここは細かいUI/UXデザインのテクニックを使える場面

UIデザインの4原則はもちろん、配色だったり、UXのTipsなど使えるものはたくさんある。

「1 ~ 3」での情報も利用して理由を持ってビジュアルを固めたいね

角丸とかフォントとかも性格を決める要素になるからね。

あと余白とか文字サイズもそう。目に入る要素全て性格を決める要因になる。

8. ビジュアル決まったらシステム実装！

6あたりの段階からエンジニアが入っていきていいと思う。

実装コスト高いようなデザインが採用されたり、情報設計としてコスト高くなりそうな設計されたらたまらないしな。

それを言うなら、「4」の段階から関わったほうがいいかもな。

雑書き

「誰が」「どんな問題を持っていて」「どうなりたいのか」に関する、やり過ぎな程の分析が必要

ここを適当に済ませてデザイン実装に取り掛かると詰む。

地盤がグラついた状態で進むのはお勧めしない。

「デザイン基本原則」とか「配色理論」「その他UI/UXのTips」などを初学者は学ぶだろうが、それだけでは自分が納得できるデザインは作れない。

それらのテクニックは、製品全体の中の表層の部分でしかない。

本当に必要なのはもっと奥、もっと核の部分からである。

「整列」「グループ」「繰り返し」「強調」などを使えても、その核の部分は作れない。

細かなテクニックでいくら表層をこねくり回しても、核が無ければ意味がない

UI付きデジタル製品を作る全過程において「見た目を作る」部分は結構後ろのフェーズである。

システム設計に入る直前か並行して作るくらいには後ろである。

焦るな、いきなりFigmaを開いて見た目を作ろうとするな。早すぎる。

見た目をデザインするな、体験をデザインしろ

ターゲットに提供する体験の手段としてUIデザインが関わってくると理解せよ

なお、「体験」を抽象的な1文のメッセージと誤解してはいけない。

体験をデザインするとは、文章ベースで「この状況でユーザーがこれを使い、こういう結果を得て、次に...」みたいな感じだ。

細かく細かく、ユーザーに与えたい体験を言語化することが先決である。

そういう体験のデザインから始めよ。

デザインは手段である。見た目とか配色も、その体験を補助するために存在すると思え。

ユーザーにこういう気持ちを抱いて欲しいからこの色にするとか。そういうのができる。

デザインの配色を決めれないのは、いろいろ要因はあるが、いずれにせよ上段の分析が足りないことが原因。

少なくともターゲットが明確になってないなら決めれない。

他にも、使ってる最中にどういう感情を抱いて欲しいか、商品に対してどんな印象を持って欲しいか。

競合の色はどうなってるか。

などなど、色を決定する要因はいくつもある。

それらの分析を疎かにしてると色なんて一向に決まらない。

「レイアウト」や「どこにどの情報をおこうか？」なども同じ理由。

ターゲットと与えたい体験、あとは行動の優先順位などが決まるなら、自ずとどこに情報を置くべきかも論理的に決まってくる。

どういうレイアウトだと良さげかも決まってくる。

完璧100%の答えはないけれど、理由があることで修正もしやすくなる。

ターゲットがズレてたら、そのズレを考慮して設計し直せばいい。

ターゲットは合ってるが、一部の情報設計、レイアウトが合ってなかったなら、そこを変えればいい。

「こういう理由で、こういうデザインにしている」があれば、それを検証することができる。

本当にそれでいいのか？を検証できる。

でも、理由がないなら検証することすらしないだろう。

体験をデザインする際、使う製品の性格も大事になる時がある。

体験設計は、冷徹な問題解決だけを意識してできるものではない。

感情の部分もすごく大事。感情や印象も意識しながら設計する必要がある。

ユーザーが製品を触る際、製品に対してどういう感情・印象を抱いて欲しいのか。

これを決めれていると、UIデザインなども方向が見えやすくなる。

これがないと、何か製品のコンセプトとズレた見た目になるとかもある。

ユーザーが製品に対して抱く最初のイメージとズレたものがUIとして出てきたら違和感あるだろう？

認知の時にはポップで可愛いらしい印象だったのに、蓋を開けたら堅苦しい雰囲気だったらゲンナリするだろう。

合わせろ。