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 Osaka 2019 h2ham (´ ºムº `)
Search
h2ham
December 07, 2019
7
4.7k
WordCamp Osaka 2019 h2ham (´ ºムº `)
h2ham
December 07, 2019
Tweet
Share
More Decks by h2ham
See All by h2ham
フロントエンドカンファレンス北海道2024 『小規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜』長谷川広武(ハム)
h2ham
1
3k
WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わったのか?実装事例から見る現在のWordPressの設計と構築』
h2ham
1
620
WordPress案件を請け負う制作会社からみる Shifter の魅力
h2ham
0
1.2k
WordCamp Tokyo 2017 h2ham toro_unit
h2ham
1
6.8k
デザイナーが効率よくテーマ作成を進めるには? デザインから WordPress のテーマ作成のワークフローを見直す
h2ham
2
6.4k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Gamification - CAS2011
davidbonilla
80
5k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Done Done
chrislema
181
16k
BBQ
matthewcrist
85
9.3k
What's in a price? How to price your products and services
michaelherold
243
12k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Transcript
None
運⽤も最⼤限考慮! コーポレートサイトで ブロックエディタフル活⽤の事例紹介 ⻑⾕川 広武 株式会社HAMWORKS
スライドは共有するため、 メモは不要です
WordPress案件で ブロックエディタ利⽤での 設計・構築 をしていますか? 質問
2018年12⽉6⽇
https://wordpress.org/news/2018/12/bebo/
https://ja.wordpress.org/gutenberg/ ブロックエディタの登場により WordPressの設計が変わった!
皆さんの設計・構築も ブロックエディタの登場により 変わりましたか?
⾃⼰紹介
ハム テクニカルディレクター フロントエンドエンジニア SaCSS 主催 ⻑⾕川 広武 は せ
が わ ひろむ
(´ ºムº `)
None
None
None
https://www.meetup.com/ja-JP/topics/wordpress/jp/
https://www.meetup.com/ja-JP/Sapporo-WordPress-Meetup/ - 2ヶ⽉に1度開催のペース - これまで8回開催 - 当⽇に質問を受けて進⾏する形式
https://ja.wordpress.org/plugins/gutenberg/ ほぼ毎回ブロックエディタ関連
None
None
None
ぜひ⼀度北海道のイベントにも参加を!
本題
https://ja.wordpress.org/gutenberg/ ブロックエディタの登場により WordPressの設計が変わったんです
会社の事例1つ⽬として 初ブロックエディタ対応プロジェクト リリース 2019年2⽉
https://www.bacardijapan.jp/ 投稿コンテンツはすべて ブロックエディタ⼊⼒対応
サイト構成画⾯例
None
None
None
None
None
None
ブロックエディタ抜粋
None
https://wordpress.org/plugins/advanced-posts-blocks/
None
None
None
None
None
再利⽤ブロック
変更頻度が⾼い再利⽤ブロックに 専⽤のリンク
設計:おおよそ4ヶ⽉ほど 実装:メインの開発は2ヶ⽉ 調整1ヶ⽉・⼊⼒1ヶ⽉
- ワイヤー後に必要ブロック精査 - もしくは、必要ブロック決定後に 必要ブロックのみで構成 ワイヤーの段階でブロックも確定
None
None
None
None
None
None
None
2018 年 8 ⽉時点で ブロックエディタ採⽤きめる
https://ja.wordpress.org/gutenberg/ - 標準になる機能⾃体を最⼤限利⽤したい - クライアントの利⽤しやすさ優先 - カスタムフィールドの利⽤を避けたい 開発段階で採⽤を決めた理由
それより何よりも・・・
カスタムフィールド前提の 設計・構築を避けたい!
https://2017.tokyo.wordcamp.org/session/ad-9/
https://speakerdeck.com/h2ham/wordcamp-tokyo-2017-h2ham-toro-unit
https://speakerdeck.com/h2ham/wordcamp-tokyo-2017-h2ham-toro-unit?slide=31 「外観」と「コンテンツ」の分離
プラグインやテーマによる豊富な拡張性 WordPress で構築するメリット
カスタムフィールドの功罪
⼊⼒の制限と明確化? - 決まった⼊⼒で制限をすることで 予期せぬ使われ⽅を防ぐ? → 表⽰崩れ防⽌にもなる? - どこに何を⼊⼒するのかの明確化?
結果、制作にかかる負担増加 - 作りきり⼤前提事案に - ⼊⼒内容追加があっても、対応負担増加に - テンプレートの複雑化・制作⼯数増に
QIPUPCZ#SZBO#VSLFIUUQTXXXqJDLSDPNQIPUPTCSZBOCVSLF photo by Andreas Mortonus https://www.flickr.com/photos/purpleseadonkey/4775066884 ステキなWordPressサイト
https://developer.wordpress.org/themes/
https://speakerdeck.com/chiilog/wordpresstemafalsezuo-rifang-2019-si-falsebesutopurakuteisu 実案件も含めてテーマ製作者は必読!
WordPress 案件って難しぃよ!
設計も制作も難易度増! - 運⽤も踏まえて仕様を詰める必要がある - 運⽤時どんな⼊⼒が必要か - 運⽤に合わせてどんなコンポーネントが必要か -
ブロックエディターを理解する - どんなブロックがあり何ができるのか - そのブロックでどんなHTMLが出⼒されるか、スタイルがついているか - コンポーネントを意識した設計とスタイル設計 - 場合によってカスタムブロックの作成⽅法も
ブロック間の余⽩は統⼀したい - 次のブロックが何か?で余⽩を変えると 制作⼯数は増えてしまう ここが苦⼿・・・
結局のところ
制作の何がかわったか ?
運⽤も考慮したブロック設計が必須に - ブロックだけでページが構成できるように - 制作ブロック数で⼯数も変わる - カスタムフィールドは最⼩限に - 利⽤するとしてもコンテンツ以外の構成などに
https://wptavern.com/gutenberg-one-year-later
まとめ
"ブロックエディタの登場で制作が変化 "設計重要! "運⽤も考慮した設計必須! "カスタムフィールドは基本不要
使いやすい・メンテしやすい WordPressサイトに!
この時間は設計の話でした
ご清聴ありがとうございました