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
Webサイトの作り方
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Shusay
June 22, 2016
Design
1
2.4k
Webサイトの作り方
Shusay
June 22, 2016
Tweet
Share
Other Decks in Design
See All in Design
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
mixi_design
PRO
1
200
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
pixyzehn
0
130
Figmaレクチャー会Part1 基本のき編@千株式会社 社内勉強会
designer_no_pon
2
250
アクセシビリティ推進を続けられるようにするヒント - Accessibility Conference CHIBA 2025
uto
0
180
AIエージェントが対話的なUIを返す!MCP−UIで変わるユーザ体験
daitasu
1
140
はじめての演奏会フライヤーデザイン
chorkaichan
1
220
Shaolin_Showdown
solmetts
0
290
Crisp Code inc.|ブランドガイドライン - Brand guidelines
so_kotani
1
300
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
140
Vibe Coding デザインシステム
poteboy
3
1.6k
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
290
kintone Style Book
kintone
6
10k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
51
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
0
140
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
61
52k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
67
Practical Orchestrator
shlominoach
191
11k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
220
Into the Great Unknown - MozCon
thekraken
40
2.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
14k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
83
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
0
140
Transcript
8&#αʔϏε͕Ͱ͖Δ·Ͱ Plan, Sketch, Coloring, Decide Guideline, Comprehensive Layout, Coding ϏϏϏοτࣾษڧձ
Plan, Sketch, Decide Guideline, Comprehensive Layout, Coding ϓϥϯɺεέονɺΨΠυϥΠϯɺΧϯϓɺίʔσΟϯά
Plan
Plan ͲͷΑ͏ͳαΠτʹ͍͔ͨ͠ߟ͑Α͏
Plan ͬͦ͘͞ΞΠσΞΛͩ͠·͘Γ͍ͨͱ͜ͱ͕ͩɾɾɾ
Plan ͔͕͜͜͠͠Ұ൪͍͠
Plan ͩ͠·ͬͨ͘ΞΠσΞΛ·ͱΊΔͷ͕͍͠
Plan μϝͳ1MBO͋Δ͋Δ w ͩ͠·ͬͨ͘ΞΠσΞΛޙ͔Βݟฦͯ͠ɺzͳͥͦΕ ͕ॻ͍ͯ͋Δͷ͔z͕·͔ͬͨ͘Βͳ͍ w ڞಉ࡞ۀऀʹڞ༗Ͱ͖ͳ͍ w ΞΠσΞͷࢠ͕͔ؔΒͣɺ·ͱ·Βͳ͍
Plan ͦΜͳͱ͖9NJOEΛ͏ IUUQKQYNJOEOFU
Plan 9NJOEͱɺ͍ΘΏΔϚΠϯυϚοϓπʔϧ
Plan ϚΠϯυϚοϓͱɺӳࠃͷڭҭऀτχʔɾϒβϯ͕։ൃͨ͠తͳࢥߟٕज़ Ͱ͢ɻ͕ࣗߟ͍͑ͨςʔϚΛࢴͷதԝʹֆͰඳ͖ɺ͔ͦ͜Β์ࣹঢ়ʹࢬΛ৳ ͯ͠ɺΩʔϫʔυΠϝʔδΛܨ͛ͳ͕ΒɺൃΛ͍͖͛ͯ·͢ɻϚΠϯυϚο ϓɺʹຊདྷඋΘΔใॲཧϓϩηεΛ׆༻ͨ͠ࢥߟ๏Ͱ͢ɻ࣮ࡍʹඳ͍ͯΈ Δͱɺ୭Ͱࢥߟ͕ཧ͞Εɺ࣍ʑʹൃ͕Θ͍ͯ͘Δ͜ͱʹڻ͖·͢ɻ
Plan 9NJOEͷը໘
Plan 9NJOEΛ͏ϝϦοτ w ڞ༗ָ͕ w ͳͥͦͷൃʹͳ͔ͬͨΛτϨʔεͰ͖Δ w ΞΠσΞΛߏʹམͱ͠ࠐΊΔ
Plan ΞΠσΞΛ֊Խ͢Δ
Plan ͭ·Γɺग़ͨ͠ΞΠσΞΛ࣮ࡍͷαΠτͷߏʹͯΊ͍ͯ͘
Plan ͭ·Γɺग़ͨ͠ΞΠσΞΛ࣮ࡍͷαΠτͷߏʹͯΊ͍ͯ͘ w Ұ൪࠷ॳͷϖʔδͰԿΛ͢Δͷ͔ɾɾɾ w ϖʔδ୯ҐͰΕΔ͜ͱͷܾఆΛ͢Δ w ͜͜ͰΞΠσΞΛΓ࢝ΊΔ w ͪͳΈʹɺʮཁ݅ఆٛʯͱݺΕΔͷʹ͍ۙ࡞ۀ
Plan ͜ͷ࡞ۀɺσΟϨΫτϦϚοϓ੍࡞ͱݺΕΔ αΠτͷઃܭਤΈ͍ͨͳͷͰ͢
Plan σΟϨΫτϦϚοϓ͖ͬͪΓͱͭ͘Ζ͏ɻ 9NJOE$BDPPͳͲΛ͏߹͕ଟ͍Ͱ͢ɻ
Plan ͜͜·Ͱ͕1MBOͰ͢ɻ1MBO͕͏·͍͔͘ͳ͍ͱɺ ࣍ͷ4LFUDIͰ͚͜ΔͷͰҙɻ
Sketch
Sketch ϖʔύʔϓϩτλΠϓΛͭ͘Ζ͏
ϖʔύʔϓϩτλΠϓͱɺ8FCϖʔδΞϓϦͷେ·͔ͳίϯςϯπϨΠΞ τΛࢴʹखॻ͖ͨ͠ͷɻओʹϨΠΞτͷ֬ೝɺϝχϡʔߏͷ֬ೝɺཁૉ ͷڧऑͷ֬ೝͳͲΛతʹ࡞͢Δɻϖʔδຕͱͯ͠࡞͍ͯ͘͠ɻ Sketch
Sketch ཁ͜ΜͳͷͰ͢
Sketch
Sketch 1MBOͰͭͬͨ͘σΟϨΫτϦϚοϓΛͱʹɺ࣮ࡍͷαΠτ ΞϓϦͷσβΠϯΛΠϝʔδͨ͠ϥϑεέονΛॻ͍͍ͯ ͜͏ɻ
Sketch ͜ͷεςοϓΛܦͳ͍ͱɺ͋ͱͰσβΠϯͷਗ਼ॻ σβΠϯΧ ϯϓ੍࡞ Λͨ͠ͱ͖ʹΤϯδχΞͱ͔σΟϨΫλʔ͔Βʮͳ ʹ͜ΕʂʯͱͳΔ͜ͱɾɾɾ
μϝͳ4LFUDI͋Δ͋Δ w ϖʔύʔϓϩτλΠϓΛݟͯɺͲͷϖʔδ͔͙͢ʹ ͔Βͳ͍ w ڞಉ࡞ۀऀʹڞ༗Ͱ͖ͳ͍ w ͖͋Β͔ʹ࣮ݱෆՄೳ Sketch
Sketch ͜͜εϐʔυॏࢹɻڞಉ࡞ۀऀ͕͔ΔϨϕϧͷ៉ྷ͞Ͱ ेɻ
Sketch ͻͱ௨Γॻ͖ऴΘͬͨΒɾɾɾ
Sketch ը໘ભҠਤͱݺΕΔͷΛͭ͘Γ·͢ɻ
ը໘ભҠਤͱɺը໘ͷߏΛද͢ਤͷͻͱͭͰɺը໘͕ͦͷΑ͏ͳॱংͰදࣔ ͞ΕΔ͔ɺ͋Δ͍ը໘Ͳ͏͕ͦ͠ͷΑ͏ͳؔ࿈ੑΛ͍࣋ͬͯΔͷ͔Λࣔͨ͠ਤ ղͷ͜ͱͰ͋Δɻը໘ઃܭʹ༻͍ΒΕΔͷͰɺը໘֊ਤͱڞʹද͞ΕΔ͜ͱ গͳ͘ͳ͍ Sketch
Sketch ͋Δ෦ҐΛΫϦοΫ λοϓ ͨ͠ͱ͖ɺ࣍Ͳͷը໘ʹҠ ಈ͢Δͷ͔Λදͨ͠ͷɻ͜ΕΛͭ͘Δ͜ͱʹΑͬͯɺ Α͏͘αΠτ ͘͠ΞϓϦ ͷશମ૾͕͖ͬΓ͢ Δɻ
Sketch Ͳ͏ͬͯͭ͘Δ͔
Sketch ࢴΛฒͯܞଳͰࣸਅࡱͬͯɾɾɾͰ͍͍͚Ͳڞ༗ੑ ʹ͋Γ
ͦΜͳͱ͖1SPUUΛ͏ IUUQTQSPUUBQQDPN Sketch
ܞଳͰࡱͬͨϖʔύʔϓϩτλΠϓΛΞοϓϩʔυͯ͠ɺ ؆୯ʹը໘ભҠਤ͕࡞ΕΔ Sketch
Sketch
࠷ޙʹɺڞಉ࡞ۀऀʹϨϏϡʔͯ͠Β͓͏ Sketch
ϨϏϡʔΛαϘΔͱͱΜͰͳ͍͜ͱʹɾɾɾ Sketch
ϨϏϡʔΛαϘΔͱɾɾɾ w ϝϯόʔ͔Βʮฉ͍ͯͳ͍ʯʮΒͳ͍ʯϥογϡ w ࣮ݱෆՄೳͳઃܭͷ··ਐΉ͜ͱʹ w ΤϯδχΞ͕Կ࡞ͬͨΒ͍͍͔Θ͔Βͳ͍ࠈ w σβΠϯͷਗ਼ॻΛͭ͘Δͱ͖ʹΫοι͔͔࣌ؒΔ ͍ͪ
͍ͪݕ౼͠ͳ͕ΒΔඞཁ͕͋ΔͨΊ Sketch
Sketch ࣍ͷϑΣʔζ͔Βຊ֨తͳσβΠϯͰ͢
Decide Guideline
Decide Guideline ໌ྎͳσβΠϯʹඞཁͳͷ
Decide Guideline σβΠϯΨΠυϥΠϯ
σβΠϯΨΠυϥΠϯ͕ͳ͍ͱɾɾɾ w )5.-ΛΉͱ͖ʹɺϑΥϯταΠζ͕όϥόϥʹ w ڞಉ࡞ۀऀ͕దͳ৭ΛͬͪΌ͏ w ༨ന͕͋ͬͯͳͯ͘ΩϞ͍ w ࠶ݱੑ͕ͳ͍σβΠϯ w
࣌ؒΛ໌͚ͯ࡞ۀ͢Δͱ͖ɺຊਓΕΔ Decide Guideline
Decide Guideline ԿΛܾΊΔ͔
Decide Guideline Color Palette, Font, Font size, Margin size
Decide Guideline ΧϥʔύϨοτ͜Ε͚ͩԡ͑͞ͱ͚ฤ
Decide Guideline ࠇɺάϨʔɺϓϥΠϚϦΧϥʔΛͦΕͧΕ৭ܾͣͭఆ
Decide Guideline
Decide Guideline ͜Μͳײ͕͡ཧ
Decide Guideline جຊతʹͦͷ৭ͰΑ͠ɻ ৭૿͍͍͚ͯ͠Ͳɺ૿͗͢͠Δͱ Ϣʔβ͕໎͏ةݥੑ͕͋ΔͨΊ৻ॏʹɻ
Decide Guideline ϑΥϯτܾΊΑ͏ฤ
Decide Guideline ຊޠϑΥϯτ
Decide Guideline ೦ͳ͕ΒɺσόΠε͝ͱʹ͑ΔϑΥϯτ ݻఆ͞Ε͍ͯΔɻ
Decide Guideline OS X, iOS ώϥΪϊ֯ΰ ώϥΪϊؙΰ 0TBLB ᕟΰγοΫ Windows,
Windows Mobile .46*ΰγοΫ .41ΰγοΫ .41໌ே ϝΠϦΦ ᕟΰγοΫ
Decide Guideline ͭ·Γɺ.BDͰσβΠϯ͢Δ߹ώϥΪϊ֯ ΰҰͱͳΔɻώϥΪϊؙΰ͢͢Ί·ͤΜɻ
Decide Guideline ͡Ό͋ͳͥ͜ͷΛͯ͠Δ͔ͱ͍͏ͱɺԤจϑΥ ϯτ݁ߏࣗ༝ʹબΔ͔Β
Decide Guideline Α͔ͭ͘ΘΕΔͷҎԼɻ Helvetica Neue Lato Roboto Slab ηϦϑମΛ͏ʹͯ͠ɺͳΜ͔αϯηϦϑͬΆ͍ηϦϑ͕͔ͭΘΕΔ͋Γ
Decide Guideline ϑΥϯταΠζΛܾΊΑ͏
Decide Guideline ར༻͢ΔϑΥϯταΠζݫ֨ʹܾఆ͢Δ
Decide Guideline Զ͕Α͘͏'POUTJ[F QY QY QY QY QY QY QY
QY ͷഒ
Decide Guideline ༨നαΠζͱϘοΫεαΠζΛܾΊΑ͏
Decide Guideline ͨͱ͑ɺϘοΫεؒͷڑͳͲ͜͜ͰܾΊ ΔͱΑ͍
Decide Guideline ԶͷഒΛ͍ͬͯ·͢ QY QY QY QYͳͲΛΑ͍͘·͢ 314px 314px 314px
QY QY
Decide Guideline ԿͷഒͰ͍͍͚ͲɺͳΜΒ͔ͷഒʹ͢Δ ͱͱͨΜʹ߹ੑͷऔΕͨσβΠϯʹͳΔͨΊɺ ഒΛͬͯσβΠϯ͢Δ͜ͱΛ͓͢͢Ί͠· ͢ɻ
Comprehensive Layout
Comprehensive Layout ͍Α͍Αɺͱಉ͡ݟͨΛͭ͘Δఔ
Comprehensive Layout σΟϨΫτϦϚοϓͱϖʔύʔϓϩτλΠϓ͕͋Ε ߈Ͱͤ͞Δ͜ͱ͕Մೳ ٯʹ͜͜Ͱ͕͔͔࣌ؒΔͬͯ͜ͱेʹܾΊ͕ͳ͞Εͯͳ͔ͬͨͱ͍͏͜ͱ
Comprehensive Layout ڞ༗ੑΛߟྀ͠ɺ*MMVTUSBUPS͔1IPUPTIPQ͍ͣΕ͔Ͱߦ͓͏
Comprehensive Layout Χϯϓͷ੍࡞ϧʔϧ
Comprehensive Layout ෦͔Βͭ͘Δ
Comprehensive Layout μϝͳ$PNQSFIFOTJWF-BZPVU͋Δ͋Δ w ϘλϯͳͲͷ෦ʹ͔͔Δυϩοϓγϟυ͕όϥό ϥ w ෦ͷ৭ͷ͍͚͕ཧഁ
Comprehensive Layout ͜Μͳ͜ͱΛආ͚ΔͨΊʹ෦͔Βͭ͘Δ
Comprehensive Layout ͬͦͭͬͯ͘͘͞ΈΑ͏
Coding
Coding Ұ൪ͱ͖ͬͭʹ͍͘Ͱ͋Ζ͏αΠτͷͭ͘Γํ
Coding )5.-ͷίʔσΟϯάΛߦ͏
Coding ·ͣྲྀΕ͔Β
Coding ࡞ۀϑΥϧμΛͭ͘Δ ࡞ۀϑΥϧμͷதʹJOEFYIUNMͱ͍͏ϑΝΠϧΛͭ͘Δ ͦͷϑΥϧμͷதʹɺKT JNBHFT DTTͱ͍͏ͭͷϑΥ ϧμΛͭ͘Δ
ͬͦ͘͞ίʔσΟϯάελʔτʂ
Coding ɾɾɾͷલʹ
Coding
Coding ಓ۩Λଗ͑Α͏
Coding ಓ۩ͱɺΤσΟλ ͍͢͝ϝϞாͷ͜ͱ
Coding ࠓҰ൪Ξπ͍ΤσΟλ͜Ε Atom https://atom.io/
Coding ϓϥάΠϯΛೖΕ·͘Ζ͏
Coding pMFJDPOT QSPKFDUNBOBHFS UFSN BVUPDPNQMFUFQMVT USBJMJOHTQBDFT NJOJNBQ KBQBOFTFXSBQ BUPNDPMPSIJHIMJHIU BVUPJOEFOU
ͲΜͳπʔϧ͔ɺ ޱ಄Ͱ͠·͢
Coding ίʔσΟϯάͷجຊ
Coding Ͳ͜·ͰΠϝʔδͯ͠)5.-ΛΊΔ͔͕উෛ
Coding ͔͜͜ΒઌؤுͬͯίʔσΟϯά͢ΔͷΈͰ͢ɻ
Coding ίπͱ͔͋Μ·Γͳ͍Ͱ͢ɻ
Coding ͪͳΈʹɺαΠτΛެ։͢Δʹɺ ͞ΒʹʮσϓϩΠʯͱ͍͏ఔ͕ඞཁ
σϓϩΠͱɺιʔείʔυΛαʔόʹίϐϖͯ͠ੈքதͷਓ͕ݟΕΔঢ়ଶʹ͢ Δ͜ͱͰ͋Δɻ Coding
Coding ࣗͷ1$ͷத͚ͩʹιʔείʔυΛஔ͍͓͍ͯͨΒɺ ࣗҰਓ͔͠ݟΕͳ͍ɻ ނʹσϓϩΠ͕ඞཁɻ
Coding Ξοϓϩʔυͱࣅͨ֓೦ͩͱࢥ͍ͬͯͩ͘͞ɻ ͱ͍͏͔΄΅Ұॹɻ
Thank You!