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
Mineo Okuda
January 10, 2020
Design
0
1.9k
Will StyleのWebサイト制作
Mineo Okuda
January 10, 2020
Tweet
Share
Other Decks in Design
See All in Design
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
Jeremy's First Day
myates3
1
130
Design Leadership in Challenging Times
morganepeng
3
300
Crafting Blog covers: AI tools vs Human Illustrators. Who is the winner?
strongeron
0
130
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
380
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
180
UX/UI改善に貢献するユーザーテストとは? 基礎知識から実施のプロセスまで解説
ncdc
0
320
Designship 2023|想いを可視化するデザインの力
weddingpark
0
240
1人歩きする営業資料作成
yutoshukuya
0
140
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
270
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
240
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
646
58k
Writing Fast Ruby
sferik
620
60k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
Facilitating Awesome Meetings
lara
41
5.6k
Web development in the modern age
philhawksworth
202
10k
Into the Great Unknown - MozCon
thekraken
10
980
GitHub's CSS Performance
jonrohan
1023
450k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
11
4.6k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
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!