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
880
Primer of Information Architecture 2018
ykazu
5
560
Think of the User Experience not UX
ykazu
6
1.3k
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
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
2
2.6k
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.1k
Crisp Code inc. ブランドガイドライン
so_kotani
1
200
株式会社バクタム 会社説明資料
bactum
0
270
今日から意識できるアクセシビリティ
fumiko
0
280
freee + Product Design FY25Q4
freee
4
15k
CursorでAI活用のナレッジベースを構築する
kanzaki
0
140
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
190
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
510
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
110
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.2k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
870k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
380
Being A Developer After 40
akosma
90
590k
Building Applications with DynamoDB
mza
95
6.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Automating Front-end Workflow
addyosmani
1370
200k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Designing for humans not robots
tammielis
253
25k
Optimizing for Happiness
mojombo
379
70k
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