Core skills of the Design for Front-end

by Kazuki YAMASHITA

Slide 1

Slide 1 text

設計体幹とスキルのデザイン

Slide 2

Slide 2 text

山下　一樹メーカーにてエンジニア・企画を経てデザイン＋アプリ開発を本業に株式会社インパスを設立。 IA、UXデザイン、ユーザビリティが専門。 @yamashitakazuki

Slide 3

Slide 3 text

使いやすい「良い」ものを ୭͠΋͕࢖͍΍͍͢ɺྑ͍΋ͷΛٻΊ͍ͯ·͢ɻΞΫηγϏϦςΟ΍ϢʔβϏϦςΟɺ69%ΛֶͿͷ΋ͻͱͭͰ͢ɻ

Slide 4

Slide 4 text

UXDの手法は有用だが使えるようになるには経験が必要ユーザーシナリオアクティングアウトジャーニーマップペルソナユーザーインタビューエスノグラフィ上位下位分析オブザベーションヒューリスティック評価 ͨͩσβΠϯ΍࣮૷Ϩϕϧͷઃܭ·Ͱ׆͔͢͜ͱ͸༰қͰ͸͋Γ·ͤΜɻखΛಈ͔͢ΤϯδχΞ΍σβΠφʔͳΒಛʹɻ

Slide 5

Slide 5 text

ノンデザイナーズ教本で勉強！ ϊϯσβΠφʔζ͸ςΫχοΫͷڭຊͰ༗༻Ͱ͋ͬͯ΋σβΠφʔͷ಄ͷϓϩηε·Ͱڞ༗͢Δ͜ͱ͸೉͍͠Ͱ͢ɻ

Slide 6

Slide 6 text

表層骨格構造要件目的アプリ, web ൃද͔Βܦͬͨ͜ͷஈ֊Ϟσϧ͸ɺղऍ͸ม͑ͳ͕Β΋ࠓͰ΋ͲͷϨΠϠʔͰձ࿩Λ͍ͯ͠Δ͔֬ೝ͢Δͷʹ໾ཱͪ·͢ɻ

Slide 7

Slide 7 text

UX ビジネス要件、戦略、ビジョンユーザーが実現するゴールゴール実現までの要素ゴールまでの道を引くユーザーとの対話の場をつくるビジネスモデル要件定義機能設計ワイヤーフレーム UI デザイン、インタラクション表層骨格構造要件目的 ػೳࢤ޲ͩͬͨ΋ͷ͕Ϣʔβʔࢤ޲ʹཁ݅Λߟ͑ΒΕΔΑ͏ʹͳͬͨͷ͸69σβΠϯ͕ݴΘΕ͔ͯΒͰ͠ΐ͏ɻ

Slide 8

Slide 8 text

UX 表層骨格構造要件目的情報設計はこれらをつなぐ体幹 ͻͱͭͻͱͭͷϨΠϠʔͰޠΔ͜ͱ͸69σβΠϯͰ͋Δͱ͢Ε͹ɺ৘ใઃܭ͸͜ΕΒΛͭͳ͙ମװͱ΋ݴ͑·͢ɻ

Slide 9

Slide 9 text

情報設計 Step. 1 情報を棚卸しする

Slide 10

Slide 10 text

情報を棚卸しする正確さ・改訂分類する発見・作る情報不足不適切情報過多「分かりにくい」「使いにくい」原因を見つける

Slide 11

Slide 11 text

੝߹ͤ ম͖෺ αϥμ Ұ඼΋ͷ ಛબڇ ্λϯ ԁ ্ΧϧϏ ԁ ্ϩʔε ԁ ্ϗϧϞϯ ԁ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ ΧϧϏ ʴ ϝχϡʔ΁ ΧςΰϦબ୒͓৯ࣄ 情報を棚卸しする ηϧϑΦʔμʔγεςϜͷ6*ɻͲ͏΋࢖͍ʹ͍͘ͷ͸6*ͷ͍ͤͰ͠ΐ͏͔ʁͦΕͱ΋ʜʁ

Slide 12

Slide 12 text

੝߹ͤ ম͖෺ αϥμ Ұ඼΋ͷ ಛબڇ ্λϯ ԁ ্ΧϧϏ ԁ ্ϩʔε ԁ ্ϗϧϞϯ ԁ ஫จ͢Δ ΧϧϏ ʴ ΧςΰϦΛબͿ ΧςΰϦબ୒͓৯ࣄ 行為（動詞）モノ（名詞）モノと行為に分ける情報を棚卸しする ৘ใઃܭͷୈҰεςοϓͰ͸֤ཁૉΛચ͍ग़͠ɺ໊ࢺͱಈࢺʹ෼͚·͢ɻ

Slide 13

Slide 13 text

要素、情報など見る対象ボタンなどのアクション時間の経過で多くなる ➡分類して小さく見せられるサービスの成長で多くなる ➡なくすことが困難分かりやすさに関わる使いやすさに関わる行為より先にあるモノがある前提情報を棚卸しする行為（動詞）モノ（名詞）

Slide 14

Slide 14 text

υΩϡϝϯτ ࡞੒͢Δ อଘ͢Δ ҹ࡮͢Δ ϝʔϧͰૹΔ 情報を棚卸しする行為（動詞）モノ（名詞） ࢲ͕ͨͪԿ͔Λߦ͏ͱ͖ɺ಄ͷதͰ͸ʮԿ͔ΛͲ͏͍ͨ͠ʯͱ͍͏Α͏ʹඞͣϞϊΛઌʹೝࣝ͠·͢ɻ

Slide 15

Slide 15 text

࡞੒͢Δ อଘ͢Δ ҹ࡮͢Δ ϝʔϧͰૹΔ υΩϡϝϯτ ϑΝΠϧ ը૾ ϑΥϧμ 情報を棚卸しする行為（動詞）モノ（名詞） ΋͠λεΫઌߦͩͬͨ৔߹͸಄ͷߟ͑Λ੾Γସ͑ɺબ୒ߦҝΛߦ͖དྷ͢Δ͜ͱʹͳͬͯ͠·͍·͢ɻ

Slide 16

Slide 16 text

ナビゲーションには名詞（モノ）動詞（アクション）は非推奨情報を棚卸しする ৽ணΛݟΔ ࢀՃ͢Δ ·ͳͿ ͕͢͞ ձࣾ৘ใ ࠾༻৘ใ

Slide 17

Slide 17 text

ユーザーは選ぶことにストレスを感じる提供者側はとにかくアクションして欲しい情報を棚卸しする

Slide 18

Slide 18 text

情報設計 Step. 2 意図（言葉）をつくる

Slide 19

Slide 19 text

意図（言葉）をつくる「誰が」に最適な「良い」をつくる対象となるユーザーがどのような思考なのか？認知や潜在的な考え

Slide 20

Slide 20 text

意図（言葉）をつくる「誰が」に最適な「良い」をつくる認知や潜在的な考え今日の天気は？服装どうしよう？傘いる？花粉きつい？ ྫ͑͹Կ͔ͷ৘ใΛಘ͍ͨͱ͖ʹ͸ͦͷόοΫάϥ΢ϯυͷࢥߟ͕͋Γ·͢ɻຊ౰ʹཉ͍͠ͷ͸ൃͨ͠ݴ༿Ͱ͸͋Γ·ͤΜɻ

Slide 21

Slide 21 text

意図（言葉）をつくる MENU コマンドのメニュー料理のメニュー ࢲͨͪʹ͸Ұൠతͳʮϝχϡʔʯͱ͍͏ݴ༿΋ɺͦͷ৔໘΍ϢʔβʔʹΑͬͯ͸ड͚औΓํ͕େ͖͘ҧ͏Ͱ͠ΐ͏ɻ

Slide 22

Slide 22 text

੝߹ͤ ম͖෺ αϥμ Ұ඼΋ͷ ಛબڇ ্λϯ ԁ ্ΧϧϏ ԁ ্ϩʔε ԁ ্ϗϧϞϯ ԁ ΧϧϏ ʴ ϝχϡʔ΁ ΧςΰϦબ୒͓৯ࣄ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ 情報を棚卸しする ྫͷΞΫγϣϯϘλϯ͸͢΂ͯಉ͡ϥϕϧͰϘλϯ͕ఆٛ͞Ε͍ͯ·ͨ͠ɻಉ͡ڍಈΛ͢Δ͜ͱ͸͋Γ·ͤΜ͕ɻ

Slide 23

Slide 23 text

意図（言葉）をつくる ஫จ͢Δ ߪೖ͢Δ ΧʔτʹೖΕΔ ஫จΛ֬ఆ ൃ஫ ࠓ͙͢ങ͏ ΋ͬͱݟΔ ΋ͬͱಡΉ ৄࡉ͸ͪ͜Β そのサービスの「共通言語」を ϢϏΩλε υϝΠϯۦಈઃܭͰ΋ʮϢϏΩλεݴޠʯͷॏཁੑ͕આ͔ΕΔΑ͏ʹɺࢲͨͪ͸ࢲͨͪͷڞ௨ݴޠΛͭ͘Δඞཁ͕͋Γ·͢ɻ

Slide 24

Slide 24 text

意図（言葉）をつくる「誰が」に最適な「良い」をつくる「誰が」に最適な「良い」をつくる対象となるユーザーがどのような思考なのか？認知や潜在的な考え

Slide 25

Slide 25 text

「良い」は意図による意図（言葉）をつくる σβΠφʔ͕બ͹ͳ͍Α͏ͳ৭࠼΋ɺϥεϕΨεͷΧδϊΛ࠼ΔΧʔϖοτʹͱͬͯ͸ʮྑ͍ʯσβΠϯͰ͢ɻ

Slide 26

Slide 26 text

意図（言葉）をつくる対象ユーザーの頭にある「言葉」で提供者側の「意図」をつくる

Slide 27

Slide 27 text

情報設計 Step. 3 分類して組み立てる

Slide 28

Slide 28 text

分類して組み立てる情報を分類する構造パターンに当てはめ形にしていく

Slide 29

Slide 29 text

分類して組み立てる情報の分類方法位置アルファベット時間カテゴリ連続量 Location Alphabet Time Category Hierarchy L A T C H

Slide 30

Slide 30 text

分類して組み立てる分類のワーク A B C D E F G H A B C D E F G H オープンソートクローズドソート ཁૉΛΧςΰϥΠζ͢Δͱ͖ʹ͸छྨͷํ๏Λҙࣝ͠·͢ɻ͜ͷͭͷ΍ΓํΛϛοΫεͯ͠͸͍͚·ͤΜɻ

Slide 31

Slide 31 text

分類して組み立てる分類のワーク A B C D E F G H オープンソートクローズドソート松竹梅 A B C D E F G H ෼ྨఆٛΛޙʹ͢ΔΦʔϓϯιʔτ͸৽͍͠ΧςΰϦͷൃݟʹ༗ޮͰ͢ɻͨͩ͠ɺ৘ใྔ͕ଟ͚Ε͹࣌ؒΛཁ͢ΔͰ͠ΐ͏ɻ

Slide 32

Slide 32 text

分類して組み立てる分類のワーク A B C D E F G H オープンソートクローズドソート松竹梅 A B C D E F G H Ϋϩʔζυιʔτ͸طଘͷΧςΰϦ͕໌֬ͳ৔߹ʹࢼ͠·͢ɻΧςΰϦʹ౰ͯ͸·Βͳ͍ཁૉͷ࡟ݮʹ༗ޮͰ͢ɻ

Slide 33

Slide 33 text

スマフォ UI 構造のパターンの一部プッシュアップモーダルナビゲーション 1 2 3 1 1” 1-A 1-B 異なる領域の情報の移動階層間の移動主従情報間の移動分類して組み立てる ࠓͰ͸6*ΨΠυϥΠϯ͕๛෋ʹ͋ΔͨΊɺΑ΄ͲͰͳ͚Ε͹ύλʔϯΛҳ୤͢ΔϝϦοτ͸গͳ͍Ͱ͠ΐ͏ɻ

Slide 34

Slide 34 text

ళһΛݺͿ ͓ձܭ ͓৯ࣄ ͍Βͬ͠Ό͍·ͤ ͓ҿΈ෺ ΧςΰϦΛબΜͰ͍ͩ͘͞ɻ ϝχϡʔ ΧςΰϦબ୒ ϝχϡʔ΍ΧςΰϦͱ໊͍ͬͨশʹҙਤ͸͋ͬͨͰ͠ΐ͏͔ʁ৯ࣄ΍ҿΈ෺Λ࠷ॳʹ෼͚Δͱ͜Ζʹ໰୊͸ͳ͍Ͱ͠ΐ͏͔ʁ

Slide 35

Slide 35 text

ళһΛݺͿ ͓ձܭ ͝஫จ ͍Βͬ͠Ό͍·ͤ τοϓ

Slide 36

Slide 36 text

੝߹ͤ ম͖෺ αϥμ Ұ඼΋ͷ ಛબڇ ্λϯ ԁ ্ΧϧϏ ԁ ্ϩʔε ԁ ্ϗϧϞϯ ԁ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ ஫จ͢Δ ΧϧϏ ʴ ϝχϡʔ΁ ΧςΰϦબ୒͓৯ࣄ ΞΫγϣϯͷϥϕϦϯά͕Ϣʔβʔʹ༧ظͰ͖Δ΋ͷ͔ɺ৘ใΛΧςΰϥΠζ͢Δඞཁ͕͋Δ͔Λ΋͏Ұ౓ݕূ͠·͠ΐ͏ɻ

Slide 37

Slide 37 text

υϦϯΫ ͓৯ࣄ ্λϯ ԁ ্ΧϧϏ ԁ ্ϩʔε ԁ ্ϗϧϞϯ ԁ Χʔτ΁ Χʔτ΁ Χʔτ΁ Χʔτ΁ ஫จΛ֬ೝ ʴ τοϓ΁ τοϓ͝஫จ Χʔτ͸ۭͰ͢ σβʔτ Χʔτ΁ Χʔτ΁

Slide 38

Slide 38 text

これからのフロントエンドスキル

Slide 39

Slide 39 text

エンジニアデザイナー作る力？エンジニアがデザインするデザイナーが実装するということではない ࣮૷ྗɾσβΠϯੜ࢈ྗʹՁ஋͕͋Δ࣌୅͔ΒɺΦʔϓϯԽɺ"*ͳͲʹΑͬͯมΘΔ͜ͱΛೝࣝ͢Δඞཁ͕͋Γ·͢ɻ

Slide 40

Slide 40 text

エンジニアデザイナースキルをつなぐインタラクションプロトタイピングデータ分析定量調査ビジュアルアクセシビリティマークアップ UI プレゼンユーザビリティ εΩϧ͸৬ҬʹݶΒΕͨ΋ͷͰ͸͋Γ·ͤΜɻࣗ෼ʹͱͬͯେ੾ʹ͍ͨ͠εΩϧΛͭͳ͍Ͱ͍͘͜ͱ͕ࣗ෼Β͠͞ʹͳΓ·͢ɻ

Slide 41

Slide 41 text

エンジニアデザイナー設計力分業化が進み、設計できる人がどんどん減っている ΤϯδχΞ΍σβΠφʔෆ଍ɺͦΕ͸धཁ΍ઈର਺Ͱ͠ΐ͏͔ʁຊ࣭తͳधཁ͸ઃܭྗ͕͋Δखͷಈ͔ͤΔਓ͔΋͠Ε·ͤΜɻ

Slide 42

Slide 42 text

エンジニアデザイナー変更に強い設計拡張性のある設計設計の意図が作れる設計の提案ができる体幹の強い設計力 ୭͔͕ઃܭͨ͠΋ͷΛͭ͘ΔΑΓ͸ɺফඅ͞Εͳ͍ɾ͍ͭ·Ͱ΋ڧ͍΋ͷΛͭ͘Δ͜ͱΛ໨ඪʹͯ͠Έ·ͤΜ͔ɻ

Slide 43

Slide 43 text

ずっと使いやすい「良い」ものを ୭͠΋͕࢖͍΍͍͢ɺྑ͍΋ͷΛٻΊ͍ͯ·͢ɻ͔ͩΒɺͣͬͱ࢖͑Δ΋ͷΛઃܭ͔Βߟ͑ͯΈ·͠ΐ͏ɻ

Slide 44

Slide 44 text

Thank you. @yamashitakazuki