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

デザイン事例で見る WordPressのカスタマイズと ブロックエディター(Gutenberg)で変わる未来

Bd9ce3d7c382595e917baaf749ee7b72?s=47 Tiki Ishizuka
November 02, 2019

デザイン事例で見る WordPressのカスタマイズと ブロックエディター(Gutenberg)で変わる未来

WordPressをニュース更新やブログとして使うのではなく、会社概要、お客様の声、セミナー情報、求人サイトなど、ある程度決まったフォーマットで内容を増やしていきたい、更新したい。そのためにどのようなデザインでカスタマイズをしているのか、実例を見ながらお話します。旧エディターでは更新者のスキルによって裏の作りを変えることもありました。旧エディターでは難しかったこと、新エディターであるブロックエディターの登場で、どう変わったのか、何がラクになっていくのかを説明します。

Bd9ce3d7c382595e917baaf749ee7b72?s=128

Tiki Ishizuka

November 02, 2019
Tweet

Other Decks in Design

Transcript

  1. 1

  2. ࣗݾ঺հ ੴ௩ઍتʢ͍͔͖ͮͪ͠ʣ גࣜձࣾ͘ͷ͍ͪσβΠϯ ୅දऔక໾ ౦ژ౎ࡏॅ ࣇͷ฼ σβΠφʔྺ໿೥ɺ8PSE1SFTTྺ໿೥ɻ ݩάϥϑΟοΫσβΠφʔ͕ɺҩӃ΍ϥΠλʔʹґཔ͞Εɺ 8PSE1SFTTͷΧελϚΠζΛ࢝ΊΔɻݱࡏ͸͓٬༷͕ ߋ৽͠΍͍͢8&#αΠτ࡞ΓͱΧελϚΠζΛ໨ࢦ͍ͯ͠Δɻ

    2
  3. 8PSE1SFTTͰԿΛߋ৽͍ͯ͠·͔͢ʁ Φ΢ϯυϝσΟΞ΍ɺχϡʔεҰཡɻ ΋ͪΖΜɺԦಓͳ࢖͍ํ͸͋Γ·͕͢ɺ $.4ͳΒͰ͸ͷػೳΛ࢖͍ɺߋ৽͠·ͤΜ͔ʁ 3

  4. Ͳ͜Λߋ৽͍ͨ͠Ͱ͔͢ʁ ͬͦ͘͞ɺݟͯΈΑ͏ʂ 4

  5. ձࣾ֓ཁΛࣗ෼ୡͰߋ৽͍ͨ͠ • ച্ߴ΍ԊֵͳͲΛ ࣗ෼ୡͰߋ৽͍ͨ͠ • ৄ͘͠ࡌͤͨ1%'Λ ຖ೥ࠩ͠ସ͍͑ͨ 5

  6. ͓٬༷ͷ੠Λɺ501ͱҰཡϖʔδʹද͍ࣔͨ͠ 501ϖʔδ Ұཡϖʔδ • ߋ৽Ͱ501දࣔΛ ೖΕସΘΒ͍ͤͨɻ • Ұཡϖʔδ͸ɺͲΜ ͲΜ૿΍͍ͨ͠ɻ 6

  7. සൟʹߦ͏ηϛφʔΛɺࣗ෼ୡͰߋ৽͍ͨ͠ • ߲໨͝ͱʹೖྗɻ • ࣸਅ΍஍ਤ΋ೖΕ͍ͨɻ 7

  8. ۀ຿ϑϩʔʹ߹Θͤɺ಺༰Λද͍ࣔͨ͠ • ϨΠΞ΢τϑΥʔϚοτ Λ͋ΘͤɺͦΕͧΕͷΧ ςΰϦʔʹ಺༰Λࡌͤɺ ࣄྫΛ૿΍͍ͨ͠ɻ 8

  9. ٻਓαΠτͷࣾһมߋΛࣗࣾͰ΍Γ͍ͨ • ࣾһͷೖΕସ͑Λࣗ෼ୡ Ͱࠩ͠ସ͍͑ͨ • ࣸਅ΍จࣈΛม͍͑ͨɻ 9

  10. ٻਓαΠτͷৄࡉ΍ɺ೔ͷྲྀΕ΋ม͍͑ͨ 10

  11. ืू෺݅Λɺ501ͱҰཡͰಈతʹද͍ࣔͨ͠ 501ϖʔδ Ұཡϖʔδ • ߋ৽Ͱ501Λࣗಈత ʹೖΕସ͍͑ͨ͠ɻ • Ұཡϖʔδ͸ɺͲΜ ͲΜ૿΍͍ͨ͠ɻ 11

  12. ཪͷ࡞ΓΛݟͯΈΑ͏ʂ چΤσΟλʔͱ৽ΤσΟλʔͷҧ͍͸ʁ ϒϩοΫΤσΟλʔͬͯԿʁ 12

  13. ߋ৽ऀͷεΩϧ΍ΤσΟλʔͷҧ͍Ͱཪͷ࡞Γ͕ҧ͏ɻ ৽෣͞Μ ɾλάଧ͕ͪΘ͔Δ ɾαΠτશͯ࡞Δͷ͸೉͍͠ ాޱ͞Μ ɾϒϩά 4/4ߋ৽ ɾϩάΠϯೖྗ मਖ਼ 13

  14. ϒϩοΫ͞Μ ɾ௚ײతʹೖྗͰ͖Δ ɾ৽࢝͘͠ΊΔਓʹΦεεϝ ϒϩοΫΤσΟλʔͰ͸ɺ͞Βʹཪͷ࡞Γ͕ҧ͏ 14

  15. ձࣾ֓ཁΛࣗ෼ୡͰߋ৽͍ͨ͠ 15

  16. ৽෣͞Μ༻ʹΧελϚΠζ "ࠨ͕ݻఆɺӈͷΈߋ৽ #ྻͷೖΕସ͑Մೳ ࠨ ӈ ࠨ ӈ ࠨ ӈ 16

  17. ాޱ͞Μ༻ʹΧελϚΠζ ࠨ ӈ ࠨ ӈ 17

  18. ϒϩοΫ͞Μ͸ɺςʔϒϧʹೖྗ͚ͩ ಺༰ʹΑͬͯ εΩϧ΋ؔ܎ͳ͘ ؆୯ʹͰ͖Δʂʁ 18

  19. ࣸਅจࣈͷೖྗ ೖྗϖʔδ࡞੒ ϓϩάϥϜ࡞੒ $44Ͱઃఆ ද ࣔ Ͱ͖Δ෺͸ ࣮͸ಉ͡ ੍࡞ ੍࡞

    ͳ ͠ ੍࡞ ੍࡞ ͳ ͠ ྫ͑͹ɺද૊Έͷ৔߹ ιʔεͷ࡞੒ ϖʔδͷ࡞੒ ςʔϒϧΛબͿ͚ͩ ཪͷ࡞Γํ͕ҧ͏ࣄͰɺ੍࡞εΩϧ΍ֹۚ΋มΘΓ·͢ɻ 19
  20. ืू෺݅Λɺ501ͱҰཡͰಈతʹද͍ࣔͨ͠ 501ϖʔδ Ұཡϖʔδ 20

  21. Ͳ͜Λಈతʹ͍͔ͨ͠ɺ ग़ྗΛෳ਺ͷ৔ॴʹ͍ͨ͠ɺͳͲΑΓ ϒϩοΫΤσΟλʔͰ΋ɺ ϓϩάϥϜ౳ͷΧελϚΠζ͕ ඞཁʹͳΔ͔΋͠Ε·ͤΜɻ 21

  22. ͦͷଞʹ΋ɺ ϒϩοΫΤσΟλʔ͸Կ͕Ͱ͖Δʁ 22

  23. ɾ௚ײతʹߋ৽Ͱ͖Δ ɾ8&#αΠτશͯΛ࡞੒ ɾ4/4ͷຒΊࠐΈ͕Ͱ͖Δ ɾྻ෼͚ʢΧϥϜʣ͕Ͱ͖Δ ɾද૊ʢςʔϒϧʣ͕Ͱ͖Δ ɾΪϟϥϦʔ͕Ͱ͖Δ ϒϩοΫΤσΟλʔͷ ྑ͍఺͸ʁ ͳͲɺ৭ʑʜ 23

  24. ࣮ࡍʹϒϩοΫΤσΟλʔͰ࡞ͬͯΈΑ͏ʂ 24

  25. ·ͣ͸ࣗ෼Ͱࡌ͍ͤͨํʹ͸Φεεϝʂ ࡉ͔͘ௐ੔͍ͨ͠৔߹͸ɺ ΋͏গ͠ະདྷ͔ɺ$44౳ͷ஌͕ࣝ ඞཁ͔΋͠Ε·ͤΜɻ 25

  26. ΍͸Γɺ࢓༷ɾઃܭ͕େࣄͰ͢ɻ ΍Γ͍ͨ͜ͱɺͰ͖Δ͜ͱɺ༧ࢉͷόϥϯεͰ ࢖͍΍͍͢αΠτ࡞ΓΛɻ ˎΧελϚΠζΛ͢ͰʹچΤσΟλʔͰ࡞͍ͬͯΔ৔߹ͷɺ όʔδϣϯΞοϓʹ͸஫ҙ͠·͠ΐ͏ɻ ·ͱΊ 26

  27. ૉఢͳ8PSE1SFTTϥΠϑΛ̇ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ ͘ͷ͍ͪσβΠϯ ੴ௩ઍت 27