Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
使いやすいユーザーインターフェースのための7つの原則(2010年作成)
Search
Wakabayashi, Kenichi
August 14, 2017
Design
140
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
使いやすいユーザーインターフェースのための7つの原則(2010年作成)
使いやすいユーザーインターフェースとは何かを説明するために、ドンノーマン博士の7つの原則を実例を交えて説明した資料。2010年当時のものなので、例が古いです。
Wakabayashi, Kenichi
August 14, 2017
More Decks by Wakabayashi, Kenichi
See All by Wakabayashi, Kenichi
人とコンピュータ 思考の軌跡
kwaka1208
0
34
クロスロード株式会社企業案内
kwaka1208
0
71
CoderDojoの今を伝えるDojoLetter編集部@DojoCon Japan 2022
kwaka1208
0
420
Why CoderDojo? @ DojoCon Japan 2022交流会LT
kwaka1208
0
520
奈良のCoderDojoを見渡す@DojoCon Japan 2021
kwaka1208
0
210
zoomとYouTube Liveによるライブ配信講座
kwaka1208
0
270
CoderDojoと子どもプログラミング喫茶による子どもプログラミングエコシステムのご提案
kwaka1208
0
210
CoderDojoってどんなこと やってるのかお話します
kwaka1208
0
750
Future meeting - これからの子どもたちに必要な学びとは - @KANDAI Me RISE
kwaka1208
0
160
Other Decks in Design
See All in Design
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
tinykitten
1
560
Luna's Light
shemeetscity
0
140
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
keita_yoshikawa
0
100
デザインとフロントエンドの境界が融ける Claude Code × Figma
littlebusters
2
3.5k
明日から真似できる、AIでデザインシステムを活用する方法
vivion
0
680
個人理念(自分の言葉)の言語化ワークショップ
kakukoki
1
300
Debiasing Your Software Design Decision-Making @ Flowcon '26
baasie
1
180
ポートフォリオ_あやの
ngyenmazt1412
0
1.8k
再設計される業務 - AIにより再設計される "デザインワークフロー" / AI Ops Lab #2 Redesigned orkflows
kgsi
0
930
東京都市大学 都市生活学部×一般社団法人オープン企画イベント 「誰もがデザイナーである」とはどういうことか? 【エツィオ・マンズィーニ氏 特別来日・基調講演】
a2k
1
120
広い関与の可能性に どう向き合うのか? 私たちは。|Timee MarketingDesign 2026-06-18
bebe
0
1k
ボタンUIの冪等性の話をしたらVimmerに刺さっちゃった
ottatto
3
1.8k
Featured
See All Featured
How to make the Groovebox
asonas
2
2.4k
How STYLIGHT went responsive
nonsquared
100
6.3k
AI: The stuff that nobody shows you
jnunemaker
PRO
10
1.1k
So, you think you're a good person
axbom
PRO
2
2.2k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
74
42k
Making the Leap to Tech Lead
cromwellryan
135
10k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
250
Docker and Python
trallard
47
4.2k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
8k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
200
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.3k
Transcript
2010年5⽉8⽇ 使いやすいユーザーインターフェースのための7つの原則 ஶऀɿ%POBME"/PSNBO ೝ৺ཧֶऀͰΠϯλʔϑΣʔεσβΠϯͷୈҰਓऀ աڈʹ"QQMF)1ʹࡏ੶͠ϢʔβʔΠϯλʔϑΣʔεઃܭΛࢦಋɻ ݱࡏɺϠίϒɾχʔϧηϯ 8&#αΠτʹ͓͚ΔΠϯλʔϑΣʔεઃܭݚڀͷୈҰਓऀ ͱ ͱʹϊʔϚϯɾχʔϧηϯɾάϧʔϓΛઃཱ͠ɺϢʔβϏϦςΟʹؔ͢ΔίϯαϧςΟϯά
ηϛφʔΛߦ͍ͬͯΔɻ ֎քʹ͋Δࣝͱ಄ͷதʹ͋Δࣝͷ྆ऀΛར༻͢Δɻ ࡞ۀͷߏΛ୯७Խ͢Δɻ ରΛʹݟ͑ΔΑ͏ʹͯ͠ɺ࣮ߦͷִͨΓͱධՁͷִͨΓʹڮΛ͔͚Δɻ ରԠ͚Λਖ਼͘͢͠Δɻ ࣗવͷ੍ਓతͳ੍ͳͲͷ੍ͷྗΛར༻͢Δ Τϥʔʹඋ͑ͨσβΠϯΛ͢Δɻ Ҏ্ͷ͕ͯ͢͏·͍͔͘ͳ͍࣌ʹඪ४ԽΛ͢Δ υϯɾϊʔϚϯത͕࢜ఏএ͢Δ ͍͍͢ϢʔβʔΠϯλʔϑΣʔεͷͨΊͷͭͷݪଇ ্هݪଇͷҙຯʹ͍ͭͯ ࣮ྫΛަ͑ͯղઆ
2010年5⽉8⽇ 使いやすいユーザーインターフェースのための7つの原則 2 1. 外界にある知識と頭の中にある知識の両者を利⽤する。 ֎քʹ͋Δࣝͱɺػثը໘͔ΒಘΒΕΔใͷ͜ͱɺ಄ͷதʹ͋ΔࣝͱɺϢʔβʔ͕طʹ͍ͬͯΔใͷ͜ͱɻ ͜ΕΒΛޮΑ͘ར༻͢Δ͜ͱ͕Ͱ͖Δঢ়ଶʹͳΔͱ͍͍͢ͷʹͳΔɻ ͞Βʹɺࣝͷ໘Խ͕ਐΈɺϢʔβʔ͕֮͑ͨใ͕૿͑Δͱߋʹૢ࡞Λ͘ߦ͑ΔΑ͏ʹͳ͍ͬͯΔ͜ͱॏཁɻ දࣔ͞ΕΔϝχϡʔ(֎քͷࣝ) γϣʔτΧοτΛ֮͑ͨϢʔβʔ
ߋʹ͘ૢ࡞Ͱ͖ΔΑ͏ʹͳΔɻ PCͰίϐʔ&ϖʔετΛߦ͏߹ɺϢʔβʔϝχϡʔૢ࡞͢Δ͜ͱ͚ͩΛ͍ͬͯΕɺ ޙϝχϡʔʹैͬͯૢ࡞͢Δ͚ͩͰίϐʔ&ϖʔετΛ࣮ߦͰ͖Δɻ ͞ΒʹɺγϣʔτΧοτΛ֮͑ͨϢʔβʔɺߋʹ͘ૢ࡞Λߦ͏͜ͱ͕ग़དྷΔɻ දࣔ͞ΕΔϝχϡʔ (֎քͷࣝ) iPhoneͷςϯΩʔೖྗͰɺΩʔΛԡ͢͠ΔͱೖྗՄೳͳจࣈ͕දࣔ͞ΕΔ͜ͱΛ ͬͯೖΕɺදࣔ͞ΕͨจࣈΛબ͢Δ͜ͱͰೖྗՄೳͰ͋Δ͜ͱ͕Θ͔Δɻ ͞ΒʹɺจࣈͷஔΛ֮͑ͨϢʔβʔϑϦοΫೖྗͰߋʹ͘ೖྗ͢Δ͜ͱ͕ग़དྷ ྫ) PCͷίϐʔ&ϖʔετૢ࡞ ྫ) iPhoneͷςϯΩʔೖྗ จࣈͷஔΛ֮͑ͨϢʔβʔϑϦοΫ ೖྗͰߋʹ͘ૢ࡞Ͱ͖ΔΑ͏ʹͳΔɻ
2010年5⽉8⽇ 使いやすいユーザーインターフェースのための7つの原則 3 2. ࡞ۀͷߏΛ୯७Խ͢Δɻ ෳࡶͳ࡞ۀΛ୯७Խ͢Δ͜ͱͰ͍উख্͕͢Δɻ୯७Խ͢Δํ๏ͱͯ͠ҎԼͷߟ͑ํ͕͋Δɻ ैདྷͷखॱΛ͔Γ͘͢දࣔ͢Δ ϥϕϧΛ͚ͭΔ ैདྷͷखॱΛٕज़తͳͰૢ࡞͘͢͢͠Δɻ
৽͍͠ૢ࡞ํ๏Λఏࣔ͢Δ ࡞ۀΛࣗಈԽ͢Δ ਓؒͷૢ࡞Λෆཁʹ͢Δ ࡞ۀͷੑ࣭Λมߋ͢Δ ࠜຊతʹม͑Δ ΟβʔυܗࣜͰߦ͏ιϑτΣΞͷΠϯετʔϧઃఆʹ͓͍ ͯɺ֤εςοϓ͝ͱͰΔ͖͜ͱΛ୯७Խͯ͠ɺෳࡶͳ࡞ۀͷ ૢ࡞ੑΛϢʔβʔʹ͔Γ͘͢ఏ͍ࣔͯ͠Δɻ ΞϥʔϜ࣌ࠁͷઃఆʹ͓͍ͯɺΛೖྗͨ͠ΓϘλϯૢ࡞Ͱ Λมߋ͢Δํ๏ʹมΘͬͯϑϦοΫૢ࡞͚ͩͰΛબͰ͖ ΔυϥϜܕϝχϡʔΛ࠾༻͠ɺೖྗૢ࡞Λ୯७Խ͍ͯ͠Δɻ ྫ 1$ͷΟβʔυʹΑΔઃఆΠϯετʔϧ ྫ J1IPOFͷΞϥʔϜઃఆ Πϯετʔϧ։࢝ λΠϓબ Πϯετʔϧઌબ Πϯετʔϧྃ ैདྷͷखॱΛٕज़తͳͰૢ࡞͘͢͢͠Δɻ ৽͍͠ૢ࡞ํ ๏Λఏࣔ͢Δ ैདྷͷखॱΛ͔Γ͘͢දࣔ͢Δ ϥϕϧΛ͚ͭΔ
2010年5⽉8⽇ 使いやすいユーザーインターフェースのための7つの原則 4 3. ରΛʹݟ͑ΔΑ͏ʹͯ͠ɺ࣮ߦͷִͨΓͱධՁͷִͨΓʹڮΛ͔͚Δɻ Ϣʔβʔ͕ૢ࡞ՄೳͳͷΛݟ͑ΔܗͰఏࣔ͢Δͱͱʹɺ࣮ߦͨ݁͠ՌΛϢʔβʔʹϑΟʔυόοΫ͢Δ͜ͱͰɺΑΓײత ʹૢ࡞͢Δ͜ͱ͕ग़དྷΔΑ͏ʹͳΔɻ ·ͨɺʹݟ͑Δͷͷૢ࡞ํ๏͕ΠϝʔδͰ͖ΔΑ͏ͳܗʹ͢Δɻ ઃఆͰ͖ΔपͱԻҬϨϕϧΛzಉ࣌ʹzௐͰ͖ΔΠϯλʔ ϑΣʔε͕ఏࣔ͞Ε͍ͯͯɺͦΕͧΕͷૢ࡞ͭ·ΈͷҐஔͷ૬
ରҐஔͰܗΛද͢ܗʹͳ͍ͬͯΔɻ Ϣʔβʔ͕ࣗઃఆͨ͠ԻͷܗΛΠϝʔδͰଊ͑Δ͜ͱ͕ग़ དྷΔɻ ˠ֤प͝ͱͷݸผઃఆʹͳ͍ͬͯΕ͍ʹ͍͘ͷʹͳ Δɻ ը໘ͷ໌Δ͞ઃఆεϥΠυόʔௐͰ͖ΔΑ͏ʹΠϯλʔ ϑΣʔε͕ఏࣔ͞Ε͍ͯͯɺௐૢ࡞Λߦ͏ͱϦΞϧλΠϜ ʹը໘ͷ໌Δ͕͞มԽ͢Δɻ Ϣʔβʔ͕ࣗઃఆ͍ͨ͠໌Δ͞Λ֬ೝ͠ͳ͕Βௐૢ࡞ ͕ߦ͑Δɻ ྫ J5VOFTͷΠίϥΠβʔ ྫ J1IPOFͷ໌Δ͞ઃఆ
2010年5⽉8⽇ 使いやすいユーザーインターフェースのための7つの原則 5 4. ରԠ͚Λਖ਼͘͢͠Δɻ Ϣʔβʔͷૢ࡞ͱͦͷӨڹൣғ݁ՌͱͷରԠؔΛཧղ͍͢͠Α͏ʹ͢Δɻ Ϣʔβʔͷҙਤͱͦͷ࣌ͰϢʔβʔ͕࣮ߦͰ͖Δߦҝͷؔ ϢʔβͷߦҝͱͦΕ͕γεςϜʹٴ΅͢Өڹͷؔ γεςϜͷ࣮ࡍͷ෦ঢ়ଶͱͰݟͨΓฉ͍ͨΓײ͡औΕͨΓ͢Δͷͷؒͷؔ Ϣʔβʔ͕֮Ͱ͖ΔγεςϜͷঢ়ଶͱϢʔβʔͷཉٻɾҙਤɾظͷؔ
γεςϜͷ࣮ࡍͷ෦ঢ়ଶͱͰݟͨΓฉ͍ͨΓײ͡औΕͨΓ ͢Δͷͷؒͷؔ J1IPOFͰ֊Ҡಈ͕ൃੜ͢Δૢ࡞Λߦͬͨ࣌ɺࠨӈํͷ τϥϯδγϣϯද͕ࣔߦΘΕɺ෦తʹ֊Ҡಈ͕ൃੜͨ͜͠ͱΛ ࢹ֮తʹײͤ͡͞Ϣʔβʔͷ಄ͷதͰͷରԠ͚Λߦ͍ͬͯΔɻ ྫ ϒϥβͷਐΉʗΔϘλϯ ྫ J1IPOFͷ֊Ҡಈ࣌ͷτϥϯδγϣϯ Ϣʔβʔͷҙਤͱͦͷ࣌ͰϢʔβʔ͕࣮ߦͰ͖Δߦҝͷؔ ϒϥβͷਐΉʗΔϘλϯɺͦΕͧΕਐΉʗΔઌͷϖʔδ ͕ଘࡏ͢Δ߹ʹͷΈૢ࡞Մೳͱͳ͍ͬͯͯɺͦͷ࣌ͰϢʔβʔ ͕࣮ߦͰ͖ΔߦҝͱͷରԠ͚Λߦ͍ͬͯΔɻ ૢ࡞Մೳঢ়ଶ Δઌ͕͋Δ ૢ࡞ෆՄঢ়ଶ ਐΉઌΔઌͳ͍
2010年5⽉8⽇ 使いやすいユーザーインターフェースのための7つの原則 6 5. ࣗવͷ੍ਓతͳ੍ͳͲͷ੍ͷྗΛར༻͢Δ ໘ʹΑͬͯɺ੍Λઃ͚Δ͜ͱʹΑͬͯϢʔβʔʹݶΒΕͨૢ࡞͔͠ग़དྷͳ͍͜ͱΛཧղͤ͞Δ͜ͱͰɺϢʔβʔ͕ૢ ࡞ͷҙຯΛ༰қʹཧղͨ͠Γɺ໎͏͜ͱͳ͘ૢ࡞͢Δ͜ͱ͕ՄೳͱͳΔɻ 4BGBSJͷࣗಈೖྗػೳΛར༻͢Δࡍͷઃఆͱͯ͠ɺԼه߲ͷઃ ఆΛߦΘͳ͚ΕͳΒͳ͍͕ɺ·ͣͷࣗಈೖྗઃఆΛߦΘͳ͚ Εͷઃఆ͕ग़དྷͳ͍Α͏ʹ੍͕ઃ͚ΒΕ͓ͯΓɺ༧Ίzࣗಈ
ೖྗ͢ΔzΛબͳ͚ΕͳΒͳ͍͜ͱΛจষʹΑΔઆ໌ʹཔΔ͜ ͱͳ͘ɺ༰қʹཧղͰ͖Δɻ ࣗಈೖྗ͢Δʗ͠ͳ͍ ࣗಈೖྗʹར༻͢Δਓͷબ ྫ ϒϥβͷϓϩΩγઃఆ ྫ J1IPOF4BGBSJͷࣗಈೖྗઃఆ *OUFSOFU&YQMPSFSͷϓϩΩγઃఆɺzϓϩΩγΛར༻͢Δzઃఆ ͷνΣοΫϘοΫεΛΦϯʹͨ͠߹ͷΈϓϩΩγઃఆͷೖྗ͕ ग़དྷΔΑ͏ʹ੍͕Ճ͑ΒΕ͍ͯΔɻ ͜ΕʹΑΓɺϢʔβʔzϓϩΩγΛར༻͢ΔzઃఆΛߦΘͳ͚Ε ϓϩΩγ͕ར༻ՄೳͱͳΒͳ͍͜ͱΛจষʹΑΔઆ໌ʹཔΔ͜ ͱͳ͘ɺ༻ҙʹཧղͰ͖Δɻ ૢ࡞Մೳঢ়ଶ Δઌ͕͋Δ ૢ࡞ෆՄঢ়ଶ ਐΉઌΔઌͳ͍ ࣗಈೖྗΦϑͷ߹ɺ zࣗͷใzάϨʔΞτ ͞Ε͍ͯΔɻ ࣗಈೖྗΦϯʹมߋޙɺ zࣗͷใzબՄೳͱͳ Δɻ
2010年5⽉8⽇ 使いやすいユーザーインターフェースのための7つの原則 7 6. Τϥʔʹඋ͑ͨσβΠϯΛ͢Δɻ ཧతʹΤϥʔ͕ൃੜ͠ͳ͍ͱ͍͏ঢ়ଶͰ͋Δ͕ɺݱ࣮తʹΤϥʔൃੜ͢ΔɻΤϥʔ͕ൃੜ͢Δ͜ͱΛલఏʹԼهͷ Λߟྀ͢Δɻ Կ͕ى͔ͬͨ͜Λਖ਼͑͘͠Δ Τϥʔঢ়ଶ͔Βղআ͢Δํ๏Λఏࣔ͢Δ ҎԼɺγεςϜͱͯ͠ΤϥʔͰͳ͍͚ΕͲϢʔβʔ͕ҙਤ͠ͳ͍ૢ࡞Λߦ͏έʔεͱ͍͏ҙຯͰͷΤϥʔ
·͘͠ͳ͍ঢ়ଶΛݩʹ͢खஈΛఏڙ͢Δ ݩʹ͢खஈΛఏڙͰ͖ͳ͍ૢ࡞ʹ͍ͭͯɺ࣮ߦ͠ʹ͘͘͢Δɻ ֬ೝμΠΞϩάΛදࣔ͢ΔͳͲ จࣈೖྗૢ࡞ΧοτɺϖʔετͳͲͷૢ࡞ޙຊମΛৼΔ͜ͱͰ 6OEPϝχϡʔ͕දࣔ͞Εɺૢ࡞ΛऔΓফ͢͜ͱ͕ग़དྷΔɻ ྫ ϒϥβͷϓϩΩγઃఆ ྫ J1IPOFΧοτૢ࡞ͷऔΓফ͠ *OUFSOFU&YQMPSFSͷཤྺআૢ࡞Ͱɺͯ͢আΛબ͢Δͱɺ ͏Ұ֬ೝμΠΞϩά͕දࣔ͞ΕɺϢʔβʔ͕ޡͬͨૢ࡞Ͱཤ ྺআૢ࡞͢Δ͜ͱΛ͍Ͱ͍Δɻ ֬ೝμΠΞϩάΛʹ ର͢Δ0,Ͱཤྺআ Λ࣮ߦ ޡͬͯΧοτૢ࡞ ຊମΛৼͬͯ 6OEPૢ࡞ ݩͷঢ়ଶʹ෮ؼ
2010年5⽉8⽇ 使いやすいユーザーインターフェースのための7つの原則 8 7. ඪ४Խ͢Δ લड़ͷʙͷݪଇʹैͬͯɺϢʔβʔʹࣗવʹૢ࡞Λཧղͤ͞Δ͜ͱ͕ग़དྷͳ͍߹ɺඪ४Խ͠ૢ࡞Λ౷Ұ͢Δ͜ͱͰ Ϣʔβʔͷෛ୲Λܰݮ͢Δɻ ͜ͷέʔεʹ֘͢Δͷɺैདྷʹͳ͍શ͘৽͍֓͠೦ͷػೳΛ࣮ݱ͢Δ߹͕ߟ͑ΒΕΔɻ ˞ඪ४ԽͷλΠϛϯά͕ͱͳΔɻૣ͗͢Δͱॳظஈ֊ͷٕज़ͷ···ͬͯ͠·͏͜ͱʹͳΓɺٕज़ͷਐาΛ͍ͬͯ Δͱଞͷૢ࡞ܥ͕ਁಁͯ͠͠·͍ɺඪ४Խ͕ࠔͱͳΔɻ
ඪ४Խ͞Ε͍ͯΔϢʔβʔΠϯλʔϑΣʔε 28&35:ΩʔϘʔυ ฒͼॱෳࡶ͕ͩɺ༷ʑͳ̻ػثͰಉ͡ϨΠΞτ͕࠾༻͞ Ε͓ͯΓɺҰͭͷػثͰֶश͢ΕଞͷػثͰಉ͡Α͏ʹ ͏͜ͱ͕Ͱ͖Δɻ ඪ४Խ͞Ε͍ͯͳ͍ϢʔβʔΠϯλʔϑΣʔε ΞϧϑΝϕοτॱΩʔϘʔυ ฒͼॱΘ͔Γ͍͕͢ɺஔ͕ඪ४Խ͞Ε͍ͯͳ͍ͨΊɺ͏ ػث͝ͱʹจࣈΛ୳͞ͳ͚ΕͳΒͣɺ࣮࣭తʹ͍ʹ͍͘ɻ