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
使いやすいユーザーインターフェースのための7つの原則(2010年作成)
Search
Wakabayashi, Kenichi
August 14, 2017
Design
0
130
使いやすいユーザーインターフェースのための7つの原則(2010年作成)
使いやすいユーザーインターフェースとは何かを説明するために、ドンノーマン博士の7つの原則を実例を交えて説明した資料。2010年当時のものなので、例が古いです。
Wakabayashi, Kenichi
August 14, 2017
Tweet
Share
More Decks by Wakabayashi, Kenichi
See All by Wakabayashi, Kenichi
クロスロード株式会社企業案内
kwaka1208
0
28
CoderDojoの今を伝えるDojoLetter編集部@DojoCon Japan 2022
kwaka1208
0
350
Why CoderDojo? @ DojoCon Japan 2022交流会LT
kwaka1208
0
470
奈良のCoderDojoを見渡す@DojoCon Japan 2021
kwaka1208
0
160
zoomとYouTube Liveによるライブ配信講座
kwaka1208
0
230
CoderDojoと子どもプログラミング喫茶による子どもプログラミングエコシステムのご提案
kwaka1208
0
170
CoderDojoってどんなこと やってるのかお話します
kwaka1208
0
690
Future meeting - これからの子どもたちに必要な学びとは - @KANDAI Me RISE
kwaka1208
0
130
これからはじめる非エンジニアのための開発環境構築 Git/GitHubによるソースコード管理編
kwaka1208
0
160
Other Decks in Design
See All in Design
「UXとUIの違い」v2
shirasu3
0
210
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
230
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
180
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
160
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
2.8k
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
530
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
270
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
260
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
530
#Dubois Challenge 2025: Economics
ajstarks
1
160
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.2k
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Bash Introduction
62gerente
614
210k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Side Projects
sachag
455
43k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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:ΩʔϘʔυ ฒͼॱෳࡶ͕ͩɺ༷ʑͳ̻ػثͰಉ͡ϨΠΞτ͕࠾༻͞ Ε͓ͯΓɺҰͭͷػثͰֶश͢ΕଞͷػثͰಉ͡Α͏ʹ ͏͜ͱ͕Ͱ͖Δɻ ඪ४Խ͞Ε͍ͯͳ͍ϢʔβʔΠϯλʔϑΣʔε ΞϧϑΝϕοτॱΩʔϘʔυ ฒͼॱΘ͔Γ͍͕͢ɺஔ͕ඪ४Խ͞Ε͍ͯͳ͍ͨΊɺ͏ ػث͝ͱʹจࣈΛ୳͞ͳ͚ΕͳΒͣɺ࣮࣭తʹ͍ʹ͍͘ɻ