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
810
Primer of Information Architecture 2018
ykazu
5
540
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
2k
Think Design for Future.
ykazu
5
1.3k
Other Decks in Design
See All in Design
ZKK_001.pdf
nicholaspegu
0
1.5k
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
110
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
610
portfolio2025_kanakoohata
kanako106
0
660
横断組織デザイナーの働き方
mixi_design
PRO
0
330
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
330
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
280
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
320
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
590
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.2k
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
270
Featured
See All Featured
Statistics for Hackers
jakevdp
797
220k
What's in a price? How to price your products and services
michaelherold
244
12k
How to train your dragon (web standard)
notwaldorf
90
5.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
BBQ
matthewcrist
86
9.5k
Gamification - CAS2011
davidbonilla
80
5.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Become a Pro
speakerdeck
PRO
26
5.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
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