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
29
CoderDojoの今を伝えるDojoLetter編集部@DojoCon Japan 2022
kwaka1208
0
350
Why CoderDojo? @ DojoCon Japan 2022交流会LT
kwaka1208
0
480
奈良の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
230
株式会社バクタム 会社説明資料
bactum
0
330
Yumika Yamada Portfolio
yumii
0
1.4k
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
270
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
550
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
460
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
880
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
520
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
340
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.3k
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
660
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2k
A better future with KSS
kneath
239
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Navigating Team Friction
lara
189
15k
Embracing the Ebb and Flow
colly
87
4.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Building Adaptive Systems
keathley
43
2.7k
Faster Mobile Websites
deanohume
309
31k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Being A Developer After 40
akosma
90
590k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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:ΩʔϘʔυ ฒͼॱෳࡶ͕ͩɺ༷ʑͳ̻ػثͰಉ͡ϨΠΞτ͕࠾༻͞ Ε͓ͯΓɺҰͭͷػثͰֶश͢ΕଞͷػثͰಉ͡Α͏ʹ ͏͜ͱ͕Ͱ͖Δɻ ඪ४Խ͞Ε͍ͯͳ͍ϢʔβʔΠϯλʔϑΣʔε ΞϧϑΝϕοτॱΩʔϘʔυ ฒͼॱΘ͔Γ͍͕͢ɺஔ͕ඪ४Խ͞Ε͍ͯͳ͍ͨΊɺ͏ ػث͝ͱʹจࣈΛ୳͞ͳ͚ΕͳΒͣɺ࣮࣭తʹ͍ʹ͍͘ɻ