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
CoderDojoの今を伝えるDojoLetter編集部@DojoCon Japan 2022
kwaka1208
0
330
Why CoderDojo? @ DojoCon Japan 2022交流会LT
kwaka1208
0
460
奈良のCoderDojoを見渡す@DojoCon Japan 2021
kwaka1208
0
140
zoomとYouTube Liveによるライブ配信講座
kwaka1208
0
210
CoderDojoと子どもプログラミング喫茶による子どもプログラミングエコシステムのご提案
kwaka1208
0
160
CoderDojoってどんなこと やってるのかお話します
kwaka1208
0
670
Future meeting - これからの子どもたちに必要な学びとは - @KANDAI Me RISE
kwaka1208
0
120
これからはじめる非エンジニアのための開発環境構築 Git/GitHubによるソースコード管理編
kwaka1208
0
140
CoderDojoの経験から見たコミュニティの未来
kwaka1208
0
58
Other Decks in Design
See All in Design
デザイナーとPMの両ロール_3つのポイント
toy1618
1
300
セブンデックス カルチャーブック
sevendex
1
14k
The Golden Whitney
ohtristanart
PRO
0
410
Starry | Storyboards | Scene 1-21
giofortuna_story
0
250
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
230
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
線で考える画面構成
natsuume
1
860
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.6k
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
210
Storyboard Honey
rocioparronrubio
0
240
マンガで分かるサービスデザインガイドライン
senryakuka
1
860
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
140
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Unsuck your backbone
ammeep
671
58k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.3k
4 Signs Your Business is Dying
shpigford
183
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Agile that works and the tools we love
rasmusluckow
329
21k
The Language of Interfaces
destraynor
158
25k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Documentation Writing (for coders)
carmenintech
71
4.8k
Site-Speed That Sticks
csswizardry
7
590
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:ΩʔϘʔυ ฒͼॱෳࡶ͕ͩɺ༷ʑͳ̻ػثͰಉ͡ϨΠΞτ͕࠾༻͞ Ε͓ͯΓɺҰͭͷػثͰֶश͢ΕଞͷػثͰಉ͡Α͏ʹ ͏͜ͱ͕Ͱ͖Δɻ ඪ४Խ͞Ε͍ͯͳ͍ϢʔβʔΠϯλʔϑΣʔε ΞϧϑΝϕοτॱΩʔϘʔυ ฒͼॱΘ͔Γ͍͕͢ɺஔ͕ඪ४Խ͞Ε͍ͯͳ͍ͨΊɺ͏ ػث͝ͱʹจࣈΛ୳͞ͳ͚ΕͳΒͣɺ࣮࣭తʹ͍ʹ͍͘ɻ