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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
35
クロスロード株式会社企業案内
kwaka1208
0
76
CoderDojoの今を伝えるDojoLetter編集部@DojoCon Japan 2022
kwaka1208
0
420
Why CoderDojo? @ DojoCon Japan 2022交流会LT
kwaka1208
0
520
奈良のCoderDojoを見渡す@DojoCon Japan 2021
kwaka1208
0
220
zoomとYouTube Liveによるライブ配信講座
kwaka1208
0
270
CoderDojoと子どもプログラミング喫茶による子どもプログラミングエコシステムのご提案
kwaka1208
0
210
CoderDojoってどんなこと やってるのかお話します
kwaka1208
0
760
Future meeting - これからの子どもたちに必要な学びとは - @KANDAI Me RISE
kwaka1208
0
160
Other Decks in Design
See All in Design
デザインワークフローの最前線。 ログラスでのAI活用の現在地
ukaoli
1
3.4k
みんながデザインを担う組織へ。急加速する開発組織でのデザイナーの戦略
mukai_takeru
0
260
Design_Harness_and_Loop.pdf
nagatsu
0
110
AVI 2026 Keynote "Vision-Driven Design"
ishii_mit
0
190
2026/8/20 Polaris15周年イベント 『共創の場をつくる』 〜 誰もが『心地よく暮らし、心地よくはたらく』ことを選択できる社会へ 〜 関係性から地域をつくりなおす共創の土壌づくり〜リビングラボの事例を通じて〜
a2k
0
100
HeartLanguage - DesignProcess
heartlanguage
0
200
使いたいときだけ使う 「道具のようなアプリケーション」を考える
fumink7
0
280
decksh object reference
ajstarks
2
1.8k
自社プロダクトのUIをAIが再現するデザインビルドシステム
toy1618
0
1.3k
Edmonton River Slidedeck
edmontonriver
0
420
Findy - デザインチーム紹介 / Findy Design Team Culture Deck
findyinc
14
150k
染み出し好きの、 染み出しコントロール論
mukai_takeru
0
490
Featured
See All Featured
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
1.1k
Fireside Chat
paigeccino
43
4.1k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
270
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
260
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
2
940
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.9k
Mobile First: as difficult as doing things right
swwweet
225
10k
Git: the NoSQL Database
bkeepers
PRO
433
67k
[RailsConf 2023] Rails as a piece of cake
palkan
59
7.1k
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:ΩʔϘʔυ ฒͼॱෳࡶ͕ͩɺ༷ʑͳ̻ػثͰಉ͡ϨΠΞτ͕࠾༻͞ Ε͓ͯΓɺҰͭͷػثͰֶश͢ΕଞͷػثͰಉ͡Α͏ʹ ͏͜ͱ͕Ͱ͖Δɻ ඪ४Խ͞Ε͍ͯͳ͍ϢʔβʔΠϯλʔϑΣʔε ΞϧϑΝϕοτॱΩʔϘʔυ ฒͼॱΘ͔Γ͍͕͢ɺஔ͕ඪ४Խ͞Ε͍ͯͳ͍ͨΊɺ͏ ػث͝ͱʹจࣈΛ୳͞ͳ͚ΕͳΒͣɺ࣮࣭తʹ͍ʹ͍͘ɻ