Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わ...
Search
h2ham
February 24, 2024
1
640
WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わったのか?実装事例から見る現在のWordPressの設計と構築』
h2ham
February 24, 2024
Tweet
Share
More Decks by h2ham
See All by h2ham
フロントエンドカンファレンス北海道2024 『小規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜』長谷川広武(ハム)
h2ham
1
3.2k
WordPress案件を請け負う制作会社からみる Shifter の魅力
h2ham
0
1.2k
WordCamp Osaka 2019 h2ham (´ ºムº `)
h2ham
7
4.7k
WordCamp Tokyo 2017 h2ham toro_unit
h2ham
1
6.9k
デザイナーが効率よくテーマ作成を進めるには? デザインから WordPress のテーマ作成のワークフローを見直す
h2ham
2
6.4k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
530
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Building Your Own Lightsaber
phodgson
103
6.1k
A Tale of Four Properties
chriscoyier
157
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Faster Mobile Websites
deanohume
305
30k
Transcript
None
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/ ブロックエディターの登場から5年 WordPressの制作フローは 変わりましたか?
⾃⼰紹介
ハム テクニカルディレクター フロントエンドエンジニア SaCSS 主催 ⻑⾕川 広武 は せ
が わ ひろむ
(´ ºムº `)
None
None
None
None
None
ぜひ⼀度北海道のイベントにも参加を!
本題
https://ja.wordpress.org/gutenberg/ ブロックエディター・サイトエディターの登場により WordPressの設計が変化
今のWordPressのクライアントワークは クライアント専⽤のノーコードツールを 構築すること 誤解を恐れず⾔うなら
None
サイト全体が管理画⾯から変更可能 コンテンツはブロックで構成 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/
None
None
None
None
None
ブロックスタイル ブロックパターン ブロック開発 プラグイン利⽤ テンプレート
構成の分解 ブロックスタイル
None
None
None
ブロックスタイル ブロックパターン ブロック開発 プラグイン利⽤ テンプレート
構成の分解 ブロックパターン
ブロックの組み合わせで何度も利⽤ ⼊⼒フォーマットの代わりとして 複数のページで共通で利⽤・更新
None
None
None
None
https://wordpress.org/patterns/
ブロックスタイル ブロックパターン ブロック開発 プラグイン利⽤ テンプレート
構成の分解 ブロック開発
None
None
None
None
None
デザイン次第で再現可能な調整が必要
汎⽤的なデザインが必要 →ブロックで再現できる必要がある →ブロック内の1部だけパターンが違う等は難易度⾼ カスタムHTML・CSS ならできても… →誰が更新・メンテナンスするのか?
ブロックスタイル ブロックパターン ブロック開発 プラグイン利⽤ テンプレート
構成の分解 プラグイン利⽤
⼀例
None
None
None
None
None
{ "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%);" }, ~~ ུ ~~ ] }
ブロックスタイル ブロックパターン ブロック開発 プラグイン利⽤ テンプレート
構成の分解 テンプレート
None
None
None
None
None
設計も制作も難易度増!
設計も制作も難易度増!
設計も制作も難易度増! - 運⽤も踏まえて仕様を詰める必要がある - 運⽤時どんな⼊⼒が必要か - 運⽤に合わせてどんなコンポーネントが必要か -
ブロックエディターを理解する - どんなブロックがあり何ができるのか - そのブロックでどんなHTMLが出⼒されるか、スタイルがついているか - コンポーネントを意識した設計とスタイル設計 - 場合によってカスタムブロックの作成⽅法も
デザイン時のポイント
デザイナーも実装条件把握が必要 レスポンシブと最⼤・最⼩サイズ レスポンシブと余⽩ フォントファミリーとサイズ ブロックの配置 背景装飾のサイズや配置
デザイナーも実装条件把握が必要 レスポンシブと最⼤・最⼩サイズ レスポンシブと余⽩ フォントファミリーとサイズ ブロックの配置 背景装飾のサイズや配置 ⾃由なデザインだと・・・
難易度があがる例
PC⽤ SP⽤
None
None
None
None
キャプチャ差し替え予定
ブロックエディター実装で⼯数がかかること レスポンシブ周り(PCとSPの配置等) ブロックの重なり PCとSPの余⽩とフォントサイズ差 PCとSPで画像を切り替え 背景の⾃由な配置
結局のところ
運⽤も考慮したブロック設計が重要! - ブロックだけでページが構成できるように - 制作ブロック数で⼯数も変わる - カスタムフィールドは最⼩限に - 利⽤するとしてもコンテンツ以外の構成などに
設計時からの検討が⼤事
まとめ
ブロックエディタの登場で制作が変化 設計重要! 運⽤も考慮した設計必須! カスタムフィールドは基本不要
スタイル設定やパターン活⽤を デザイナーもブロックの把握を PCとSPのサイズ差を無くす⼯夫を カスタムHTMLは最終⼿段
以上!
ご清聴ありがとうございました