そのデザイン案の意味を考える

Slide 1

Slide 1 text

Yasui Risa そのデザイン案の意味を考える - 的あてゲームで疲弊しないために - 2020. 7.12 https://kfug.connpass.com/event/178470/ Webデザイン・Web制作に関する勉強会 #8 chatbox.inc / Yasui Risa

Slide 2

Slide 2 text

Yasui Risa デザイン / UI改善 / イラスト chatbox.inc / Yasui Risa

Slide 3

Slide 3 text

デザインをしててこんなことありませんか？ chatbox.inc / Yasui Risa

Slide 4

Slide 4 text

こんなことってありませんか？ chatbox.inc / Yasui Risa 多くの案を作ったのになかなかOKがもらえないたくさんを作ったものの良くなってるわからないどこが悪くてどこを改善したら良いかわからなくなってしまう結局最初の案でOKになり多数の案が徒労になる 

Slide 5

Slide 5 text

なぜこういうことが起こるのか？ chatbox.inc / Yasui Risa

Slide 6

Slide 6 text

依頼者からの要望をただそのまま受け取って作る chatbox.inc / Yasui Risa なぜ起こる？その①  クライアントかわいくて使いやすく！

Slide 7

Slide 7 text

chatbox.inc / Yasui Risa そうするとどうなるか？ ①作り⼿の中にある情報が⾜りない or 整理できていない

Slide 8

Slide 8 text

NGという情報しか受け⽌めれていない chatbox.inc / Yasui Risa なぜ起こる？その②  クライアント悪くはないんだけどもう少し改善してください！

Slide 9

Slide 9 text

chatbox.inc / Yasui Risa そうするとどうなるか？ ②NGに対しやみくもに「作ること」のみで解決するしかなくなる

Slide 10

Slide 10 text

解決⽅法が「根性でがんばる」しかない chatbox.inc / Yasui Risa なぜ起こる？その③  デザイナーとにかくたくさん作ってみてもらおう！

Slide 11

Slide 11 text

chatbox.inc / Yasui Risa そうするとどうなるか？ ③デザイン案の増や⽅が当てずっぽうになっていく

Slide 12

Slide 12 text

原因は何なのか？ chatbox.inc / Yasui Risa

Slide 13

Slide 13 text

chatbox.inc / Yasui Risa 原因「⾒た⽬を作る作業」しか⾒えてない

Slide 14

Slide 14 text

「⾒た⽬を作る作業」だけでなく「作り⽅」へフォーカスする chatbox.inc / Yasui Risa 解決策

Slide 15

Slide 15 text

作り⽅にフォーカスするためにはまず、コミュニケーションを⾒直す必要がある chatbox.inc / Yasui Risa 解決策

Slide 16

Slide 16 text

どうすればいいのか？コミュニケーション編 chatbox.inc / Yasui Risa

Slide 17

Slide 17 text

chatbox.inc / Yasui Risa 作り⼿の中にある情報が少ない時  クライアントかわいくて使いやすく！依頼者から聞き多くの情報を集める同じ⾔葉でも互いに同じ想像してることはほぼないいろんな⽅向から確認し、すり合わせるどんな？なぜ？どんな時に？誰にとって？何のために？どうなれば使いやすい？

Slide 18

Slide 18 text

chatbox.inc / Yasui Risa 情報が整理できていない時作る前に整理する作る前に仕様を整理し、あっているか確認するここで間違えていると作ってもOKとなりにくいどんなものを作ればいいのか？そもそもなぜ作るのか？ターゲットは誰なのか？どんなシーンで使われるもの？ユーザーにとってどんな価値があるか？etc…

Slide 19

Slide 19 text

chatbox.inc / Yasui Risa 作る以外の解決⽅法を知る NGの内容を聞き、課題を明確にする NGの理由をしっかり聞いてどこがどう変わったらOKなのかはっきりさせる  クライアント悪くはないんだけどもう少し改善してください！改善しないといけない理由や良く思っていない箇所をはっきりさせる

Slide 20

Slide 20 text

chatbox.inc / Yasui Risa 当てずっぽうをやめゴールを⾒据える⽅法を探す聞き⽅を⼯夫しながら意⾒を引き出す複数案が必要な場合でもある程度まで的を絞れる質問をするにぎやか単⾊シンプルカラフル

Slide 21

Slide 21 text

どうすればいいのか？作り⽅の⼯夫編 chatbox.inc / Yasui Risa

Slide 22

Slide 22 text

chatbox.inc / Yasui Risa 理由を考えながら⼿を動かす情報をもとに課題やなぜこのデザインなのか？⾃問しながら⼿を動かす⾃⾝の想像や憶測ではなく聞き出した情報をもとに考える・・・

Slide 23

Slide 23 text

chatbox.inc / Yasui Risa デザインに意図を添えるデザインだけパッとみせられると⾒る側の好みでの判断になりがち… 意図・コンセプト何を解決しているかメリット / デメリット etc きちんとデザインごとの意図やほか案とどう違うかなど添えて伝える

Slide 24

Slide 24 text

chatbox.inc / Yasui Risa 絞った的のなかでOK基準に近づけるかっこいいかわいいより使いやすさ重視かわいいシンプル使いやすさより⾒た⽬重視にぎやか当てずっぽう的にむやみやたらで提案せず絞った的の中で少しづつ精度をあげる

Slide 25

Slide 25 text

⾃分の場合はこんな感じで実践してきました chatbox.inc / Yasui Risa

Slide 26

Slide 26 text

chatbox.inc / Yasui Risa 例1：情報整理 Who どんな⼈に  What 何を  Why なぜ  Other いつ/どこで/ etc…  わかっていることであっても書き出して整理実際に使われてるシーンをイメージしたり埋めれないところは確認漏れとして早めに聞いておく

Slide 27

Slide 27 text

chatbox.inc / Yasui Risa 例2：⽬的・課題の整理上位下位関係分析法という⼿法を⽤いながら、要望の分類分けや重要度、本質的なニーズの洗い出し

Slide 28

Slide 28 text

chatbox.inc / Yasui Risa 例3：イメージをできるだけしぼる PHPが好きな⼈々みんな Kaigi トーク / 集う / PHP ゾウ / 楽しいお祭り⾮⽇常 / にぎやか /

Slide 29

Slide 29 text

chatbox.inc / Yasui Risa 例4：意図を添えて伝える

Slide 30

Slide 30 text

まとめ chatbox.inc / Yasui Risa

Slide 31

Slide 31 text

まとめ chatbox.inc / Yasui Risa 依頼者と⼗分な情報のやりとりが⾏えているか作るものが戦略のないあてずっぽになってないかお互いのイメージをすり合わせできているか作る時にそのデザインである理由を考えれているか作り出す前に仕様や課題が考えがまとめれているか制作物の伝え⽅に⼯夫の余地がないか多くのデザイン案を作ったのにうまくいかないときは作る作業だけでなく他にも⽬を向ける

Slide 32

Slide 32 text

今⽇の話が少しでも制作のお役に⽴てたら幸いですご清聴ありがとうございました！ chatbox.inc / Yasui Risa