デザインの自由を奪うのはCMSじゃない

2026年6月20日開催の新潟グラムでのセッション資料です。
CMS、特に「ブロックエディタとデザインの自由度」と「静的HTML先行のワークフロー」についてお話しました。

Transcript

1. デザインの自由を
 奪うのはCMSじゃない ── 構築の本質と、次の一手 ── Hello! 株式会社ジャクスタポジション
 代表取締役　 西山　 泰史 静的HTMLを先に作る制作ままでいいの？
 CMSサイト構築フローを考える
 2026.06.20 Sat , 新潟グラム at NINNO3会議室 RoomC なん...だと...
2. 私とジャクスタポジションについて 西山 泰史（ にしやま　 やすふみ ） 株式会社ジャクスタポジション　 代表取締役/ディレクター
 2004年4月創業、2013年10月法人化（創業22年目） Movable Typeをプラットフォームにウェブサイトを構築 弊社の主な業務 ウェブサイト構築／ウェブコンサルティング 自社開発製品販売 ウェブシステム開発 その他デザインワーク デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 2
3. 私とジャクスタポジションについて 西山 泰史（ にしやま　 やすふみ ） 前職である商工会議所経営指導員の経験から、事業経営に 役立つウェブサイトの企画・立案を得意とする。
 自身が経験した「ウェブがもたらした奇跡」を多くの人に 体験して欲しいと考え「ウェブでもっと楽しいリアルを創 る」をミッションに活動中。 小樽青色申告会連合会副会長（2025年5月～） 中小機構販路開拓支援アドバイザー（2017年5月～） 大衆酒場 俺流エバンジェリスト（自称／2019年3月～） 三度の飯より食べること、そして飲むことが好き 後悔が先に立たないのならとりあえずやってしまおう
 忘れ物は忘れたと気がついて初めて忘れ物と考えている デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 3
4. 私とジャクスタポジションについて 自社プロダクト SKELETON CART の開発・販売 MTクラウド対応 デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 4
5. 私とジャクスタポジションについて Movable Type 用プラグインの開発・販売 DynamicPreview ImageUploadUtility デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 5
6. 私とジャクスタポジションについて MovableType.net専用テーマ HalfMadeThemes シリーズの開発・販売 シリーズ第1弾 TYPE: ALPHA デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 6
7. 目次 今日お話すること 01 はじめに 02 Movable Typeの文化的背景 03 MTMLとブロックエディタ 04 ブロックエディタの誤解 05 HalfMadeThemesという設計思想 06 まとめ デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 7
8. はじめに 『page-*.php論争』は WordPress だけの問題か Chapter 01
9. 01.はじめに 『page-*.php論争』は WordPress だけの問題か コンテンツに該当する部分をPHPファイルにベタ書きしているパターン デザインの段階でCMSでの構築まで考慮せず、
 まずデザインをつくってそれをHTMLにし、その後WordPressにするというフロー the_content() を書かず、そのかわりにコンテンツをHTMLで直接書き込む手法 デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 9
10. 01.はじめに Movable Typeにも存在する『HTMLベタ貼り』問題 コンテンツに該当する部分をエディタ（ウェブページ）にベタ書きしているパターン 管理画面「ウェブページ」のHTMLがデータベースに保存されるため、
 サイト内検索にもヒットしてしまう 問題の本質は「デザインとCMS設計が分離できていない」こと MTの場合、むしろそれに気が付きにくい分、根が深い問題なのかも知れない デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 10
11. Chapter 02 Movable Type の文化的背景
12. 02.Movable Type の文化的背景 Movable Type ／ MovableType.net の特徴 デザインにおける自由度の高さ
 MTMLテンプレート構造＝HTMLとの高く学習コストが低い HTMLを静的に書き出すことで、CMSとウェブサイトが分離され、
 セキュリティが堅牢 MovableType.netはコストパフォーマンスが高く、
 小〜中規模案件でも導入しやすい デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 12
13. 02.Movable Type の文化的背景 その特徴がもたらした状況 MTMLが柔軟なため、HTMLからのテンプレート化が容易となり
 フルスクラッチ構築が前提となるケースが増える セキュリティ的に強く、従来の構築フローに倣いやすいため、
 比較的規模が大きめな案件での利用が進む 依然として管理画面内でソースコードをベタ貼りする使い方も多い
 ➔ WordPressの『page-*.php論争』と同じ構造になっている デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 13
14. Chapter 03 MTMLとブロックエディタ
15. 03.MTMLとブロックエディタ MTML Movable Type Markup Language の略で、
 MTのテンプレートを記述する際の言語 HTMLと同じように書くため学習コストが低い 記述内容に誤りがあると保存・再構築ができない Movable Typeシリーズの共通言語として利用 デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 15
16. 03.MTMLとブロックエディタ ブロックエディタ 2020年、MovableType.net に実装され、
 現在はMTクラウド／ソフトウェア版でも利用可能 カスタムブロック化することで入力規則を統一でき、
 CMSに不慣れなユーザー層も使いやすい アーカイブタイプ（ウェブページ／記事）によって
 利用可能なブロックエディタをプリセット可能 アクセシビリティやセマンティックHTMLを
 利用者が意識する必要なくコンテンツの編集が可能 デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 16
17. 03.MTMLとブロックエディタ MTML ヘッダーやフッターなどの構造設計 テンプレート全体の構造を担う
 → テンプレートエンジニアの領域 Block Editor コンテンツ設計 HTMLをJavaScriptで制御する
 → マークアップエンジニアの領域 デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 17
18. Chapter 04 ブロックエディタの誤解
19. 04.ブロックエディタの誤解 ブロックエディタは、デザインの自由度が低いのか ブロックエディタはコンテンツを入れる「箱」のようなもの 決まっているレイアウトの「箱」をデザインしていく必要がある いわゆる「デザインテーマ」と同じようなデザインを求められる デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 19
20. 04.ブロックエディタの誤解 デザインやモジュール設計における「ルール」と「再利用性」 明確な設計ルール（タイポグラフィの階層、グリッドシステム、カラーパレットなど）を設け、
 属人性を排除し、一貫したブランド体験や製品品質を維持する。 品質の均一化と安定 基本レイアウトや設計（モジュール）を再利用可能な除隊にすることで、
 注力すべき体験設計やアイデアにリソースを集中する。 フォーマットの最適化 最適化されたモジュールたちを組み合わせる設計手法は、
 後からの修正や機能追加・スケールアップを容易にする。 拡張性と保守性の向上 「毎回同じものを作る作業」から解放され、本来集中すべきクリエイティブな仕事に向き合える。 デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 20
21. 04.ブロックエディタの誤解 デザインにおける再利用性は「デザインの陳腐化」ではなく
 「多様なユーザーニーズへ迅速に応える仕組み」 デザインシステムの構築 再利用可能なUIコンポーネントやデザインアセットを体系化 デザインやプロダクトの制作効率を飛躍的に高める WordPress/Movable Typeを含むCMSのブロックエディタと同じ方向性 デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 21
22. 04.ブロックエディタの誤解 セクションブロック-1 セクションブロック-2 見出しブロック テキストブロック 画像ブロック 見出しブロック 動画ブロック テキストブロック レイアウトブロック 見出しブロック テキストブロック 2カラムブロック 見出しブロック テキストロック ボタンブロック 画像ブロック 見出しブロック 3カラムブロック 画像ブロック 見出しブロック テキストロック ボタンブロック 見出しブロック テキストロック 画像ブロック 2カラムブロック 見出しブロック テキストロック 画像ブロック 表ブロック CVブロック 3カラムブロック 見出しブロック テキストロック ボタンブロック デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 22
23. 04.ブロックエディタの誤解 発想の逆転 いつも「自由にデザインしていたつもり」が
 実は「統一されたレイアウト（デザインシステム）」だった ブロックエディタは「デザインの制限」ではなく
 設計思想の言語化、デザインの統制化 デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 23
24. Case Study ブロックエディタの導入事例
25. ブロックエディタ導入事例：小樽市社会福祉協議会 小樽市社会福祉協議会 デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 25
26. ブロックエディタ導入事例：国立大学法人等採用サイト 国立大学法人等採用サイト デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 26
27. Chapter 05 HalfMadeThemes という設計思想
28. 05.HalfMadeThemes という設計思想 HalfMadeThemes MovableType.net 専用テーマシリーズ 最小のコストと最大のパフォーマンスを、最短で実現 デザイナーやマークアップエンジニアが、
 MTテンプレートに触れることなく、柔軟なカスタマイズを実施 初期構築コストを大幅に削減しつつ、
 高い品質と拡張性を備えたウェブサイトを構築できる ブロックエディタ構築経験から得た
 デザイン／レイアウトの「法則」を仕組み化 デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 28
29. 05.HalfMadeThemes という設計思想 ウェブサイトを作ること ≒ 情報・価値を伝えること ツールで対応できる領域 レイアウト／デザインを整える 画像を配置する 色・フォントを変える HTML/CSSを作る ツールで対応しきれない領域 価値・世界観の言語化 構造設計・導線設計・情報整理 属人化しない運用設計 長期運用を前提とした耐性設計 制作会社（プロ）の介在が必要 ノーコード・ローコード、AIで代替可能 デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 29
30. 05.HalfMadeThemes という設計思想 弊社が辿り着いた「アーキテクトテーマ」という結論 アーキテクトテーマ構築 デザインテーマ構築 フルスクラッチ構築 納期／コスト要件：低
 カスタマイズ要件：低〜中 納期／コスト要件：高
 カスタマイズ要件：高 プロの手が介在し「価値の言語化・情報設計」などの
 カスタマイズを前提とするアーキテクトテーマ デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 30
31. 05.HalfMadeThemes という設計思想 CMSって『なんのために必要なのか？』 誰しもが、コンテンツを発信できる仕組み HTML/CSSやプログラミングの知識を強制しない ブロックエディタは制約ではなく原点回帰 デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 31
32. Chapter 06 今日、伝えたかったことのまとめ
33. まとめ 静的HTML先行のワークフローは今後どうなるか AIが私たちの仕事を奪うのか ブロックエディタはデザインの自由を制限するのか デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 33
34. まとめ CMSを利用したウェブサイトエコシステムのカタチ ウェブサイト制作会社は、
 FilterではなくAmplifierとなる ウェブサイトの運営サポートや施策提案（作るだけじゃない） ◀ サービスの利用 安心・安全 ▶ クライアント企業 ◀ 機能・デザイン・使いやすさ ◀ 相談・要望 情報を届ける先 CMS
 （例：Movable Type） プラットフォーム ▶ ◀ フィードバック ウェブサイト制作会社
 （ジャクスタポジション） デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 34
35. まとめ 今日のセッション内容が
 今後の制作体制や、ワークフローを
 見直すきっかけになれば幸いです デザインの自由を奪うのはCMSじゃない——構築の本質と、次の一手 35
36. デザインの自由を奪うのはCMSじゃない —— 構築の本質と、次の一手 —— See you! 株式会社ジャクスタポジション　 代表取締役　 西山　 泰史 2026.06.20 Sat
 静的HTMLを先に作る制作ままでいいの？CMSサイト構築フローを考える
 新潟グラム at NINNO3会議室 RoomC