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

WordCamp Osaka 2019 h2ham (´ ºムº `)

h2ham
December 07, 2019
4.3k

WordCamp Osaka 2019 h2ham (´ ºムº `)

h2ham

December 07, 2019
Tweet

Transcript

  1. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. 2018年12⽉6⽇

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. ⾃⼰紹介

    View Slide

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

    View Slide

  11. (´ ºムº `)

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

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

    View Slide

  22. 本題

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. サイト構成画⾯例

    View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

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

    View Slide

  34. View Slide

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

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. 再利⽤ブロック

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  69. 結局のところ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  73. まとめ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide