Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Core skills of the Design for Front-end
Search
Kazuki YAMASHITA
November 02, 2019
Design
17
50k
Core skills of the Design for Front-end
FRONTEND CONFERENCE 2019, 2nd Nov 2019
デザイン・設計の体幹とスキル
Kazuki YAMASHITA
November 02, 2019
Tweet
Share
More Decks by Kazuki YAMASHITA
See All by Kazuki YAMASHITA
What Was UX Design All About?
ykazu
2
780
Primer of Information Architecture 2018
ykazu
5
520
Think of the User Experience not UX
ykazu
6
1.2k
Sustinable Frontend Design
ykazu
8
1.6k
Primer of Information Architecture 2016
ykazu
5
1.9k
Think Design for Future.
ykazu
5
1.2k
Other Decks in Design
See All in Design
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
500
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
170
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
2.6k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
170
最速[要出典]アクセシビリティチェック
magi1125
2
130
Design System for training program
mct
0
160
太田博三(@usagisan2020)
otanet
0
200
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.2k
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
510
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
180
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
720
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
240
Featured
See All Featured
Being A Developer After 40
akosma
87
590k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Visualization
eitanlees
146
15k
Code Review Best Practice
trishagee
65
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Practical Orchestrator
shlominoach
186
10k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
510
Agile that works and the tools we love
rasmusluckow
328
21k
Site-Speed That Sticks
csswizardry
2
190
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Transcript
設計 体幹 と スキル の デザイン
山下 一樹 メーカーにてエンジニア・企画を経て デザイン+アプリ開発を本業に 株式会社インパスを設立。 IA、UXデザイン、ユーザビリティが専門。 @yamashitakazuki
使いやすい 「良い」ものを ୭͕͍͍͢͠ɺྑ͍ͷΛٻΊ͍ͯ·͢ɻΞΫηγϏϦςΟϢʔβϏϦςΟɺ69%ΛֶͿͷͻͱͭͰ͢ɻ
UXDの手法は有用だが 使えるようになるには経験が必要 ユーザーシナリオ アクティングアウト ジャーニーマップ ペルソナ ユーザーインタビュー エスノグラフィ 上位下位分析 オブザベーション
ヒューリスティック評価 ͨͩσβΠϯ࣮Ϩϕϧͷઃܭ·Ͱ׆͔͢͜ͱ༰қͰ͋Γ·ͤΜɻखΛಈ͔͢ΤϯδχΞσβΠφʔͳΒಛʹɻ
ノンデザイナーズ教本で勉強! ϊϯσβΠφʔζςΫχοΫͷڭຊͰ༗༻Ͱ͋ͬͯσβΠφʔͷ಄ͷϓϩηε·Ͱڞ༗͢Δ͜ͱ͍͠Ͱ͢ɻ
表層 骨格 構造 要件 目的 アプリ, web ൃද͔Βܦͬͨ͜ͷஈ֊Ϟσϧɺղऍม͑ͳ͕ΒࠓͰͲͷϨΠϠʔͰձΛ͍ͯ͠Δ͔֬ೝ͢Δͷʹཱͪ·͢ɻ
UX ビジネス要件、戦略、ビジョン ユーザーが実現するゴール ゴール実現までの要素 ゴールまでの道を引く ユーザーとの対話の場をつくる ビジネスモデル 要件定義 機能設計 ワイヤーフレーム
UI デザイン、インタラクション 表層 骨格 構造 要件 目的 ػೳࢤͩͬͨͷ͕Ϣʔβʔࢤʹཁ݅Λߟ͑ΒΕΔΑ͏ʹͳͬͨͷ69σβΠϯ͕ݴΘΕ͔ͯΒͰ͠ΐ͏ɻ
UX 表層 骨格 構造 要件 目的 情報設計はこれらをつなぐ体幹 ͻͱͭͻͱͭͷϨΠϠʔͰޠΔ͜ͱ69σβΠϯͰ͋Δͱ͢Εɺใઃܭ͜ΕΒΛͭͳ͙ମװͱݴ͑·͢ɻ
情報設計 Step. 1 情報を棚卸しする
情報を棚卸しする 正確さ・改訂 分類する 発見・作る 情報不足 不適切 情報過多 「分かりにくい」「使いにくい」原因を見つける
߹ͤ ম͖ αϥμ Ұͷ ಛબڇ ্λϯ ԁ ্ΧϧϏ ԁ
্ϩʔε ԁ ্ϗϧϞϯ ԁ จ͢Δ จ͢Δ จ͢Δ จ͢Δ จ͢Δ ΧϧϏ ʴ ϝχϡʔ ΧςΰϦબ͓৯ࣄ 情報を棚卸しする ηϧϑΦʔμʔγεςϜͷ6*ɻͲ͏͍ʹ͍͘ͷ6*ͷ͍ͤͰ͠ΐ͏͔ʁͦΕͱʜʁ
߹ͤ ম͖ αϥμ Ұͷ ಛબڇ ্λϯ ԁ ্ΧϧϏ ԁ
্ϩʔε ԁ ্ϗϧϞϯ ԁ จ͢Δ ΧϧϏ ʴ ΧςΰϦΛબͿ ΧςΰϦબ͓৯ࣄ 行為(動詞) モノ(名詞) モノと行為に分ける 情報を棚卸しする ใઃܭͷୈҰεςοϓͰ֤ཁૉΛચ͍ग़͠ɺ໊ࢺͱಈࢺʹ͚·͢ɻ
要素、情報など見る対象 ボタンなどのアクション 時間の経過で多くなる ➡分類して小さく見せられる サービスの成長で多くなる ➡なくすことが困難 分かりやすさに関わる 使いやすさに関わる 行為より先にある モノがある前提
情報を棚卸しする 行為(動詞) モノ(名詞)
υΩϡϝϯτ ࡞͢Δ อଘ͢Δ ҹ͢Δ ϝʔϧͰૹΔ 情報を棚卸しする 行為(動詞) モノ(名詞) ࢲ͕ͨͪԿ͔Λߦ͏ͱ͖ɺ಄ͷதͰʮԿ͔ΛͲ͏͍ͨ͠ʯͱ͍͏Α͏ʹඞͣϞϊΛઌʹೝࣝ͠·͢ɻ
࡞͢Δ อଘ͢Δ ҹ͢Δ ϝʔϧͰૹΔ υΩϡϝϯτ ϑΝΠϧ ը૾ ϑΥϧμ 情報を棚卸しする 行為(動詞)
モノ(名詞) ͠λεΫઌߦͩͬͨ߹಄ͷߟ͑ΛΓସ͑ɺબߦҝΛߦ͖དྷ͢Δ͜ͱʹͳͬͯ͠·͍·͢ɻ
ナビゲーションには名詞(モノ) 動詞(アクション)は非推奨 情報を棚卸しする ৽ணΛݟΔ ࢀՃ͢Δ ·ͳͿ ͕͢͞ ձࣾใ ࠾༻ใ
ユーザーは選ぶことにストレスを感じる 提供者側はとにかくアクションして欲しい 情報を棚卸しする
情報設計 Step. 2 意図(言葉)をつくる
意図(言葉)をつくる 「誰が」に最適な「良い」をつくる 対象となるユーザーが どのような思考なのか? 認知や潜在的な考え
意図(言葉)をつくる 「誰が」に最適な「良い」をつくる 認知や潜在的な考え 今日の天気は? 服装どうしよう? 傘いる? 花粉きつい? ྫ͑Կ͔ͷใΛಘ͍ͨͱ͖ʹͦͷόοΫάϥϯυͷࢥߟ͕͋Γ·͢ɻຊʹཉ͍͠ͷൃͨ͠ݴ༿Ͱ͋Γ·ͤΜɻ
意図(言葉)をつくる MENU コマンドのメニュー 料理のメニュー ࢲͨͪʹҰൠతͳʮϝχϡʔʯͱ͍͏ݴ༿ɺͦͷ໘ϢʔβʔʹΑͬͯड͚औΓํ͕େ͖͘ҧ͏Ͱ͠ΐ͏ɻ
߹ͤ ম͖ αϥμ Ұͷ ಛબڇ ্λϯ ԁ ্ΧϧϏ ԁ
্ϩʔε ԁ ্ϗϧϞϯ ԁ ΧϧϏ ʴ ϝχϡʔ ΧςΰϦબ͓৯ࣄ จ͢Δ จ͢Δ จ͢Δ จ͢Δ จ͢Δ 情報を棚卸しする ྫͷΞΫγϣϯϘλϯͯ͢ಉ͡ϥϕϧͰϘλϯ͕ఆٛ͞Ε͍ͯ·ͨ͠ɻಉ͡ڍಈΛ͢Δ͜ͱ͋Γ·ͤΜ͕ɻ
意図(言葉)をつくる จ͢Δ ߪೖ͢Δ ΧʔτʹೖΕΔ จΛ֬ఆ ൃ ࠓ͙͢ങ͏ ͬͱݟΔ ͬͱಡΉ ৄࡉͪ͜Β
そのサービスの「共通言語」を ϢϏΩλε υϝΠϯۦಈઃܭͰʮϢϏΩλεݴޠʯͷॏཁੑ͕આ͔ΕΔΑ͏ʹɺࢲͨͪࢲͨͪͷڞ௨ݴޠΛͭ͘Δඞཁ͕͋Γ·͢ɻ
意図(言葉)をつくる 「誰が」に最適な「良い」をつくる 「誰が」に最適な「良い」をつくる 対象となるユーザーが どのような思考なのか? 認知や潜在的な考え
「良い」は意図による 意図(言葉)をつくる σβΠφʔ͕બͳ͍Α͏ͳ৭࠼ɺϥεϕΨεͷΧδϊΛ࠼ΔΧʔϖοτʹͱͬͯʮྑ͍ʯσβΠϯͰ͢ɻ
意図(言葉)をつくる 対象ユーザーの頭にある「言葉」で 提供者側の「意図」をつくる
情報設計 Step. 3 分類して組み立てる
分類して組み立てる 情報を分類する 構造パターンに当てはめ形にしていく
分類して組み立てる 情報の分類方法 位置 アルファベット 時間 カテゴリ 連続量 Location Alphabet Time
Category Hierarchy L A T C H
分類して組み立てる 分類のワーク A B C D E F G H
A B C D E F G H オープンソート クローズドソート ཁૉΛΧςΰϥΠζ͢Δͱ͖ʹछྨͷํ๏Λҙࣝ͠·͢ɻ͜ͷͭͷΓํΛϛοΫε͍͚ͯ͠·ͤΜɻ
分類して組み立てる 分類のワーク A B C D E F G H
オープンソート クローズドソート 松 竹 梅 A B C D E F G H ྨఆٛΛޙʹ͢ΔΦʔϓϯιʔτ৽͍͠ΧςΰϦͷൃݟʹ༗ޮͰ͢ɻͨͩ͠ɺใྔ͕ଟ͚Ε࣌ؒΛཁ͢ΔͰ͠ΐ͏ɻ
分類して組み立てる 分類のワーク A B C D E F G H
オープンソート クローズドソート 松 竹 梅 A B C D E F G H ΫϩʔζυιʔτطଘͷΧςΰϦ͕໌֬ͳ߹ʹࢼ͠·͢ɻΧςΰϦʹͯ·Βͳ͍ཁૉͷݮʹ༗ޮͰ͢ɻ
スマフォ UI 構造のパターンの一部 プッシュアップ モーダル ナビゲーション 1 2 3 1
1” 1-A 1-B 異なる領域の情報の移動 階層間の移動 主従情報間の移動 分類して組み立てる ࠓͰ6*ΨΠυϥΠϯ͕๛ʹ͋ΔͨΊɺΑ΄ͲͰͳ͚ΕύλʔϯΛҳ͢ΔϝϦοτগͳ͍Ͱ͠ΐ͏ɻ
ళһΛݺͿ ͓ձܭ ͓৯ࣄ ͍Βͬ͠Ό͍·ͤ ͓ҿΈ ΧςΰϦΛબΜͰ͍ͩ͘͞ɻ ϝχϡʔ ΧςΰϦબ ϝχϡʔΧςΰϦͱ໊͍ͬͨশʹҙਤ͋ͬͨͰ͠ΐ͏͔ʁ৯ࣄҿΈΛ࠷ॳʹ͚Δͱ͜Ζʹͳ͍Ͱ͠ΐ͏͔ʁ
ళһΛݺͿ ͓ձܭ ͝จ ͍Βͬ͠Ό͍·ͤ τοϓ
߹ͤ ম͖ αϥμ Ұͷ ಛબڇ ্λϯ ԁ ্ΧϧϏ ԁ
্ϩʔε ԁ ্ϗϧϞϯ ԁ จ͢Δ จ͢Δ จ͢Δ จ͢Δ จ͢Δ ΧϧϏ ʴ ϝχϡʔ ΧςΰϦબ͓৯ࣄ ΞΫγϣϯͷϥϕϦϯά͕Ϣʔβʔʹ༧ظͰ͖Δͷ͔ɺใΛΧςΰϥΠζ͢Δඞཁ͕͋Δ͔Λ͏Ұݕূ͠·͠ΐ͏ɻ
υϦϯΫ ͓৯ࣄ ্λϯ ԁ ্ΧϧϏ ԁ ্ϩʔε ԁ
্ϗϧϞϯ ԁ Χʔτ Χʔτ Χʔτ Χʔτ จΛ֬ೝ ʴ τοϓ τοϓ͝จ ΧʔτۭͰ͢ σβʔτ Χʔτ Χʔτ
これからの フロントエンドスキル
エンジニア デザイナー 作る力? エンジニアがデザインする デザイナーが実装する ということではない ࣮ྗɾσβΠϯੜ࢈ྗʹՁ͕͋Δ͔࣌ΒɺΦʔϓϯԽɺ"*ͳͲʹΑͬͯมΘΔ͜ͱΛೝࣝ͢Δඞཁ͕͋Γ·͢ɻ
エンジニア デザイナー スキルをつなぐ インタ ラクション プロト タイピング データ分析 定量調査 ビジュアル
アクセシ ビリティ マークアップ UI プレゼン ユーザ ビリティ εΩϧ৬ҬʹݶΒΕͨͷͰ͋Γ·ͤΜɻࣗʹͱͬͯେʹ͍ͨ͠εΩϧΛͭͳ͍Ͱ͍͘͜ͱ͕ࣗΒ͠͞ʹͳΓ·͢ɻ
エンジニア デザイナー 設計力 分業化が進み、 設計できる人がどんどん減っている ΤϯδχΞσβΠφʔෆɺͦΕधཁઈରͰ͠ΐ͏͔ʁຊ࣭తͳधཁઃܭྗ͕͋Δखͷಈ͔ͤΔਓ͔͠Ε·ͤΜɻ
エンジニア デザイナー 変更に強い設計 拡張性のある設計 設計の意図が作れる 設計の提案ができる 体幹の強い設計力 ୭͔͕ઃܭͨ͠ͷΛͭ͘ΔΑΓɺফඅ͞Εͳ͍ɾ͍ͭ·Ͱڧ͍ͷΛͭ͘Δ͜ͱΛඪʹͯ͠Έ·ͤΜ͔ɻ
ずっと使いやすい 「良い」ものを ୭͕͍͍͢͠ɺྑ͍ͷΛٻΊ͍ͯ·͢ɻ͔ͩΒɺͣͬͱ͑ΔͷΛઃܭ͔Βߟ͑ͯΈ·͠ΐ͏ɻ
Thank you. @yamashitakazuki