Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わ...
Search
h2ham
February 24, 2024
1
630
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.1k
WordPress案件を請け負う制作会社からみる Shifter の魅力
h2ham
0
1.2k
WordCamp Osaka 2019 h2ham (´ ºムº `)
h2ham
7
4.7k
WordCamp Tokyo 2017 h2ham toro_unit
h2ham
1
6.8k
デザイナーが効率よくテーマ作成を進めるには? デザインから WordPress のテーマ作成のワークフローを見直す
h2ham
2
6.4k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
334
57k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Fireside Chat
paigeccino
34
3.1k
A Philosophy of Restraint
colly
203
16k
Visualization
eitanlees
145
15k
Statistics for Hackers
jakevdp
796
220k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Optimizing for Happiness
mojombo
376
70k
Faster Mobile Websites
deanohume
305
30k
How to Think Like a Performance Engineer
csswizardry
21
1.2k
Building Adaptive Systems
keathley
38
2.3k
BBQ
matthewcrist
85
9.3k
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は最終⼿段
以上!
ご清聴ありがとうございました