Core skills of the Design for Front-end

FRONTEND CONFERENCE 2019, 2nd Nov 2019
デザイン・設計の体幹とスキル

Transcript

1. 設計 体幹 と スキル の デザイン
2. 山下　一樹 メーカーにてエンジニア・企画を経て デザイン＋アプリ開発を本業に 株式会社インパスを設立。 IA、UXデザイン、ユーザビリティが専門。 @yamashitakazuki
3. 使いやすい 「良い」ものを ୭͠΋͕࢖͍΍͍͢ɺྑ͍΋ͷΛٻΊ͍ͯ·͢ɻΞΫηγϏϦςΟ΍ϢʔβϏϦςΟɺ69%
   ΛֶͿͷ΋ͻͱͭͰ͢ɻ
4. UXDの手法は有用だが 使えるようになるには経験が必要 ユーザーシナリオ アクティングアウト ジャーニーマップ ペルソナ ユーザーインタビュー エスノグラフィ 上位下位分析 オブザベーション ヒューリスティック評価 ͨͩσβΠϯ΍࣮૷Ϩϕϧͷઃܭ·Ͱ׆͔͢͜ͱ͸༰қͰ͸͋Γ·ͤΜɻखΛಈ͔͢ΤϯδχΞ΍σβΠφʔͳΒಛʹɻ
5. ノンデザイナーズ教本で勉強！ ϊϯσβΠφʔζ͸ςΫχοΫͷڭຊͰ༗༻Ͱ͋ͬͯ΋σβΠφʔͷ಄ͷϓϩηε·Ͱڞ༗͢Δ͜ͱ͸೉͍͠Ͱ͢ɻ
6. 表層 骨格 構造 要件 目的 アプリ, web ൃද͔Βܦͬͨ͜ͷஈ֊Ϟσϧ͸ɺղऍ͸ม͑ͳ͕Β΋ࠓͰ΋ͲͷϨΠϠʔͰձ࿩Λ͍ͯ͠Δ͔֬ೝ͢Δͷʹ໾ཱͪ·͢ɻ
7. UX ビジネス要件、戦略、ビジョン ユーザーが実現するゴール ゴール実現までの要素 ゴールまでの道を引く ユーザーとの対話の場をつくる ビジネスモデル 要件定義 機能設計 ワイヤーフレーム UI デザイン、インタラクション 表層 骨格 構造 要件 目的 ػೳࢤ޲ͩͬͨ΋ͷ͕Ϣʔβʔࢤ޲ʹཁ݅Λߟ͑ΒΕΔΑ͏ʹͳͬͨͷ͸
   69
   σβΠϯ͕ݴΘΕ͔ͯΒͰ͠ΐ͏ɻ
8. UX 表層 骨格 構造 要件 目的 情報設計はこれらをつなぐ体幹 ͻͱͭͻͱͭͷϨΠϠʔͰޠΔ͜ͱ͸
   69
   σβΠϯͰ͋Δͱ͢Ε͹ɺ৘ใઃܭ͸͜ΕΒΛͭͳ͙ମװͱ΋ݴ͑·͢ɻ
9. 情報設計 Step. 1 情報を棚卸しする
10. 情報を棚卸しする 正確さ・改訂 分類する 発見・作る 情報不足 不適切 情報過多 「分かりにくい」「使いにくい」原因を見つける
11. ੝߹ͤ ম͖෺ αϥμ Ұ඼΋ͷ ಛબڇ ্λϯ  ԁ ্ΧϧϏ ԁ ্ϩʔε  ԁ ্ϗϧϞϯ ԁ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ ΧϧϏ ʴ — ϝχϡʔ΁ ΧςΰϦબ୒
    
    ͓৯ࣄ 情報を棚卸しする ηϧϑΦʔμʔγεςϜͷ
    6*ɻͲ͏΋࢖͍ʹ͍͘ͷ͸
    6*
    ͷ͍ͤͰ͠ΐ͏͔ʁͦΕͱ΋ʜʁ
12. ੝߹ͤ ম͖෺ αϥμ Ұ඼΋ͷ ಛબڇ ্λϯ  ԁ ্ΧϧϏ ԁ ্ϩʔε  ԁ ্ϗϧϞϯ ԁ ஫จ͢Δ ΧϧϏ ʴ — ΧςΰϦΛબͿ ΧςΰϦબ୒
    
    ͓৯ࣄ 行為（動詞） モノ（名詞） モノと行為に分ける 情報を棚卸しする ৘ใઃܭͷୈҰεςοϓͰ͸֤ཁૉΛચ͍ग़͠ɺ໊ࢺͱಈࢺʹ෼͚·͢ɻ
13. 要素、情報など見る対象 ボタンなどのアクション 時間の経過で多くなる ➡分類して小さく見せられる サービスの成長で多くなる ➡なくすことが困難 分かりやすさに関わる 使いやすさに関わる 行為より先にある モノがある前提 情報を棚卸しする 行為（動詞） モノ（名詞）
14. υΩϡϝϯτ ࡞੒͢Δ อଘ͢Δ ҹ࡮͢Δ ϝʔϧͰૹΔ 情報を棚卸しする 行為（動詞） モノ（名詞） ࢲ͕ͨͪԿ͔Λߦ͏ͱ͖ɺ಄ͷதͰ͸ʮԿ͔ΛͲ͏͍ͨ͠ʯͱ͍͏Α͏ʹඞͣϞϊΛઌʹೝࣝ͠·͢ɻ
15. ࡞੒͢Δ อଘ͢Δ ҹ࡮͢Δ ϝʔϧͰૹΔ υΩϡϝϯτ ϑΝΠϧ ը૾ ϑΥϧμ 情報を棚卸しする 行為（動詞） モノ（名詞） ΋͠λεΫઌߦͩͬͨ৔߹͸಄ͷߟ͑Λ੾Γସ͑ɺબ୒ߦҝΛߦ͖དྷ͢Δ͜ͱʹͳͬͯ͠·͍·͢ɻ
16. ナビゲーションには名詞（モノ） 動詞（アクション）は非推奨 情報を棚卸しする ৽ணΛݟΔ ࢀՃ͢Δ ·ͳͿ ͕͢͞ ձࣾ৘ใ ࠾༻৘ใ
17. ユーザーは選ぶことにストレスを感じる 提供者側はとにかくアクションして欲しい 情報を棚卸しする
18. 情報設計 Step. 2 意図（言葉）をつくる
19. 意図（言葉）をつくる 「誰が」に最適な「良い」をつくる 対象となるユーザーが どのような思考なのか？ 認知や潜在的な考え
20. 意図（言葉）をつくる 「誰が」に最適な「良い」をつくる 認知や潜在的な考え 今日の天気は？ 服装どうしよう？ 傘いる？ 花粉きつい？ ྫ͑͹Կ͔ͷ৘ใΛಘ͍ͨͱ͖ʹ͸ͦͷόοΫάϥ΢ϯυͷࢥߟ͕͋Γ·͢ɻຊ౰ʹཉ͍͠ͷ͸ൃͨ͠ݴ༿Ͱ͸͋Γ·ͤΜɻ
21. 意図（言葉）をつくる MENU コマンドのメニュー 料理のメニュー ࢲͨͪʹ͸Ұൠతͳʮϝχϡʔʯͱ͍͏ݴ༿΋ɺͦͷ৔໘΍ϢʔβʔʹΑͬͯ͸ड͚औΓํ͕େ͖͘ҧ͏Ͱ͠ΐ͏ɻ
22. ੝߹ͤ ম͖෺ αϥμ Ұ඼΋ͷ ಛબڇ ্λϯ  ԁ ্ΧϧϏ ԁ ্ϩʔε  ԁ ্ϗϧϞϯ ԁ ΧϧϏ ʴ — ϝχϡʔ΁ ΧςΰϦબ୒
    
    ͓৯ࣄ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ 情報を棚卸しする ྫͷΞΫγϣϯϘλϯ͸͢΂ͯಉ͡ϥϕϧͰϘλϯ͕ఆٛ͞Ε͍ͯ·ͨ͠ɻಉ͡ڍಈΛ͢Δ͜ͱ͸͋Γ·ͤΜ͕ɻ
23. 意図（言葉）をつくる ஫จ͢Δ ߪೖ͢Δ ΧʔτʹೖΕΔ ஫จΛ֬ఆ ൃ஫ ࠓ͙͢ങ͏ ΋ͬͱݟΔ ΋ͬͱಡΉ ৄࡉ͸ͪ͜Β そのサービスの「共通言語」を ϢϏΩλε υϝΠϯۦಈઃܭͰ΋ʮϢϏΩλεݴޠʯͷॏཁੑ͕આ͔ΕΔΑ͏ʹɺࢲͨͪ͸ࢲͨͪͷڞ௨ݴޠΛͭ͘Δඞཁ͕͋Γ·͢ɻ
24. 意図（言葉）をつくる 「誰が」に最適な「良い」をつくる 「誰が」に最適な「良い」をつくる 対象となるユーザーが どのような思考なのか？ 認知や潜在的な考え
25. 「良い」は意図による 意図（言葉）をつくる σβΠφʔ͕બ͹ͳ͍Α͏ͳ৭࠼΋ɺϥεϕΨεͷΧδϊΛ࠼ΔΧʔϖοτʹͱͬͯ͸ʮྑ͍ʯσβΠϯͰ͢ɻ
26. 意図（言葉）をつくる 対象ユーザーの頭にある「言葉」で 提供者側の「意図」をつくる
27. 情報設計 Step. 3 分類して組み立てる
28. 分類して組み立てる 情報を分類する 構造パターンに当てはめ形にしていく
29. 分類して組み立てる 情報の分類方法 位置 アルファベット 時間 カテゴリ 連続量 Location Alphabet Time Category Hierarchy L A T C H
30. 分類して組み立てる 分類のワーク A B C D E F G H A B C D E F G H オープンソート クローズドソート ཁૉΛΧςΰϥΠζ͢Δͱ͖ʹ͸छྨͷํ๏Λҙࣝ͠·͢ɻ͜ͷͭͷ΍ΓํΛϛοΫεͯ͠͸͍͚·ͤΜɻ
31. 分類して組み立てる 分類のワーク A B C D E F G H オープンソート クローズドソート 松 竹 梅 A B C D E F G H ෼ྨఆٛΛޙʹ͢ΔΦʔϓϯιʔτ͸৽͍͠ΧςΰϦͷൃݟʹ༗ޮͰ͢ɻͨͩ͠ɺ৘ใྔ͕ଟ͚Ε͹࣌ؒΛཁ͢ΔͰ͠ΐ͏ɻ
32. 分類して組み立てる 分類のワーク A B C D E F G H オープンソート クローズドソート 松 竹 梅 A B C D E F G H Ϋϩʔζυιʔτ͸طଘͷΧςΰϦ͕໌֬ͳ৔߹ʹࢼ͠·͢ɻΧςΰϦʹ౰ͯ͸·Βͳ͍ཁૉͷ࡟ݮʹ༗ޮͰ͢ɻ
33. スマフォ UI 構造のパターンの一部 プッシュアップ モーダル ナビゲーション 1 2 3 1 1” 1-A 1-B 異なる領域の情報の移動 階層間の移動 主従情報間の移動 分類して組み立てる ࠓͰ͸
    6*
    ΨΠυϥΠϯ͕๛෋ʹ͋ΔͨΊɺΑ΄ͲͰͳ͚Ε͹ύλʔϯΛҳ୤͢ΔϝϦοτ͸গͳ͍Ͱ͠ΐ͏ɻ
34. ళһΛݺͿ ͓ձܭ ͓৯ࣄ ͍Βͬ͠Ό͍·ͤ ͓ҿΈ෺ ΧςΰϦΛબΜͰ͍ͩ͘͞ɻ ϝχϡʔ ΧςΰϦબ୒ ϝχϡʔ΍ΧςΰϦͱ໊͍ͬͨশʹҙਤ͸͋ͬͨͰ͠ΐ͏͔ʁ৯ࣄ΍ҿΈ෺Λ࠷ॳʹ෼͚Δͱ͜Ζʹ໰୊͸ͳ͍Ͱ͠ΐ͏͔ʁ
35. ళһΛݺͿ ͓ձܭ ͝஫จ ͍Βͬ͠Ό͍·ͤ τοϓ
36. ੝߹ͤ ম͖෺ αϥμ Ұ඼΋ͷ ಛબڇ ্λϯ  ԁ ্ΧϧϏ ԁ ্ϩʔε  ԁ ্ϗϧϞϯ ԁ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ ΧϧϏ ʴ — ϝχϡʔ΁ ΧςΰϦબ୒
    
    ͓৯ࣄ ΞΫγϣϯͷϥϕϦϯά͕Ϣʔβʔʹ༧ظͰ͖Δ΋ͷ͔ɺ৘ใΛΧςΰϥΠζ͢Δඞཁ͕͋Δ͔Λ΋͏Ұ౓ݕূ͠·͠ΐ͏ɻ
37. υϦϯΫ ͓৯ࣄ ্λϯ  ԁ ্ΧϧϏ ԁ ্ϩʔε  ԁ ্ϗϧϞϯ ԁ Χʔτ΁ Χʔτ΁ Χʔτ΁ Χʔτ΁ ஫จΛ֬ೝ ʴ — τοϓ΁ τοϓ
    
    ͝஫จ Χʔτ͸ۭͰ͢ σβʔτ Χʔτ΁ Χʔτ΁
38. これからの フロントエンドスキル
39. エンジニア デザイナー 作る力？ エンジニアがデザインする デザイナーが実装する ということではない ࣮૷ྗɾσβΠϯੜ࢈ྗʹՁ஋͕͋Δ࣌୅͔ΒɺΦʔϓϯԽɺ"*
    ͳͲʹΑͬͯมΘΔ͜ͱΛೝࣝ͢Δඞཁ͕͋Γ·͢ɻ
40. エンジニア デザイナー スキルをつなぐ インタ ラクション プロト タイピング データ分析 定量調査 ビジュアル アクセシ ビリティ マークアップ UI プレゼン ユーザ ビリティ εΩϧ͸৬ҬʹݶΒΕͨ΋ͷͰ͸͋Γ·ͤΜɻࣗ෼ʹͱͬͯେ੾ʹ͍ͨ͠εΩϧΛͭͳ͍Ͱ͍͘͜ͱ͕ࣗ෼Β͠͞ʹͳΓ·͢ɻ
41. エンジニア デザイナー 設計力 分業化が進み、 設計できる人がどんどん減っている ΤϯδχΞ΍σβΠφʔෆ଍ɺͦΕ͸धཁ΍ઈର਺Ͱ͠ΐ͏͔ʁຊ࣭తͳधཁ͸ઃܭྗ͕͋Δखͷಈ͔ͤΔਓ͔΋͠Ε·ͤΜɻ
42. エンジニア デザイナー 変更に強い設計 拡張性のある設計 設計の意図が作れる 設計の提案ができる 体幹の強い設計力 ୭͔͕ઃܭͨ͠΋ͷΛͭ͘ΔΑΓ͸ɺফඅ͞Εͳ͍ɾ͍ͭ·Ͱ΋ڧ͍΋ͷΛͭ͘Δ͜ͱΛ໨ඪʹͯ͠Έ·ͤΜ͔ɻ
43. ずっと使いやすい 「良い」ものを ୭͠΋͕࢖͍΍͍͢ɺྑ͍΋ͷΛٻΊ͍ͯ·͢ɻ͔ͩΒɺͣͬͱ࢖͑Δ΋ͷΛઃܭ͔Βߟ͑ͯΈ·͠ΐ͏ɻ
44. Thank you. @yamashitakazuki