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
私とデザインの10年
iflection
0
120
UXデザインはなぜ定着しないのか?
designstudiopartners
0
560
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
440
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
530
CIRCULAR ECONOMY + SERVICES
jmanooch
0
110
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
Cards | Storyboards
giofortuna_story
0
240
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
230
LLMによるRAG評価用合成テストデータの生成
licux
6
1.1k
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
290
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
290
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
230
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
How to train your dragon (web standard)
notwaldorf
92
6k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Adaptive Systems
keathley
41
2.6k
The Invisible Side of Design
smashingmag
299
50k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Writing Fast Ruby
sferik
628
61k
How to Ace a Technical Interview
jacobian
276
23k
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!