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
Shusay
June 22, 2016
Design
1
2.4k
Webサイトの作り方
Shusay
June 22, 2016
Tweet
Share
Other Decks in Design
See All in Design
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
160
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
120
アクセシビリティに取り組むメリット
magi1125
2
270
The Spectacular Lies of Maps
axbom
PRO
1
320
プロダクトリニューアルと同時に進める初めてのデザインシステム
techtekt
PRO
0
150
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
350
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.3k
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
430
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
160
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
650
Featured
See All Featured
Building Adaptive Systems
keathley
44
2.8k
4 Signs Your Business is Dying
shpigford
185
22k
Why Our Code Smells
bkeepers
PRO
340
57k
The Language of Interfaces
destraynor
162
25k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
A designer walks into a library…
pauljervisheath
209
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Automating Front-end Workflow
addyosmani
1371
200k
Optimizing for Happiness
mojombo
379
70k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
What's in a price? How to price your products and services
michaelherold
246
12k
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!