Core skills of the Design for Front-end

980365ab463cc17e9b1a390573515649?s=47 Kazuki YAMASHITA
November 02, 2019

Core skills of the Design for Front-end

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

980365ab463cc17e9b1a390573515649?s=128

Kazuki YAMASHITA

November 02, 2019
Tweet

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