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
Will StyleのWebサイト制作
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Mineo Okuda
January 10, 2020
Design
0
2k
Will StyleのWebサイト制作
Mineo Okuda
January 10, 2020
Tweet
Share
Other Decks in Design
See All in Design
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
570
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
140
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
mixi_design
PRO
1
200
OJTで学んだ 「心を動かす」ファシリテーション
saki822
1
240
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
koyaman
1
1.3k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
1M
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは?~操作を減らし、成果を最大にするための設計~
ncdc
0
110
kintone_aroma
kintone
0
1.4k
decksh object reference
ajstarks
2
1.5k
kintone Style Book
kintone
6
10k
Figmaレクチャー会Part2 もっと使いこなす編@千株式会社 社内勉強会
designer_no_pon
1
260
Vibe Coding デザインシステム
poteboy
3
1.6k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.9k
How to train your dragon (web standard)
notwaldorf
97
6.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
2.1k
Prompt Engineering for Job Search
mfonobong
0
160
Principles of Awesome APIs and How to Build Them.
keavy
128
17k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
170
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
830
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
170
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
70
Navigating Team Friction
lara
192
16k
Ethics towards AI in product and experience design
skipperchong
2
200
Transcript
W Our philosophy Will StyleͷWebαΠτ੍࡞
Table of contents 1. ࣗݾհ 2. WebαΠτ੍࡞ͱ 3. SEOʹ͍ͭͯ 4.
࣮ࡍʹͬͯΈͨ͜ͱ 5. Will Style͕ߟ͑ΔWebαΠτ੍࡞ 6. WebαΠτʹՃՁΛ༩͑Δ 7. ͍͞͝ʹ
Self introduction Will Style Inc. औక CTOʗਆށͷWeb੍࡞ձࣾʗόϯυϚϯˠ26ࡀͰࣾձਓˠશಠֶͰσ βΠφʔɾΤϯδχΞˠ32ࡀͰୟ্͖͛ͷܦӦऀʗࣗࣾϒϩάͰ͓ࣄͷ100%ΛαΠτ͔Βͷ ͓͍߹Θͤʹͨ͠உʗӦۀɾ࠾༻ίετθϩʗຊҰૉఢͳWebαΠτΛ࡞ΔձࣾΛࢦ͢ Will
Style Inc. ਆށͷWeb੍࡞ձࣾɻ ΫϥΠΞϯτͱͷίϛϡχέʔγϣϯΛେʹͨ͠WebαΠτ੍࡞Λ͢Δձࣾɻ
WebαΠτ੍࡞ͱ Web creation
ͦͦɺͳͥWebαΠτ͕ඞཁͳͷͰ͠ΐ͏ Web creation WebαΠτ੍࡞ͱ
Web creation WebαΠτ੍࡞ͱ ͳͥWebαΠτ͕ඞཁͳͷ͔
ͦΕWebαΠτ͕ͳͯ͘ՄೳͰͳ͍Ͱ͔͢ʁ Web creation WebαΠτ੍࡞ͱ DMଞഔମͷࠂΛ͑ ू٬Մೳ WebҎ֎ͰͰ͖Δ͜ͱ
Web creation WebαΠτ੍࡞ͱ ίετͰࠂͱͯ͑͠Δ λʔήοτߜΕΔ Web͔ͩΒͰ͖Δ͜ͱ
WebαΠτ੍࡞ͱWebʹ͔͠ग़དྷͳ͍͜ͱͰ ΫϥΠΞϯτͱϢʔβʔΛͭͳ͗ తΛୡͤ͞ΔͨΊͷπʔϧΛ࡞Δ͜ͱ Web creation WebαΠτ੍࡞ͱ
SEOʹ͍ͭͯ SEO
SEO SEOʹ͍ͭͯ SEOͱ • Search Engine OptimizationʢݕࡧΤϯδϯ࠷దԽʣͷུ • ݕࡧΤϯδϯΫΦϦςΟͷߴ͍ϖʔδΛ্Ґʹදࣔ͠Α͏ͱ͢Δ •
ݕࡧΤϯδϯʹ͚ͯWebαΠτΛ࠷దͳঢ়ଶʹ͚ۙͮΔ͜ͱ
ϒϥοΫϋοτSEO ϒϥοΫϋοτSEOͱ࣭ͷ͍ίϯςϯπͷݕࡧॱҐΛෆਖ਼ͳํ๏ʹΑ্ͬͯঢͤ͞ΔςΫχοΫͷ͜ͱɻ 1. ඃϦϯΫͷେྔઃஔ 2. ίϐʔίϯςϯπ 3. Ӆ͠ςΩετӅ͠ϦϯΫ 4. ΩʔϫʔυΛෆࣗવʹ٧ΊࠐΜͩจষʢϫʔυαϥμʣ
5. ݕࡧΤϯδϯ͚ͷಛผͳϖʔδΛදࣔ͢ΔߦҝʢΫϩʔΩϯάʣ SEO SEOʹ͍ͭͯ
ύϯμΞοϓσʔτͱϖϯΪϯΞοϓσʔτ ࣭ͳίϯςϯπΛݕࡧ݁Ռ͔Βআ֎͢Δ͜ͱͰɺ݁Ռతʹݕࡧ݁Ռ্Ґʹ࣭ͷߴ͍Σ ϒαΠτΛදࣔͰ͖ΔΑ͏ʹ͢ΔΞοϓσʔτ εύϜߦҝɺΣϒϚελʔ͚ΨΠυϥΠϯʹஶ͘͠ҧ͍ͯ͠ΔWebϖʔδʹରͯ͠ݕ ࡧ݁ՌͷॱҐΛԼ͛ΔΞοϓσʔτ Google࣭ͷ͍ίϯςϯπͷݕࡧॱҐΛԼ͛ΔΞϧΰϦζϜΞοϓσʔτΛߦ͍·ͨ͠ SEO SEOʹ͍ͭͯ
ϗϫΠτϋοτSEO ϗϫΠτϋοτSEOͱϢʔβʔͷ՝ղܾͱͳΔྑ࣭ͳίϯςϯπΛ࡞ࣗ͠વͳඃϦϯΫΛ֫ಘ͢Δ͜ͱɻ 1. ݕࡧ݁Ռʹదͨ͠λΠτϧͱεχϖοτΛ࡞͢Δ 2. ޮՌతͳϦϯΫςΩετΛهड़͢Δ 3. ը૾Λ࠷దԽ͢Δ 4. Ϣʔβʔʹͱͬͯ༗ӹͳίϯςϯπΛ࡞͢Δ
SEO SEOʹ͍ͭͯ
ਖ਼߈๏ͰΞΫηεΛՔ͙͜ͱ Ϣʔβʔͷ՝ղܾͱͳΔྑ࣭ͳίϯςϯπΛ৴͢Δ͜ͱ SEO SEOʹ͍ͭͯ
࣮ࡍʹͬͯΈͨ͜ͱ Tried
ฐ͕࣮ࣾࢪͨ͠ࣄͱಘΒΕͨ݁Ռ Tried ࣮ࡍʹͬͯΈͨ͜ͱ ݄ؒΞΫηεฏۉ300લޙͩͬͨͷ͕ 30,000ΞΫηεʹ্ঢ ࣗࣾαΠτΛ201511݄ʹϦχϡʔΞϧ ελοϑϒϩάΛ։ઃ ʮΣϒ੍࡞ ਆށʯͰ্Ґʹ Ӧۀίετɾ࠾༻ίετ͕θϩʹ
ಉۀछͷݕࡧऀͷΞϓϩʔνͰޭͨ͠ཧ༝ Tried ࣮ࡍʹͬͯΈͨ͜ͱ ྑ࣭ͳهࣄΛॻ͘ ΞΫηε͕૿͑Δ ྑ࣭ͳαΠτͱͯ͠αΠτશମͷධՁ্͕͕Δ αΠτશମͷॱҐ্͕͕Δ જࡏސ٬ͷχʔζͱҧͬͨ༰ͷهࣄͰϢʔβʔͷ՝ΛղܾͰ͖ΕٻΊͨ݁ՌΛಘΒΕΔ
Tried ࣮ࡍʹͬͯΈͨ͜ͱ Ϧαʔν͢Δ վΊͯਂ۷Γ͢Δ ࣗͰ͏͍ͬͯΔΑ͏ͳ༰Ͱ͋ͬͯɺௐͯΈΕ ΑΓਂ͘Δ͜ͱ͕Ͱ͖Δɻ·ͨɺීஈԿؾͳ͍ͬͯ͘ ͨ͜ͱ͕୭·͍ͩͬͯͳ͔ͬͨ͜ͱ͔͠Εͳ͍ɻ ಉ͡ςʔϚͷهࣄͳ͍͔୳ͯ͠ΈΔ ॻ͜͏ͱ͍ͯ͠ΔςʔϚͱಉ͡ςʔϚͷهࣄ͕͋ͬͯɺͦ ͷهࣄʹॻ͔Ε͍ͯͳ͍͜ͱΛϓϥεΞϧϑΝͰॻ͚ͦ
ͷهࣄΑΓΞΫηεΛՔ͙͜ͱ͕Ͱ͖Δ ࠔ͍ͬͯΔਓΛ୳͢ ͦͷςʔϚͰࠔ͍ͬͯΔਓ͕͍ͳ͍͔୳ͯ͠ΈΔɻͲΜͳ͜ ͱͰࠔ͍ͬͯΔͷ͔ΛΔ͜ͱͰͦͷਓͷ՝ΛղܾͰ͖Δ هࣄΛൃ৴͢Δ͜ͱ͕Ͱ͖Δɻ τϨϯυΛΔ ࣗͷͰͲΜͳ͜ͱ͕τϨϯυʹͳ͍ͬͯΔͷ͔Λௐ ͯΈΔɻඞͣࣄʹ݁͢Δඞཁͳ͍͕Ͱ͖Δ͚ͩࣄͷ தͰࣗͷಘҙͱ͢Δ͕·͍͠ɻ
Tried ࣮ࡍʹͬͯΈͨ͜ͱ झΛڽΒ͢ λΠτϧΛ͢Δ λʔήοτΛ໌֬ʹ͠λΠτϧΛಡΜͰ۩ମతʹԿ͕ಘΒΕ Δͷ͔ΛϋοΩϦͤ͞ΔɻλΠτϧΛݟ͚ͨͩͰಡΈͨ͘ͳ ΔΑ͏ͳΛ͢Δɻ ষʹ͚Δ هࣄΛষʹ͚ͯॻ͘ɻ͞Βʹ֤ষʹදΛ͚ͭΔ͜ͱͰಡ Έ͕͙ͬ͢͞ͱ্͕Δɻষʹ͚Δ͜ͱߏ͢Δ্Ͱ
ͱͯॏཁɻ ࢥ͍ΓΛײ͡ΔهࣄΛॻ͘ ಡΜͰ͍ΔਓΛ૾͠هࣄΛ͢ΔɻಡΜͰ͍Δਓ͕ײಈ Ͱ͖ΔΑ͏ͳ͓ͯͳ͕͠Ͱ͖͍ͯΔهࣄ૬ରతʹΞΫη ε͕ߴ͍ɻ ը૾Λ͢Δ ϒϩάʹͱͬͯը૾ॏཁɻจࣈ͚ͩͷهࣄΑΓը૾Λؚ Ίͨهࣄͷ΄͏͕ಡΈ͘͢ݟָ͍͍ͯͯ͠ɻಛʹ֦ࢄͨ͠ ࡍʹαϜωΠϧͱͳΔهࣄ̍ຕͷը૾λΠτϧͱϦϯΫ ͨ͠࠷ߴͷ̍ຕΛஔ͢Δɻ
͕ࣗͨͪޭମݧͨ͜͠ͱΛΫϥΠΞϯτʹͦͷ··͑Δ͜ͱ झΛڽΒ͠ɺίπίπଓ͚Δ͜ͱ Tried ࣮ࡍʹͬͯΈͨ͜ͱ
Will Style͕ߟ͑ΔWebαΠτ੍࡞ Thought
͍͘Βू٬Λͯ͠ັྗ͋ΔαʔϏεͰͳ͍ͱ ͓͍߹Θͤʹͭͳ͕Βͳ͍ Thought Will Style͕ߟ͑ΔWebαΠτ੍࡞
Thought Will Style͕ߟ͑ΔWebαΠτ੍࡞ ίϛϡχέʔγϣϯͳͯ͘͠σβΠϯͰ͖ͳ͍ σβΠφʔଧͪ߹Θͤʹಉߦ͢Δ ΫϥΠΞϯτͷݱʹ࣮ࡍʹߦ͖ ମײͨ͜͠ͱΛͦͷ··දݱ͢Δ
Thought Will Style͕ߟ͑ΔWebαΠτ੍࡞ ΫϥΠΞϯτͷྑ͞ΛҾ͖ग़͠ɺΑΓັྗతʹදݱ͢Δ ΩʔϏδϡΞϧɾΩϟονίϐʔͰ ૌٻྗΛߴΊΔ ίϯόʔδϣϯͱಋ͘ ັྗతͳߏ
Thought Will Style͕ߟ͑ΔWebαΠτ੍࡞ ίϯςϯπΛ૿͠ଓ͚ͯΒ͏ΈΛಋೖ WordPressʢCMSʣΛಋೖ͠ ίϯςϯπΛ૿ͯ͠Β͏ هࣄΛߋ৽͘͢͠ɺ ΑΓັྗతʹͰ͖ΔΑ͏ʹΧελϚΠζ
ΫϥΠΞϯτΛΑ͘ΓɺͦͷັྗΛ͑Δ͜ͱ ΫϥΠΞϯτʹαΠτΛߋ৽͍͖ͯͨͩ͠ ΫϥΠΞϯτࣗͰWebαΠτΛҭ͍ͯͯͨͩ͘͜ͱ Thought Will Style͕ߟ͑ΔWebαΠτ੍࡞
WebαΠτʹՃՁΛ༩͑Δ Added value
͍͘Βັྗ͋ΔαΠτͰ ϢʔβϏϦςΟύϑΥʔϚϯε͕ѱ͚Ε ͯ͠͠·͏ Added value WebαΠτʹՃՁΛ༩͑Δ
Added value WebαΠτʹՃՁΛ༩͑Δ ϨεϙϯγϒΣϒσβΠϯͰ ϞόΠϧϑϨϯυϦʔʹ ϢʔβϏϦςΟΛ্ͤ͞Δࢪࡦ ཧ༝ͷ͋ΔಈઢઃܭͰ ϢʔβϏϦςΟΛ্͢Δ
Added value WebαΠτʹՃՁΛ༩͑Δ jQueryɾը૾ͷOptimize ϦιʔεPrefetch·ͨඇಉظͰऔಘ ඇಉظ௨৴ʢPJAXʣͰϖʔδભҠΛߴԽ ύϑΥʔϚϯεʹର͢Δࢪࡦ
Added value WebαΠτʹՃՁΛ༩͑Δ ϏϧυπʔϧʢWebpackʣͱ λεΫϥϯφʔ(gulp)ͷಋೖ อकੑΛߴΊΔͨΊͷࢪࡦ CSSϑϨʔϜϫʔΫʢBootstrapʣΛ࠾༻ ςϯϓϨʔτΤϯδϯʢEJS) CSSϓϦϓϩηοαʔ(SCSS) ES2015ͷτϥϯεύΠϥʔ(Babel)
ιʔεGitͰόʔδϣϯཧ ࣗಈσϓϩΠڥͷߏங
ϢʔβʔʹετϨεͳ͘Ӿཡͯ͠Β͑ΔΛࢪ͢͜ͱ ࠷৽ͷٕज़Λৗʹ͍͔͚ɺඞཁͰ͋Εಋೖ͢Δ Added value WebαΠτʹՃՁΛ༩͑Δ
͍͞͝ʹ To close
WebαΠτ࡞ͬͯऴΘΓͰͳ͘ ϢʔβʔͷಈΛΓɺ՝ղܾͰ͖Δྑ࣭ͳίϯςϯπΛൃ৴͠ଓ͚Δ͜ͱ͕ॏཁ ·ͨɺ੍࡞ऀΫϥΠΞϯτͱͷίϛϡχέʔγϣϯΛ͔ͬ͠ΓͱऔΓ ΫϥΠΞϯτΛΑ͘ΓɺϢʔβʔ͑Δ͜ͱ͕࠷ॏཁ To close ͍͞͝ʹ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Thank you for listening!