PHPが ベタ書きHTMLに なってしまう

2026年5月20日に開催されたWordPress Meetup Tokyoで話しました。当時はやっていた「page-***.phpで作るのは時代遅れ」論争にいっちょかみしました。
https://capitalp.jp/2026/04/22/can-i-use-page-x-php/

Transcript

1. PHPが ベタ書きHTMLに なってしまう Fumiki Takahashi @WordPress Meetup Tokyo 2026/05
2. 高橋文樹と申します • タロスカイの CTO • WordPress 歴19年 • 今でも page-*.php 書いてます。人間だもの • 作家で破滅派という出版社も運営してます 2
3. page-*.phpへの HTMLベタ書きは 問題か 3
4. • テンプレートは少なければ少ないほどいい • ユーザーが編集できる部分は多ければ多いほどいい • カスタムHTMLでぜんぶ書くぐらいならpage-*.phpでもいい かもね 個人的テンプレート原則 4
5. これは直そう 5 <?php the_content(); ?> .page-main { h1 {} p {} } https://capitalp.jp/2026/04/22/can-i-use-page-x-php/
6. これはテンプレートでもいい 6 1. コードエディターじゃないと編集できな い＝人間には無理 2. カスタムのクラスがいっぱい書いてあ る＝関心の分離ができてない 3. ノーコーダーへの心理的負担がすごい ＝SFTPした方がまし
7. Pro & Con 7 page-*.php エディターで編集可能 ユーザー 頼まないと変更できない 自分でできる 製作者 更新ごとに制作費 手離れ良いが工数大 コスト イニシャル小・更新費都度 イニシャル大・メンテ費用 プラグイン連携 できない可能性大 連携可・メンテ発生 ギルティ！
8. 問うべきは 「なぜそんなデザインになったか？」 8
9. 本題： それでもテンプレート ベタ書きが 発生するケース 9
10. 技術的な問題より「商流」で決まることがある • サイトの運用よりもブランディングにフォーカス • クライアントご指名のデザイン会社がある • 印刷+HTMLの会社でCMSとかよくわからない 10
11. デザインを担当する会社と連携できた • 事前のミーティングで取り決めした内容 （ブロックっぽいコンポーネントを意識す ること）を尊重してもらえる。 • 静的解析（phpcsなど）の導入を喜んで もらえる。 • デザイン上のフィードバックを返すと相 談に乗ってくれる うまくいくケース 11 Generated by nanobanana2
12. 分業されすぎ＆縄張り争い • HTMLをCMS化する段階でデザインす る会社の仕事は終わっている • 仕事に口出しされたくない（！） • 実はpage-*.phpの更新費用も売上に 入っている（ギルティ！） • クライアント（または代理店）は異なる 2 社がやりとりするのをよく思わない（また は単にめんどくさい） うまくいかないケース 12 Generated by nanobanana2
13. • 企画を作る人にとってWordPressであるとい うのは選択肢の一つ。 • デザイン＋フロントエンドのスキルセットで仕 事をしている人がそもそも多い。 • 全部のスキルセットを兼ね備えた人がなかな かいない。 商流が分かれるのは防ぎようがない 13 企画 デザイン（figma） HTML+CSS+JS WordPress化 ここの人 多い
14. よい方に考えるんだ 14
15. クオリティの高いサイトを作るための分業と考える 15 たとえば、Studioはクリエイティブ力に 優れたクリエイターを ”Craft Experts”と 呼んで差別化している。 https://studio.design/ja/experts
16. 具体例 16
17. ケーススタディ（架空） • 不動産系グローバル企業TOA HoldingsがWordPress Meeupをエン タープライズ部門として（？）買収。 • 「東京の町でコミュニティを形成する」を掲げ、”AOYAMA CONNECT” と してリブランディング。 • Webデザインを手がけるのは代表のSNS発信で有名なデザインファーム 「青山ヘルベチカ」 • タロスカイの仕事は静的サイトをWordPressにすること 17
18. 受け取ったHTML https://takahashifumiki.com/etc/wpmeetup20260520/ GitHub: https://github.com/fumikito/aoyama-helvetica 18
19. 技術スタック • Lottie（ロゴの消し込みアニメーション、After Effectから書 き出して作る） • GSAP（有名アニメーションライブラリ、ScrollTriggerなどと一 緒に使ってスクロール連動のアニメーションを作る） • Lenis（慣性スクロール、個人的にはブラウザデフォルトでいいや んと思うが） おしゃれなサイトに多い技術が入っている！！ 19
20. ちなみに、このためにAfter Effectで作りました 古（いにしえ）のFlashの知識が役にたった 20
21. ちなみにプラグインは存在する • LottieFiles for WordPress • Animations for Blocks 有名ライブラリAOSをブロックに適用 • Greenshift GSAPのブロックライブラリ • Smooth scrolling with Lenis Lenisを読み込むだけ？　カスタ ムコードが必要っぽい 各ライブラリ・プラグインの挙動を知っており、 かつフロントエンド作者＝テーマ作者でない限り意味は少ない また、フロントエンド詳しい人も手元で細かく調整しないとクオリティ出せないはず 21
22. ベタ書きのfront-page.phpにするという大人の判断 • ヒーローユニットはおそらく変わらない（1年とか？）ので、自由に更新 できるようにするメリットが小さい。 • スクロールアニメーションがブロックとして分割したときに動くかわか らない。 • テーマとして分解するときにアニメーションの動作原理をテーマ作者が 突き止めないといけなくなり、WordPressテーマ作者は常にWebデザイ ン実装者と同等以上の知識を持っていないといけなくなる。 結果、工数の関係でベタ書きになる 22
23. WordPress開発者としてできることは？ 23
24. 更新できるところはできるように 1. サイト名、タグライン、リードぐらいは Settings APIで編 集できるように 2. ニュースなどはいくらなんでもサブクエリにする 3. ナビゲーションはメニューまたはナビゲーションブロック 4. ヘッダー、フッターはたぶん簡単、いくらなんでも他の ページと一緒でしょ？ 5. wp_head wp_footer wp_enqueu_(script|style) あたりはやってなければ実装する 6. お問い合わせフォームはがんばってスタイルをあわせ ていく（CF7のフィードバックデザインとか） 24
25. ところでできる人はできる Unitoneの作者北島さんが作ってみてくれまし た。 https://inestimable-skipper-debf05.inst awp.co/ • エディターの操作で完結できる範囲で作成 • 色やサイズは目分量で設定 • スムーススクロールなし • フォームは CSS 書かないと無理そうだったので未設定 • あんまり覚えてないのですが、全体をざっとつくるのに30分、 なるべく元デザインに合わせるように調整するのに30分くらい だった気がします。 25
26. HERE COMES NEW CHALLENGER! X-T9のVektor石川さんも挑戦してくれました。 5/20今日の出来事。 https://dev3.biz/wmt-demo/ • 「スクロールした時の ヘッダー文字色」「Gather の項目ホバー した時に背景色」「スムーススクロール」とかいろいろ省きまし たがそれでもチマチマブロック並べて、、あれですね、文字の サイズとか文字間隔をほとんど個別で設定したのでめちゃめ ちゃ時間かかりました... • 普通に半日以上はかかったのですが... 26
27. まだ終わらんぞ 27
28. ちょっと反論 1. 「更新しづらい」は誰がなんと言おうと負債。担当者が入院したら？ 2. 静的だからメンテナンスフリーは嘘。 npmサプライチェーンアタックを喰らえ！ 3. 「ずっと自分でメンテするから大丈夫」は過信。 半年前の自分は他人と心得よ。 1,000人に使われるWordPressプラグインを3年メンテしたらわかる。 4. 更新を他人任せにするサイトは早晩ほろびる。 最後に勝ち残るのは、わからないなりに色々やるクライアント。 28
29. まとめ 1. WordPressよくわからない人がデザインしててもいい じゃないか、人間だもの 2. 我々は制約の中でがんばっていこうな 3. 「すぐれた WordPressエージェンシーのディレクトリ」 はコミュニティ主導で作りたいですね 29
30. ご清聴 ありがとうございました 懇親会でお会いしましょう 30