文系DXスタジオ AMUのDXスタートアッププランは「業者に丸投げして、結局誰も使わなくなるシステム」を作るものではありません。優秀なAI（Gemini）や使い慣れたWord、スマホで動くLINEを使い、「自社で情報発信をコントロールする力」を身につけていただく伴走型インハウス支援モデルです。

山口印刷山口ネットプリントコンテンツ設計 MASA Planning Labo山口神戸

ゲームフィケーション

ゲームフィケーションの効果とは？　資料請求などのCVRは３倍の1.5%に上昇

例えば、高気密高断熱のマイホームに関心がある人がサイトを見つけて閲覧したとします。Googleサイトで公開。動きのあるゲームを用意するのに、埋め込みやGASを使ってできるスマホで遊べるゲームだと、どのようなゲームが実現可能なのでしょうか？　

コンテンツとテクニカルの両面からAIの提案を紹介します。

高気密高断熱住宅を検討しているユーザー向けに、Googleサイト上で動くスマホゲームを導入するアイデア。

Googleサイトはセキュリティ上の仕様（iframe 内での動作制限など）がありますが、HTML5/JavaScript や GAS（Google Apps Script）のWebアプリ埋め込みを活用することで、スマホで手軽に遊べる本格的なゲームが実現可能です。

テクニカル面（技術構成・制約）とコンテンツ面（ゲーム企画・UX）の2つの視点から提案します。

1. テクニカル面：実現方法と技術構成

Googleサイトでスマホゲームを動かすアプローチは、主に2つの実装パターンがあります。

パターンA：Googleサイトの「埋め込み（コード）」に直接記述

Googleサイトの「挿入 > 埋め込み > コードを埋め込む」を使用し、HTML/CSS/JavaScript（Canvas APIやPhaser.jsなど）を直接貼り付けます。

メリット: スプレッドシート等の外部サーバーと連携しない単体ゲームの場合、最も手軽でレスポンスが速い。
スマホ対応: HTML5 CanvasやCSSアニメーションでタッチイベント（touchstart, touchmove）を検出して動かします。

パターンB：GAS（Webアプリ）を iframe で埋め込み

GASで doGet() を使い、HTMLを返却するWebアプリとしてデプロイ。そのURLをGoogleサイトに埋め込みます。

メリット: プレイヤーのスコア保存、診断結果に応じた資料請求フォームとの連携、Googleスプレッドシートへのデータ蓄積が容易に行える。
ポイント: 画面の縦横比（レスポンシブ）をCSSで 100vw / 100vh 相当に調整し、スマホの指操作で快適に動くようUIを最適化します。

技術的な制約と注意点

サウンド（効果音）の制限: iOS/Androidブラウザの仕様上、ユーザーが画面を1回タップするまで音声再生がブロックされます。「タップしてスタート」画面を挟む設計にするとスムーズです。
スクロール干渉: スマホでスワイプ操作するゲームの場合、ページ全体のスクロールと干渉しないよう touch-action: none; や preventDefault() を適切に処理します。

2. コンテンツ面：高気密高断熱を学べるゲームアイデア3選

ただ遊ぶだけでなく、「高気密高断熱のメリット（快適さ・省エネ）」を体感できるゲーム性が効果的です。

アイデア①：隙間をふさぐ！「気密（C値）ディフェンスゲーム」

ゲーム概要: 住宅のイラストに次々と現れる「すきま風」や「熱の侵入ポイント」をテンポよくタップして気密テープで塞ぎ、室温を守るアクションゲーム。
動き: タイマーカウントダウンと共に外気が侵入し、画面上の温度計が上下。タップ時のポップなエフェクト（バリアが張られるアニメーション）で爽快感を演出。
訴求メッセージ: 「すきま（C値）を無くすだけで、こんなに部屋の温度が安定する！」を体験。

アイデア②：冷暖房を逃すな！「断熱シミュレーション・タップ」

ゲーム概要: 夏の猛暑（または冬の極寒）の中、エアコン1台で家全体の温度をどこまで快適（24℃前後）に保てるかを競うゲーム。
動き: 普通の家（低断熱）と高断熱の家を選択可能。画面上部から落ちてくる「太陽光（熱）」や「冷気」をタップして弾くか、断熱材アイテムを獲得して家を強化。
訴求メッセージ: 「断熱材がしっかり入っていれば、最小限のエアコン稼働でずっと快適！」

アイデア③：間違った対策を探せ！「おうちの熱逃げ間違い探し」

ゲーム概要: 部屋のイラストの中から「熱が逃げている場所（単板ガラスの窓、対策のない換気扇など）」を制限時間内に見つけてタップするパズルゲーム。
動き: タップすると「複層ガラス＋樹脂サッシにパワーアップ！」といったビフォーアフターのアニメーションが流れ、点数が加算される。
訴求メッセージ: 「熱の7割は窓から逃げる！断熱リフォーム／新築時の重要ポイント」を知識として学べる。

3. コンバージョン（マーケティング）導線の設計

ゲーム終了後のリザルト画面（結果画面）は、見込み客を次のアクションへ誘導する最大のチャンスです。

結果のスコア表示 & 住宅タイプ診断
- 例：「あなたの気密ガード力は【プロ級（C値 0.1レベル）】！本物の高気密住宅なら、年間光熱費が〇〇円お得になります」
GAS連携でデータ保存 & 特典付与
- 「ゲームクリア画面を見せると、モデルハウス見学でノベルティプレゼント」や「ハイスコア達成で限定『失敗しない家づくりガイドPDF』をダウンロード」などの施策を設置。
資料請求・来場予約ボタン
- ゲーム画面直下に「実際の高気密高断熱の家を体感してみる（来場予約）」ボタンを常時配置。

簡易的なアクションゲームであれば、HTML5 Canvas ＋ Tailwind CSS（または直書きCSS）の組み合わせで作成し、GAS経由でスプレッドシートにスコアや回答データを蓄積する構成が最もスムーズでおすすめです。

ゲームフィケーション実装の２パターン

実装パターン

パターン1：「コードを埋め込む」で直接動かす（最も手軽）

Googleサイトの編集画面で、以下の手順で簡単に実装できます。

編集画面の右メニューで「挿入」 > 「埋め込み」を選択
「コードを埋め込む」タブに切り替える
HTML / CSS / JavaScript をまとめたコードを貼り付ける

「パターン1」のシンプルなコードをGoogleサイトに貼り付けて動作テストを行ってみましょう。

パターン2：GAS（Google Apps Script）を埋め込む（スコア保存やアンケート連携を行う場合）

ゲームのスコアを保存したり、ユーザーに連絡先を入力してもらってスプレッドシートに記録したい場合は、GASを使います。

Googleスプレッドシートを作成し、拡張機能 > Apps Script を開く
ゲームのHTMLコードを作成し、Webアプリとしてデプロイ（全員にアクセス権を付与）
発行されたURLを、Googleサイトの「挿入」 > 「埋め込み」 > 「URL」に貼り付ける

スマホで綺麗に見せるための3つのコツ

Googleサイトに埋め込む際、スマホ閲覧時の快適さを保つために以下の調整を行ってください。

ブロックのサイズ（高さ・横幅）の調整 Googleサイト上の埋め込み枠の四角い青い点をドラッグして、ゲーム全体がスクロールなしで収まる大きさに枠を広げてください。
スクロールの干渉を防ぐゲーム画面をスワイプしたときにページ全体が動いてしまわないよう、CSSに touch-action: none; を指定しておくと、スマホでの操作感が格段に良くなります。
レスポンシブ対応 canvas やゲーム画面の幅を max-width: 100%; に設定しておくと、画面サイズの異なるさまざまなスマホ（iPhone、Android）でも崩れずに表示されます。

マーケティング戦略上、効果は期待できますか？

正しい戦略設計と顧客導線（導線設計）を行えば、マーケティング上非常に高い効果（CVRの向上・エンゲージメント強化・離脱防止）が期待できます。

近年、こうしたゲーム要素をWebサイトやプロモーションに取り入れる手法は「ゲーミフィケーション（Gamification）」と呼ばれ、BtoCマーケティングで急速に導入が進んでいます。

高気密高断熱住宅のような「重要性は高いが、専門用語が多くて難解な商材」において、なぜ効果的なのかを【数値例】と【背景・メカニズム】の双方から解説します。

1. 数値で見るマーケティング効果例

一般的な住宅メーカーのWebサイト（指名検索以外、SNSや広告からの流入）と、ゲーミフィケーションを導入したサイトの比較数値のシミュレーション例です。

具体的インプレッションのシミュレーション

月間 3,000セッション（訪問）のサイトの場合：

従来: 3,000 × 0.5% ＝ 15件の問い合わせ/月
ゲーム導入後: 3,000 × 1.5% ＝ 45件の問い合わせ/月（＋30件の増加）

建築単価が高い住宅業界において、問い合わせ・見学予約が月間数十件増えるインパクトは極めて大きく、Web制作やGAS開発にかかるコスト（数十万円程度）は数ヶ月で十分に回収できる計算になります。

2. なぜ効果があるのか？（背景と心理的メカニズム）

高気密高断熱のマイホーム検討層に対して、ゲーム施策が有効な理由は3つのマーケティング的背景があります。

① 「難解な概念」の心理的ハードルを下げる（学習効果）

背景: 「C値」「UA値」「熱損失係数」などの数値や専門用語は、家づくり初心者にとって退屈で難しく感じられます。
メカニズム: ゲームで「すきま風を塞ぐ」「冷気が逃げないようにバリアを張る」といった疑似体験を通すことで、直感的に「気密・断熱がなぜ大事なのか」を理解できます（アクティブ・ラーニング効果）。

② 「返報性の原理」と「自己関与」の醸成

背景: 単に「当社の家はすごいです」という記事（受動的情報）を読ませるだけでは、記憶に残りません。
メカニズム: 自ら指を動かしてゲームをクリアし、「ハイスコア」や「専門家級」といった判定をもらうことで、ユーザーは「自分で体験して勝ち取った」という肯定感を得ます。結果として、そのサイトや会社に対する心理的距離がグッと縮まります。

③ インセンティブ（特典）との相性が抜群に良い

背景: サイト訪問者にいきなり「個人情報を入れて資料請求してください」と求めても、心理的ハードルが高く拒絶されます。
メカニズム:
1. ゲームで遊ぶ
2. 高スコアが出る（またはクリアする）
3. 「クリア特典：高気密住宅の失敗しない選び方ガイドPDFプレゼント」「見学時にゲーム画面提示でQUOカード」

というストーリーを作ると、「遊んだご褒美として情報（またはノベルティ）をもらう」という自然な流れができるため、CVRが飛躍的に高まります。

3. 成功させるための重要ポイント

どれだけ面白いゲームを作っても、マーケティング上の目的（CV＝来場・資料請求）に繋がらなければ単なる「遊び」で終わってしまいます。

ゲーム時間は「30秒〜45秒」で終わらせる長すぎるゲームは途中で離脱されます。サクッと遊べてすぐ結果が出るテンポ感が重要です。
リザルト画面に「専門知識のワンポイント解説」を入れるゲーム終了直後が最もユーザーの集中力が高まっています。ここに「C値0.5以下が理想な理由」などを短文で掲載します。
リザルト画面のすぐ下に「次へのアクションボタン」を配置する「この快適さをモデルハウスで体験してみる（予約）」などのボタンを大きく配置し、熱が冷めないうちに誘導します。

単なるエンタメではなく、「知識の獲得」と「行動の誘導」をセットにした教育型マーケティングツールとして設計することで、非常に高い費用対効果を期待できます。