【レポート】Web担当者Forumミーティング 2025 秋

スマホ時代のWeb制作は「先割」で考える。ヘッドレスCMSを成功させるコンポーネント設計の極意

キノトロープ生田氏が語る、10万ページ規模でも「内製・少人数」で回せる運用の裏側。

深谷 歩[執筆]

1月7日 7:05

Sponsored by:

Web制作の現場はいま、大きな変革期を迎えている。「Web担当者Forum ミーティング 2025 秋」に、キノトロープの生田昌弘氏が登壇し、「CMSの“あるべき姿”を考える日~30年の知見から語る、これからの構築手法〜」と題し、Web制作とCMS運用における「コンポーネント」設計の重要性を中心に、スマートフォンファースト時代のユーザー動線やコンテンツ戦略について語った。

株式会社キノトロープ 代表取締役社長 生田昌弘氏
株式会社キノトロープ 代表取締役社長 生田昌弘氏

SNSフォロワー100万人! Z世代にリーチする秘訣

キノトロープは、1993年創業の老舗Web制作会社だ。冒頭では、同社がここ数年注力しているeスポーツ分野での取り組みが紹介された。同社は、eスポーツのトップリーグで活躍するプロゲーミングチーム「KINOTROPE gaming」を運営しており、2025年8月には、eスポーツワールドカップに出場を果たした。さらに2026年1月の「Apex Legends」世界大会への出場も予定している。

皆さんは、Z世代にリーチする方法をお持ちですか? 彼らのスマートフォンのトップ画面にブラウザはありません。Webサイトを閲覧せず、SNSから検索し、SNS上の情報を重視しています。彼らが30~40代になる頃には、Web制作会社は不要になるかもしれません。

SNSで求められるのは、告知ではなく彼らを魅了するコンテンツです。そのコンテンツの一つがeスポーツだと考え、現在、実験をしています。この3年間で約100万人のフォロワーを獲得しました。5年後、10年後に生き残るための戦略として、eスポーツに取り組んでいます(生田氏)

創業以来こだわり続けた分業制と社内制作

カメラマンとしてキャリアをスタートし、紙媒体の制作に携わっていた生田氏がWeb制作を始めたのは30年前にさかのぼる。当時、生田氏が驚いたのは、一人の制作者が素材制作からレイアウト、公開までを担っていたことだった。先にレイアウトを組む「先割」をして担当者を割り当て、完全分業で進行する紙媒体の制作プロセスとは大きく異なっていたからだ。

キノトロープは、Web制作にも分業を取り入れた“変な会社”だといわれていました。雑誌よりも早いペースかつローコストで、レイアウトを整えてコンテンツを流し込むという思想にマッチしたのがCMSです。紙媒体の経験から得たコンポーネントという概念を提唱し続けてきましたが、なかなか理解されませんでした(生田氏)

同社は創業以来、大規模なWebサイトの構築・運用に取り組んできた。その中で欠かせなかったのが、CMSとコンポーネントという概念だ。キノトロープでは、主要なCMSをすべて使ってWebサイトの制作・運用を行ってきた経験があるという自負を持つ。

また、同社では外注を行わず、すべての工程を社内のワンストップ・ワンチーム体制で進めている。外注しないのは、ナレッジ、ノウハウの蓄積のためだ。全工程を社内で行うことで、インターネットのエンジニアリングの最先端とその変遷を把握し続けているという。

PCもスマートフォンと同じ動線に合わせる時代

30年にわたってWebの最前線にいる生田氏は、現在が「Webの激変期だ」という。スマートフォンの普及からおよそ12年。いまやインターネット利用者の約9割がスマートフォンからアクセスしているからだ。

LINEヤフーが発表した「インターネットの利用環境 定点調査(2025年上期)」では、スマートフォンのみでインターネットを利用する層が53%、PCとスマートフォンを併用する層が38%という結果になっている。PCのみの利用者はわずか1%程度にすぎない。

スマートフォンでのインターネット利用者は全体の約90%
スマートフォンでのインターネット利用者は全体の約90%

過去に「ガラケーのサイトをやめましょう」とクライアントに提案した際のガラケー利用率は1%でした。いまはPCサイトをやめてもいい時期に来ています。スマートフォン版を拡大表示してPCに対応するケースも増え、PC専用のデザインにリソースを割かなくなってきました。

「うちはB2BのサイトだからPCユーザーが多い」という方もいますが、実はPCでサイトを見るときも視線の動きはスマートフォンと同様、縦に上から下まで走ります。だからこそ、PCもスマートフォンと同じ動線に合わせる必要があります。

ちなみにグローバルナビ(全ページ共通メニュー)も、ハンバーガーメニュー(スマホサイトに多い三本線のアイコンを押すとメニューが開く仕組み)もほぼクリックされていません。メニューからリスト表示、再選択という古典的な導線は離脱率が高く、3クリックでユーザーはほぼゼロになります(生田氏)

スマートフォンファーストでデザインが変わる

生田氏は、スマートフォンファーストの浸透が人々のライフスタイルに影響を与え、人を「怠惰」にしたと指摘する。例えば、飲み会の店や宿泊先のホテルを当日に予約することが、今や当たり前になっているのがその一例だ。そのため、「コンテンツ側も、このように変化したライフスタイルを前提に設計する必要がある」と生田氏は警鐘を鳴らす。

こうした背景から、Googleが提唱するマテリアルデザインは「自動販売機のように誰もが直感的に使えること」を目的としている。その理由は、Webサイトでエラーが出た際、ロゴをクリックしてホームに戻る“かつての常識”を知らない人が増えているためだという。

レイアウトが変わる「マテリアルデザイン」
レイアウトが変わる「マテリアルデザイン」

斬新なデザインであっても、慣れてしまえば違和感はなくなるものだ。生田氏は、Pinterestを初めて目にした際、画像の末端が不揃いなグリッドレイアウトを「気持ち悪い」と感じ、縦型動画に対しても同様の抵抗感を持っていたと振り返る。

しかし現在では、Pinterestを優れたデザインだと評価しており、むしろ横型の動画を見ると「なぜ縦ではないのか」と違和感を覚えるほどになったという。

このようにユーザーの視線が「縦」に動くようになった影響は、Webの世界だけにとどまらない。自動販売機の商品配置やスーパーの棚における価格表示までもが、縦方向の視線の動きを意識したレイアウトへと変化している。

ユーザーの閲覧行動も時代と共に変化
ユーザーの閲覧行動も時代と共に変化

メガネ型のアイトラッキングを用いた調査でも、その傾向は裏付けられていると生田氏は述べる。高齢者層であっても視線は縦方向に動き、その移動スピードもかつてより上昇しているのだ。

こうしたユーザー行動の変化に伴い、検索エンジンの評価基準も変わってきています。ページ内に単にキーワードを散りばめるといった従来の手法は、もはや効果が薄れています。現在評価されるのは、ユーザーの抱える課題を解決に導く「ソリューション型コンテンツ」です(生田氏)

つまり、テーマページや特集記事、リストページなど、ユーザーにとって有益な「良質なコンテンツ」を作り込むことこそが、現代における根本的なSEO対策となっているのである。

検索エンジンからの流入の多くはトップページではなくテーマページにたどりつく
検索エンジンからの流入の多くはトップページではなくテーマページにたどりつく

ヘッドレスCMSの運用を楽にするコンポーネントの考え方

ヘッドレスCMSとは、コンテンツを一元管理し、APIを通じて任意のフロントエンドにデータを供給する仕組みである。実は、既存の商用CMSのほとんどはヘッドレスCMSとしても利用可能であり、仕組み自体は以前から存在していた。しかし昨今、「ヘッドレスCMS」という言葉がバズワード化したことにより、改めて注目が集まっている。

導入の適性について、生田氏は「まず、フロントエンドの実装が可能で、かつAPIを理解できる技術メンバーがチームにいることが前提」とした上で、次のように語る。

特に向いているのは、大量の商品データを扱っているケースや、リレーショナルデータベースを用いた高度な絞り込み検索が必要なケース、そしてデータを一元管理したいケースです。ただし、構築や運用の難易度は相対的に高くなります(生田氏)

そこで重要となるのが、コンポーネント設計を核としたCMS運用の最適化である。

データベース構築の視点ではエレメント(最小要素)単位での管理が基本だが、CMSの入力・管理画面まで同じ粒度で設計してしまうと、実際の運用は極めて複雑になる。その解決策として同氏が挙げるのが、雑誌制作における「先割(さきわり)」の発想だ。

タイトル、写真、本文などをパッケージ化した「コンポーネント」を基本単位として用意し、それらを配置する箱としての「テンプレート」を作成するのです。デザインの完全な自由度よりも、日々の運用や更新のしやすさを最優先するならば、この考え方が非常に有効です(生田氏)

テンプレート・コンポーネントとは
テンプレート・コンポーネントとは

大規模サイトの更新作業も内製で可能に

実際にキノトロープでは、10万ページに及ぶ大規模サイトの運用支援を手掛けているが、日々の更新作業は基本的にクライアント自身の手によって行われている。

ホテルの現場担当者のように、普段PC操作にあまり馴染みのない方でも直感的に運用でき、必要な情報をすぐに発信できる。それこそが、本来あるべきCMSの姿です(生田氏)

この体制を支えているのが、コンポーネントを利用した効率的な仕組みだ。テンプレート内にあらかじめコンポーネントを組み込んでおくことで、3〜5種類の表示形式を柔軟に切り替えることが可能となる。さらに、大元のデータベースを更新するだけで、その情報を参照している数百から数千のページが自動的に書き換わるため、運用の手間が大きく削減されるのである。

テンプレート・コンポ―トネントの考え方はCMSを有効に機能させる
テンプレート・コンポ―トネントの考え方はCMSを有効に機能させる

ただし、長期にわたって運用を続けていると、次第にテンプレート自体が肥大化してしまう傾向がある。その課題に対する有効な解決策となるのが「ブロックテンプレート」の活用だ。

ブロックテンプレートとは、ページ全体の枠組み(テンプレート)を維持したまま、特定の位置に「ブロック」単位で要素を追加・差し替えできる仕組みを指す。これにより、個別のテンプレートをその都度改修することなく、柔軟なレイアウト変更が可能になる。

柔軟なレイアウト変更が可能になる「ブロックテンプレート」
柔軟なレイアウト変更が可能になる「ブロックテンプレート」

最も重要なのは、まず「コンポーネントを作る」という発想でCMSを設計することです。ブロックテンプレートも、基盤となるコンポーネントがあって初めて機能するものです。また、仮に現在CMSを使用せずHTMLでページを作成している場合であっても、コンポーネント単位で構成を見直すことで、運用や更新の効率は劇的に向上します(生田氏)

スマートフォン時代におけるWeb制作のあり方、そして運用の持続可能性を担保する「コンポーネント」という設計思想──。本講演は、多くのヒントを与えてくれる内容だったと言えるだろう。

Sponsored by:

この記事をシェアしてほしいパン!

人気記事トップ10

人気記事ランキングをもっと見る

企画広告も役立つ情報バッチリ! Sponsored