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

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

Tiki Ishizuka
November 02, 2019

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

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

Tiki Ishizuka

November 02, 2019
Tweet

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ӈ ࠨ
    ӈ
    16

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. ࣸਅจࣈͷೖྗ ೖྗϖʔδ࡞੒ ϓϩάϥϜ࡞੒ $44Ͱઃఆ ද ࣔ
    Ͱ͖Δ෺͸
    ࣮͸ಉ͡
    ੍࡞ ੍࡞
    ͳ ͠ ੍࡞
    ੍࡞
    ͳ ͠
    ྫ͑͹ɺද૊Έͷ৔߹
    ιʔεͷ࡞੒
    ϖʔδͷ࡞੒
    ςʔϒϧΛબͿ͚ͩ
    ཪͷ࡞Γํ͕ҧ͏ࣄͰɺ੍࡞εΩϧ΍ֹۚ΋มΘΓ·͢ɻ
    19

    View full-size slide

  19. ืू෺݅Λɺ501ͱҰཡͰಈతʹද͍ࣔͨ͠
    501ϖʔδ
    Ұཡϖʔδ
    20

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide