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

WordCamp Osaka 2019 h2ham (´ ºムº `)

h2ham
December 07, 2019
4.5k

WordCamp Osaka 2019 h2ham (´ ºムº `)

h2ham

December 07, 2019
Tweet

Transcript

  1. 運⽤も最⼤限考慮!
    コーポレートサイトで
    ブロックエディタフル活⽤の事例紹介
    ⻑⾕川 広武
    株式会社HAMWORKS

    View full-size slide

  2. スライドは共有するため、
    メモは不要です

    View full-size slide

  3. WordPress案件で
    ブロックエディタ利⽤での
    設計・構築 をしていますか?
    質問

    View full-size slide

  4. 2018年12⽉6⽇

    View full-size slide

  5. https://wordpress.org/news/2018/12/bebo/

    View full-size slide

  6. https://ja.wordpress.org/gutenberg/
    ブロックエディタの登場により
    WordPressの設計が変わった!

    View full-size slide

  7. 皆さんの設計・構築も
    ブロックエディタの登場により
    変わりましたか?

    View full-size slide

  8. ⾃⼰紹介

    View full-size slide

  9. ハム
     テクニカルディレクター
    フロントエンドエンジニア
    SaCSS 主催
    ⻑⾕川 広武
    は せ が わ ひろむ

    View full-size slide

  10. (´ ºムº `)

    View full-size slide

  11. https://www.meetup.com/ja-JP/topics/wordpress/jp/

    View full-size slide

  12. https://www.meetup.com/ja-JP/Sapporo-WordPress-Meetup/
    - 2ヶ⽉に1度開催のペース
    - これまで8回開催
    - 当⽇に質問を受けて進⾏する形式

    View full-size slide

  13. https://ja.wordpress.org/plugins/gutenberg/
    ほぼ毎回ブロックエディタ関連

    View full-size slide

  14. ぜひ⼀度北海道のイベントにも参加を!

    View full-size slide

  15. https://ja.wordpress.org/gutenberg/
    ブロックエディタの登場により
    WordPressの設計が変わったんです

    View full-size slide

  16. 会社の事例1つ⽬として
    初ブロックエディタ対応プロジェクト
    リリース
    2019年2⽉

    View full-size slide

  17. https://www.bacardijapan.jp/
    投稿コンテンツはすべて
    ブロックエディタ⼊⼒対応

    View full-size slide

  18. サイト構成画⾯例

    View full-size slide

  19. ブロックエディタ抜粋

    View full-size slide

  20. https://wordpress.org/plugins/advanced-posts-blocks/

    View full-size slide

  21. 再利⽤ブロック

    View full-size slide

  22. 変更頻度が⾼い再利⽤ブロックに
    専⽤のリンク

    View full-size slide

  23. 設計:おおよそ4ヶ⽉ほど
    実装:メインの開発は2ヶ⽉
       調整1ヶ⽉・⼊⼒1ヶ⽉

    View full-size slide

  24. - ワイヤー後に必要ブロック精査
    - もしくは、必要ブロック決定後に
    必要ブロックのみで構成
    ワイヤーの段階でブロックも確定

    View full-size slide

  25. 2018 年 8 ⽉時点で
    ブロックエディタ採⽤きめる

    View full-size slide

  26. https://ja.wordpress.org/gutenberg/
    - 標準になる機能⾃体を最⼤限利⽤したい
    - クライアントの利⽤しやすさ優先
    - カスタムフィールドの利⽤を避けたい
    開発段階で採⽤を決めた理由

    View full-size slide

  27. それより何よりも・・・

    View full-size slide

  28. カスタムフィールド前提の
    設計・構築を避けたい!

    View full-size slide

  29. https://2017.tokyo.wordcamp.org/session/ad-9/

    View full-size slide

  30. https://speakerdeck.com/h2ham/wordcamp-tokyo-2017-h2ham-toro-unit

    View full-size slide

  31. https://speakerdeck.com/h2ham/wordcamp-tokyo-2017-h2ham-toro-unit?slide=31
    「外観」と「コンテンツ」の分離

    View full-size slide

  32. プラグインやテーマによる豊富な拡張性
    WordPress で構築するメリット

    View full-size slide

  33. カスタムフィールドの功罪

    View full-size slide

  34. ⼊⼒の制限と明確化?
    - 決まった⼊⼒で制限をすることで
    予期せぬ使われ⽅を防ぐ?
    → 表⽰崩れ防⽌にもなる?
    - どこに何を⼊⼒するのかの明確化?

    View full-size slide

  35. 結果、制作にかかる負担増加
    - 作りきり⼤前提事案に
    - ⼊⼒内容追加があっても、対応負担増加に
    - テンプレートの複雑化・制作⼯数増に

    View full-size slide

  36. QIPUPCZ#SZBO#VSLFIUUQTXXXqJDLSDPNQIPUPTCSZBOCVSLF
    photo by Andreas Mortonus https://www.flickr.com/photos/purpleseadonkey/4775066884
    ステキなWordPressサイト

    View full-size slide

  37. https://developer.wordpress.org/themes/

    View full-size slide

  38. https://speakerdeck.com/chiilog/wordpresstemafalsezuo-rifang-2019-si-falsebesutopurakuteisu
    実案件も含めてテーマ製作者は必読!

    View full-size slide

  39. WordPress 案件って難しぃよ!

    View full-size slide

  40. 設計も制作も難易度増!
    - 運⽤も踏まえて仕様を詰める必要がある
      - 運⽤時どんな⼊⼒が必要か
      - 運⽤に合わせてどんなコンポーネントが必要か
    - ブロックエディターを理解する
      - どんなブロックがあり何ができるのか
      - そのブロックでどんなHTMLが出⼒されるか、スタイルがついているか
      - コンポーネントを意識した設計とスタイル設計
      - 場合によってカスタムブロックの作成⽅法も

    View full-size slide

  41. ブロック間の余⽩は統⼀したい
    - 次のブロックが何か?で余⽩を変えると
    制作⼯数は増えてしまう
    ここが苦⼿・・・

    View full-size slide

  42. 結局のところ

    View full-size slide

  43. 制作の何がかわったか

    View full-size slide

  44. 運⽤も考慮したブロック設計が必須に
    - ブロックだけでページが構成できるように
    - 制作ブロック数で⼯数も変わる
    - カスタムフィールドは最⼩限に
    - 利⽤するとしてもコンテンツ以外の構成などに

    View full-size slide

  45. https://wptavern.com/gutenberg-one-year-later

    View full-size slide

  46. "ブロックエディタの登場で制作が変化
    "設計重要!
    "運⽤も考慮した設計必須!
    "カスタムフィールドは基本不要

    View full-size slide

  47. 使いやすい・メンテしやすい
    WordPressサイトに!

    View full-size slide

  48. この時間は設計の話でした

    View full-size slide

  49. ご清聴ありがとうございました

    View full-size slide