Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

2018年12⽉6⽇

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

⾃⼰紹介

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

(´ ºムº `)

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

本題

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

そのための設計が重要

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

HTMLコーディング時 Title ~
Contents
~

Slide 30

Slide 30 text

Themeに >
Contents

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

現在の制作フロー

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

構成の分解

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

https://satori.marketing/

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

https://wordpress.org/patterns/

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

⼀例

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

{ "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%);" }, ~~ ུ ~~ ] }

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

設計も制作も難易度増！

Slide 82

Slide 82 text

設計も制作も難易度増！

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

デザイン時のポイント

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

難易度があがる例

Slide 88

Slide 88 text

PC⽤ SP⽤

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

キャプチャ差し替え予定

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

結局のところ

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

設計時からの検討が⼤事

Slide 98

Slide 98 text

まとめ

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

以上！

Slide 102

Slide 102 text

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