Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ページコンテンツを作る際に気をつけること

Koji Kuno
March 09, 2019
0
230

 ページコンテンツを作る際に気をつけること

Gifu WordPress Meetup #9で登壇した際の資料

Koji Kuno

March 09, 2019
Tweet

More Decks by Koji Kuno

See All by Koji Kuno
WordPress（再）入門 - テーマ・プラグイン編 / introduction-to-wordpress-again-theme-plugin
oleindesign
0
34
WordPress（再）入門 - 基本設定編 / introduction-to-wordpress-again-basic-settings
oleindesign
0
100
WordPress（再）入門 - 基礎知識・環境編
oleindesign
1
250
超入門サイトエディター / Easiest-introduction-of-Site-Editor
oleindesign
0
130
Walk-Through WordPress 6.1
oleindesign
0
62
超入門フルサイト編集/easiest introduction of full site editing
oleindesign
0
190
僕が便利だと感じる Snow Monkey の特徴/20220723_Gifu_WordPress_Meetup
oleindesign
0
180
WordPress 5.9 について
oleindesign
0
99
Gifu WordPress Meetup #40 での登壇資料 / gifuwpmeetup40
oleindesign
0
120

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
3.7k
A designer walks into a library…
pauljervisheath
199
17k
GraphQLとの向き合い方2022年版
quramy
23
11k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
16
5.8k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
9
5.3k
The Brand Is Dead. Long Live the Brand.
mthomps
48
3.9k
Thoughts on Productivity
jonyablonski
52
2.9k
Facilitating Awesome Meetings
lara
35
4.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Music & Morning Musume
bryan
37
4.8k
Why Our Code Smells
bkeepers
PRO
327
55k

Transcript

  1. PMFJOEFTJHODPN [email protected]
    ϖʔδίϯςϯπΛ࡞Δࡍʹ
    ؾΛ͚ͭΔ͜ͱ
    ೥݄೔ʢ౔ʣ
    (JGV8PSE1SFTT.FFUVQ
    !ΈΜͳͷ৿͗;ϝσΟΞίεϞε͓ͲΔελδΦ

    View Slide

  2. PMFJOEFTJHODPN [email protected]
    ࣗݾ঺հ

    View Slide

  3. PMFJOEFTJHODPN [email protected]
    ٱ໺ߊ࢘ʢ͘ͷ͜͏͡ʣ
    w ϑϦʔϥϯε8FC੍࡞ऀ!ذෞࢢ
    w (JGV8PSE1SFTT.FFUVQڞಉΦʔΨφΠβʔ
    w $PEFS%PKPذෞνϟϯϐΦϯɺ8FCDSFBUPSTذෞӡӦऀ
    w ݩάϥϑΟοΫσβΠφʔʢࡶࢽ޿ࠂެڞϙελʔͳͲ
    w 8FC͸ಠֶɹ8PSE1SFTTྺ͸೥Ҏ্
    w 0MFJO1SFTTγϦʔζͰ8PSE1SFTTςʔϚͷൢച४උத

    View Slide

  4. PMFJOEFTJHODPN [email protected]
    w .FFUVQ0SHBOJ[FSʢ(JGV8PSE1SFTT.FFUVQӡӦʣ
    w 5SBOTMBUJPO$POUSJCVUPSʢ81೔ຊޠ຋༁౳ʹڠྗʣ
    w 5IFNF%FWFMPQFSʢެࣜσΟϨΫτϦʹςʔϚܝࡌʣ
    https://profiles.wordpress.org/olein

    View Slide

  5. PMFJOEFTJHODPN [email protected]
    (1-༗ྉ8PSE1SFTTςʔϚ

    View Slide

  6. PMFJOEFTJHODPN [email protected]
    ΞδΣϯμ
    w ϖʔδίϯςϯπͱ͸
    w ίϯςϯπϚʔέςΟϯάͱ͸
    w ίϯςϯπͷ࡞Γํ
    w ϥΠςΟϯάํ๏

    View Slide

  7. PMFJOEFTJHODPN [email protected]
    ϖʔδίϯςϯπͱ͸

    View Slide

  8. PMFJOEFTJHODPN [email protected]
    ϖʔδίϯςϯπͱ͸
    w ΢ΣϒαΠτ্ʹܝࡌ͞ΕΔϖʔδͷத਎
    w ӡӦऀ͕ʮ఻͍͑ͨ͜ͱʯΛܝࡌͨ͠΋ͷͰ͸ͳ͍
    w ๚໰ऀʹʮಡΜͰ΄͍͠΋ͷʯΛܝࡌͨ͠΋ͷͰ͸ͳ͍
    w ๚໰ऀ͕ʮಡΈ͍ͨʢ୳͍ͯͨ͠ʣ৘ใʯͰ͋Δ΂͖

    View Slide

  9. PMFJOEFTJHODPN [email protected]
    ಡΈ͍ͨʢ୳͍ͯͨ͠ʣ৘ใ

    View Slide

  10. PMFJOEFTJHODPN [email protected]
    ๚໰ऀ໨ઢͰߟ͑Δ

    View Slide

  11. PMFJOEFTJHODPN [email protected]
    ίϯςϯπϚʔέςΟϯάͱ͸

    View Slide

  12. PMFJOEFTJHODPN [email protected]
    ίϯςϯπϚʔέςΟϯάͱ͸
    ༗༻ɾ༗ӹͳίϯςϯπΛ੍࡞͢Δ
    ެ։ɾ഑৴͢Δ
    ʢજࡏతʹ΋ʣඞཁͱ͍ͯ͠ΔϢʔβʔΛݺͼࠐΈ
    ϑΝϯʹͳΔΑ͏ͭͳ͍͛ͯ͘

    View Slide

  13. PMFJOEFTJHODPN [email protected]
    ओͳྲྀೖݩ
    w ݕࡧΤϯδϯ
    w ֤ιʔγϟϧɾωοτϫʔΩϯάɾαʔϏε

    ˠઓུతར༻͕ඞཁ

    View Slide

  14. PMFJOEFTJHODPN [email protected]
    ඞͣ΍Ζ͏ɺޮՌଌఆͱ1%$"
    w ୤ɾ,,%ʢצɾܦݧɾ౓ڳʣ
    w (PPHMF"OBMZUJDTͱ(PPHMF4FBSDI$POTPMFಋೖ͸ఆ൪
    w 1%$"ʢ1MBOˠ%Pˠ$IFDLˠ"DUʣ

    ˠఆྔతଌఆɾఆظతҙݟަ׵͕ඞཁ
    w ໨ඪઃఆΛ๨Εͣʹ

    ˠΰʔϧ͕ͳ͍ͱ૸Δํ޲͕Θ͔Βͳ͍ʂ

    View Slide

  15. PMFJOEFTJHODPN [email protected]
    Α͋͘Δ,1*ઃఆྫ
    ߪೖ਺
    ࢿྉ੥ٻ਺
    ϝϧϚΨձһొ࿥਺
    ໰͍߹Θͤ਺
    ձһొ࿥਺
    17ɺηογϣϯ਺ɺϢʔβʔ਺ɺ$73

    $73ʹίϯόʔδϣϯϨʔτʹʢ໨ඪ਺๚໰ऀ਺ʣ
    17
    ηογϣϯ
    ֤ܦ࿏͔Βͷྲྀೖ਺ɺݕࡧॱҐ
    λʔήοτΩʔϫʔυͷݕࡧॱҐ ؔ࿈ΩʔϫʔυͷݕࡧॱҐɺݕࡧྲྀೖ਺
    ݕࡧྲྀೖ਺ λʔήοτΩʔϫʔυͷݕࡧॱҐɺؔ࿈ΩʔϫʔυͷݕࡧॱҐ

    View Slide

  16. PMFJOEFTJHODPN [email protected]
    Φ΢ϯυϝσΟΞͱ͸

    View Slide

  17. PMFJOEFTJHODPN [email protected]
    Φ΢ϯυϝσΟΞͱ͸
    w ίϯςϯπϚʔέςΟϯάΛ͔ͳ͑ΔϝσΟΞ
    w اۀ΍ஂମ͕ӡӦɾ؅ཧ͢Δ΢ΣϒαΠτ
    w ੵۃతʹࣗࣾ੡඼΍αʔϏεͳͲ৘ใൃ৴͢ΔϝσΟΞ

    View Slide

  18. PMFJOEFTJHODPN [email protected]
    Φ΢ϯυϝσΟΞͷ໨త
    w ചΓ্͛΍ۀ੷ͷ޲্
    w ৽نސ٬ͷ֫ಘ΍طଘސ٬ͱͷؔ܎ߏங
    w ஌໊౓ͷ޲্ʢϒϥϯσΟϯάʣ
    ໨త͕ͨ͘͞Μ͋ͬͯ΋͔ͳ͑Δ͜ͱ͸೉͍͠
    ॏཁͳ໨తʹߜΔ͜ͱ͕؊ཁ

    View Slide

  19. PMFJOEFTJHODPN [email protected]
    ֤ϝσΟΞͷ໾ׂ
    &BSOFE
    ಘΔɾ֫ಘ͢Δ
    1BZFE
    ࢧ෷͏
    0XOFE
    อ࣋͢Δ
    ɾಠࣗαΠτ
    ɾݟࠐΈ٬ͷ֫ಘ
    ɾ57ϥδΦͳͲैདྷܕϝσΟΞ
    ɾ޿ࠂඅΛࢧ෷͍৘ใΛల։
    ɾޱίϛαΠτɾ4/4ͳͲ
    ɾ৴༻ɾ৴པΛ֫ಘ

    View Slide

  20. PMFJOEFTJHODPN [email protected]
    ϝϦοτɾσϝϦοτ
    ϝϦοτ
    w ࣗࣾͰൃ৴಺༰΍ස౓ΛίϯτϩʔϧͰ͖Δ͜ͱ

    σϝϦοτ
    w ॳظͷ৘ใ֦ࢄͷଈޮੑظ଴Ͱ͖ͳ͍
    w هࣄ࡞੒ʹίετ͕͔͔Δʢਓɾ࣌ؒɾ֎஫ʣ

    View Slide

  21. PMFJOEFTJHODPN [email protected]
    ϚʔέςΟϯάΛՄࢹԽ͢Δ

    View Slide

  22. PMFJOEFTJHODPN [email protected]
    ̏ͭͷϓϩηε
    ֎෦ྲྀೖͷ֫ಘ ໰߹ͤ཰ͷ޲্ ੒໿཰ͷ޲্
    4&0΍ϦεςΟϯά޿ࠂ
    ͳͲͷݕࡧྲྀೖ΍ɺ4/4
    ΍֎෦ϦϯΫʹΑΔྲྀೖɻ
    ॻ੶΍ϝσΟΞܝࡌͳͲ
    ͷ൓ڹʹΑΔྲྀೖͳͲ͕
    ؚ·ΕΔɻ
    ίϯςϯπΛى఺ͱͨ͠
    αΠτճ༡΍ɺࢿྉμ΢
    ϯϩʔυͳͲͷ໰߹ͤ΁
    ͷϋʔυϧΛԼ͛Δ৘ใ
    ఏڙɺ-1΍໰߹ͤϑΥʔ
    ϜͳͲͷվળͳͲؚ͕·
    ΕΔɻ
    εςοϓϝʔϧ΍ి࿩ର
    ԠͳͲͷΠϯαΠυηʔ
    ϧε΍ɺηϛφʔ΍లࣔ
    ձͰͷ։࠵ରԠɻӦۀ෦
    ໳ʹΑΔΞϓϩʔνͳͲ
    ؚ͕·ΕΔɻ

    View Slide

  23. PMFJOEFTJHODPN [email protected]
    ϚʔέςΟϯάϚοϓ

    View Slide

  24. PMFJOEFTJHODPN [email protected]
    ίϯςϯπͷ࡞Γํ

    View Slide

  25. PMFJOEFTJHODPN [email protected]
    ͳͥ୭΋ಡ·ͳ͍΋ͷ͕ੜ·ΕΔʁ
    w ฏۉ఺ͳίϯςϯπʹͳ͍ͬͯΔ

    ˠλʔήοτ͕ఆ·͍ͬͯͳ͍ͨΊɺສਓʹड͚ೖΕΒ
    ΕΑ͏ͱ͢Δίϯςϯπʹͳ͍ͬͯΔ
    w ूΊ͍ͨϢʔβʔ͕Ͳͷ͘Β͍ͷ஌ࣝϨϕϧͳͷ͔ɺͲ
    Μͳ৘ใΛಘ͍ͨͱ͍ͯ͠Δͷ͔Λߟ͑Δ

    View Slide

  26. PMFJOEFTJHODPN [email protected]
    ίϯςϯπߏ੒
    w ʮىঝస݁ʯ͕ઈରͰ͸ͳ͍

    ˠʮىʯʜ͢Ͱʹ஌͍ͬͯΔ಺༰ʹͳΓ͕ͪ

    ˠʮసʯʜల։͕มΘΔͱϢʔβʔ͕ࠞཚ͢Δ
    w ݁࿦ϑΝʔετ

    ˠϢʔβʔ͸౴͑Λ୳ͨ͢Ίʹݕࡧ͍ͯ͠Δ
    w Ϣʔβʔ͸ࠜڌ΋ٻΊ͍ͯΔ

    ˠ݁࿦͚ͩͰ͸ͳ͘ɺͳͥͦ͏ͳΔͷ͔ͱ͍͏࠷௿ݶͷࠜڌ
    ΋ඞཁ
    w ؔ࿈ϖʔδ΋঺հͯ͠ຬ଍౓ΛߴΊΔ

    View Slide

  27. PMFJOEFTJHODPN [email protected]
    ඞཁͳίϯςϯπ͸Կ͔
    w ίϯόʔδϣϯ͕໨తͳΒʜ

    ɾਃ͠ࠐΈ૭ޱʢϝʔϧϑΥʔϜʣ

    ɾి࿩ͰͷґཔͳΒి࿩൪߸

    ɾ༣ศͰͷड෇ͳΒॅॴ
    w Ϣʔβʔ͸Կ͕஌Γ͍ͨͷ͔

    ɾϢʔβʔ͸ൺֱɾݕ౼Λ͢Δʢ#UP##UP$ಉ͡ʣ

    ɾͦͷͨΊͷ৘ใΛ͔ͬ͠Γͱ༻ҙ͢Δ

    ɾࣗࣾʢࣗ෼ʣ͕࠾༻͞ΕͨࡍͷϝϦοτΛ໌֬ʹఏࣔ

    View Slide

  28. PMFJOEFTJHODPN [email protected]
    ৘ใ͸ඞཁ࠷খݶʹ
    w ৘ใ͕ଟ͗ͯ͢΋Ϣʔβʔ͸ࠞཚ͢Δ

    ˠʮఏڙ͍ͨ͠৘ใʯͱʮඞཁͱ͞ΕΔ৘ใʯͷҧ͍
    w 4&0ͷӨڹ͹͔Γؾʹͨ͠௕จίϯςϯπ͸ʮৄ͍͠จ
    ষʯͱ͸ݴ͑ͳ͍
    w ൺֱɾݕ౼͕ߦ͑Δ৘ใʹߜͬͨίϯςϯπ
    w ࣗͣͱγϯϓϧʹͳΔ͸ͣ

    View Slide

  29. PMFJOEFTJHODPN [email protected]
    ϝσΟΞͷ4&0ϙΠϯτ
    w ݕࡧҙਤΛద͑ΔίϯςϯπΛ࡞Δ
    w ໰୊ղܾܕ

    ˠϢʔβʔͷ๊͍͑ͯΔ໰୊Λղܾ͢Δίϯςϯπ
    w λΠτϧͱݟग़͠Ͱ಺༰͕೺ѲͰ͖ΔΑ͏ʹ

    ˠίϯςϯπͷ۱͔Β۱·ͰಡΜͰ͘ΕΔϢʔβʔ͸গ
    ͳ͍ɻύοͱݟͯ಺༰ΛཧղͰ͖ΔΑ͏ʹɻ
    w ద౓ͳ৘ใఏڙ

    ˠৄ͘͠આ໌͠Α͏ͱ͠ա͗ͯ௕จʹͳΒͳ͍Α͏ʹ

    ˠ୯هࣄͰ͸ͳ͘αΠτશମͰධՁΛ্͛Δҙࣝ

    View Slide

  30. PMFJOEFTJHODPN [email protected]
    w ෳ਺ͷϖʔδͰϢʔβʔͷҙਤΛຬͨ͢
    w 4&0Λҙࣝ͗͢͠Δͱϖʔδ୯ମͷݕࡧॱҐΛ্͛Δ
    ͜ͱ͹͔Γߟ͕͑ͪ
    w ෳ਺ͷϖʔδͱ಺෦ϦϯΫΛ࢖ͬͯ৘ใΛ੔ཧ
    w αΠτ಺Λ८ճ͠΍͘͢͢Δ

    View Slide

  31. PMFJOEFTJHODPN [email protected]
    ಡΈ΍͍͢σβΠϯ
    w σβΠϯ͕ѱ͍ͱಡ·Εͳ͍
    w ϑΥϯταΠζͱߦؒ

    ɾϑΥϯταΠζˠQYʙQY

    ɾߦؒͷײ֮ˠʙ

    ɾ̍ߦͷจࣈ਺ˠશ֯ʙจࣈ
    w ۭനεϖʔε΍ը૾ͳͲͰςΩετີ౓ΛԼ͛Δ

    ɾஈམ͝ͱʹۭനεϖʔε

    ɾ̍ʙ̎εΫϩʔϧ͝ͱʹը૾΍ਤදΛೖΕΔ

    ɾ࿩୊͝ͱʹখݟग़͠ΛೖΕΔ

    View Slide

  32. PMFJOEFTJHODPN [email protected]
    γΣΞ͢ΔϢʔβʔͷಈػ
    w ϒοΫϚʔΫ୅ΘΓ
    w ਓʹΑ͘ࢥΘΕ͍ͨ

    ˠγΣΞ͢Δਓࣗ਎ͷϒϥϯσΟϯάͷͨΊ
    w ࣗݾදݱΛ͍ͨ͠

    ˠγΣΞ͢Δίϯςϯπ΁ͷίϝϯτΛ௨ͯࣗ͡ݾදݱ

    View Slide

  33. PMFJOEFTJHODPN [email protected]
    γΣΞ͞Ε΍͍͢λΠτϧ
    w લ൒Ͱ஫ҙΛҾ͖͚ͭɺޙ൒Ͱ಺༰Λิ଍͢Δ
    w Ҿ͖ͷڧ͍ཁૉ͸ͳΔ΂͘લͷํ΁ೖΕΔ
    w ਺ࣈΛೖΕΔ

    View Slide

  34. PMFJOEFTJHODPN [email protected]
    ྫ
    ʢѱ͍ྫʣ
    ɹΠϯςϦΞίʔσΟωΠτͷࢀߟαΠτ·ͱΊ
    ʢྑ͍ྫʣ
    ɹࠗ׆ྗ͕޲্͢ΔʂΠϯςϦΞίʔσΟωΠτͷࢀ
    ߟαΠτબ

    View Slide

  35. PMFJOEFTJHODPN [email protected]
    ϥΠςΟϯάํ๏

    View Slide

  36. PMFJOEFTJHODPN [email protected]
    ̎ͭͷϥΠςΟϯάํ๏
    ֎஫ͯ͠ॻ͍ͯ΋Β͏
    ࣗ෼Ͱॻ͘

    View Slide

  37. PMFJOEFTJHODPN [email protected]
    ֎஫ͯ͠ॻ͍ͯ΋Β͏ϙΠϯτ
    w ϥϯαʔζ΍Ϋϥ΢υϫʔΫεͳͲͰϥΠλʔΛ୳͢͜
    ͱ΋Մೳͳ࣌୅ʢྑ͠ѱ͠൑அ͕೉͍͠ʣ
    w ߏ੒Ҋ΍ࢀߟ63-Λඞͣ఻͑Δ

    ˠݕࡧΩʔϫʔυ͚ͩΛ఻͑Δ͚ͩͰ͸μϝ

    ˠهࣄͷλΠτϧɾߏ੒ԾҊɾࢀߟ63-ͳͲࢿྉΛڞ༗
    w ϑΟʔυόοΫ͸໌֬ɾత֬ʹ

    ˠ۩ମతͳࢦࣔΛग़ͯ͠मਖ਼ͯ͠΋Β͏

    ˠมߋཤྺ͕࢒ΔܗͰ΍ΓऔΓΛ͢Δ

    View Slide

  38. PMFJOEFTJHODPN [email protected]
    ࣗ෼Ͱॻ͘ࡍͷྲྀΕ
    ࣥචલͷ΍Δ͜ͱ
    w จষͷ໨తɾλʔήοτɾϨΪϡϨʔγϣϯΛܾΊΔ
    ࣥචதʹ΍Δ͜ͱ
    w ࠷ޙ·ͰಡΜͰ΋Β͏ͨΊͷߏ੒
    w 4&0ʹڧ͍λΠτϧ
    w ద੾ͳ෦෼Ͱݟग़͠ͳͲΛ͚ͭΔ

    View Slide

  39. PMFJOEFTJHODPN [email protected]
    ࣗ෼Ͱॻ͘ࡍͷྲྀΕ
    ࣥචޙʹ΍Δ͜ͱ
    w ࣄ࣮ޡೝ΍೔ຊޠͷؒҧ͍ɺෆշͱ൑அ͞ΕΔݴ༿͕
    ͳ͍͔֬ೝ
    w શମ΍෦෼ΛϒϥογϡΞοϓͯ͠ಡΈ΍͘͢͢Δ

    View Slide

  40. PMFJOEFTJHODPN [email protected]
    ҙࣝ͢ΔϙΠϯτ
    w จষͷ໨తΛ໌֬ʹ͢Δ
    w λʔήϯοτΛܾΊͯత֬ʹ৘ใΛಧ͚Δ

    ˠ΢ΣϒαΠτͷϖϧιφઃఆ΋ࢀߟʹ
    w ϨΪϡϨʔγϣϯΛܾΊΑ͏

    ˠจମɾݴ༿ɾදهͳͲͷܾ·Γ͝ͱ

    View Slide

  41. PMFJOEFTJHODPN [email protected]
    هࣄωλͷ୳͠ํ
    w :BIPP஌ܙା
    w ڭ͑ͯHPP
    w 0,8"7&

    View Slide

  42. PMFJOEFTJHODPN [email protected]
    ࢀߟਤॻ

    View Slide

  43. PMFJOEFTJHODPN [email protected]
    ·ͱΊ
    w ʮ4&0ʯΛҙࣝ͢ΔલʹʮϢʔβʔʯΛҙࣝ͠Α͏
    w ʮ໨తʯͱʮϢʔβʔʯΛҙࣝͯ͠޲͔͏ํ޲Λߟ͑Δ
    w ֎஫ϥΠλʔΛ࢖͏৔߹͸͔ͬ͠ΓϚωʔδϝϯτ
    w ·ͣ͸ग़དྷΔ͜ͱ͔Βࢼͯ͠ΈΑ͏ʂ

    View Slide

  44. PMFJOEFTJHODPN [email protected]
    ͓ΘΓ

    View Slide