WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わったのか？実装事例から見る現在のWordPressの設計と構築』

WordPressのブロックエディター登場で Webサイトの制作がどうかわったのか？ ~実装事例から⾒る現在のWordPressの設計と構築~ ⻑⾕川広武株式会社HAMWORKS

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

WordPress案件でブロックエディター及びサイトエディター利⽤での設計・構築をしていますか？質問

皆さんの設計・構築もブロックエディター及びサイトエディターの登場により変わりましたか？

https://osaka.wordcamp.org/2019/session/example-usages-of-block-editor-on-the-corporate-sites/ 2019年の WordCamp Osakaでもブロックエディターで同様の質問

2018年12⽉6⽇

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

https://ja.wordpress.org/gutenberg/ ブロックエディターの登場から５年 WordPressの制作フローは変わりましたか？

⾃⼰紹介

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

(´ ºムº `)

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

本題

https://ja.wordpress.org/gutenberg/ ブロックエディター・サイトエディターの登場により WordPressの設計が変化

今のWordPressのクライアントワークはクライアント専⽤のノーコードツールを構築すること誤解を恐れず⾔うなら

 サイト全体が管理画⾯から変更可能  コンテンツはブロックで構成  HTMLがわからない⼈でも投稿できる

そのための設計が重要

https://speakerdeck.com/torounit/2023-11-05-kansai-wordpress-meetup

https://tokyo.wordcamp.org/2016/

ᶃ 静的HTMLを先に制作 ᶄ 先に制作したHTMLをもとにテーマを作成 → ⼊⼒の多くはカスタムフィールド → 各ページの中⾝はテーマに直接 or HTMLを管理画⾯で投稿
クラシックエディター時に多くあった制作フロー

 変更・追加が管理画⾯からできない  管理画⾯と全然⾒た⽬が違う  リニューアル時も同じ構成が必要に

HTMLコーディング時 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Title</title> </head>
<body> <header> ~ </header> <div>Contents</div> <footer> ~ </footer> </body> </html>

Themeに <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php
bloginfo( 'charset' ); ?>"> <?php wp_head(); ?> </head> <body> <?php get_header(); ?> <div>Contents</div> <?php get_header(); ?> <?php wp_footer(); ?> </body> </html>

 コンテンツ部分はカスタムフィールドの場合も → ⼊⼒箇所を限定することでHTMLを先に制作しても⼿戻りを少なくできる → 各ページの中⾝はテーマに直接 or HTMLを管理画⾯で投稿

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

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

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

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

「HTML先に作ってからそれを WordPress に合わせて直していく」のは、「とりあえず素敵な服を⾃由に作ってから、それを着る⼈に合わせて直す」

現在の制作フロー

ᶃ 事前のHTMLコーディングを⾏わない ᶄ どの構成を使うかを先に検討 ᶅ 構成単位で制作 ᶆ ⼊⼒は各ページでブロックエディター構成前提

 サイト全体が管理画⾯から変更可能  全ページ・全コンテンツがブロック  HTMLがわからない⼈でも投稿できる制作達成条件

構成の分解

 ブロックスタイル  ブロックパターン  ブロック開発  プラグイン利⽤  テンプレート
構成の分解

https://satori.marketing/

構成の分解  ブロックスタイル

構成の分解  ブロックパターン

 ブロックの組み合わせで何度も利⽤  ⼊⼒フォーマットの代わりとして  複数のページで共通で利⽤・更新

https://wordpress.org/patterns/

構成の分解  ブロック開発

デザイン次第で再現可能な調整が必要

 汎⽤的なデザインが必要 →ブロックで再現できる必要がある →ブロック内の１部だけパターンが違う等は難易度⾼  カスタムHTML・CSS ならできても… →誰が更新・メンテナンスするのか？

構成の分解  プラグイン利⽤

⼀例

{ "settings": [ { "title": "αΠζ (1.2em)", "icon": "editor-textcolor", "slug":
"size-1-2", "styles": "font-size: 1.2em;" }, ~~ ུ ~~ { "title": "ϚʔΧʔ (μʔΫάϦʔϯ)", "icon": "editor-underline", "slug": "marker-darkgreen", "tag": "strong", "styles": "background: linear-gradient(transparent 50%, #50C8A7 100%);" }, ~~ ུ ~~ ] }

構成の分解  テンプレート

設計も制作も難易度増！

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

デザイン時のポイント

デザイナーも実装条件把握が必要 レスポンシブと最⼤・最⼩サイズ レスポンシブと余⽩ フォントファミリーとサイズ ブロックの配置 背景装飾のサイズや配置

デザイナーも実装条件把握が必要 レスポンシブと最⼤・最⼩サイズ レスポンシブと余⽩ フォントファミリーとサイズ ブロックの配置 背景装飾のサイズや配置⾃由なデザインだと・・・

難易度があがる例

PC⽤ SP⽤

キャプチャ差し替え予定

ブロックエディター実装で⼯数がかかること レスポンシブ周り（PCとSPの配置等） ブロックの重なり PCとSPの余⽩とフォントサイズ差 PCとSPで画像を切り替え 背景の⾃由な配置

結局のところ

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

設計時からの検討が⼤事

まとめ

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

スタイル設定やパターン活⽤を デザイナーもブロックの把握を PCとSPのサイズ差を無くす⼯夫を カスタムHTMLは最終⼿段

以上！

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

WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わ...

WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わったのか？実装事例から見る現在のWordPressの設計と構築』

More Decks by h2ham

Featured

Transcript