【ドラ〇もんじゃん】GeminiにSPA（シングルページアプリケーション）作ってもらった。

2025年9月1日2025年11月21日

Geminiに作ってもらったSPA（シングルページアプリケーション）

デジタルマーケティング施策

ブランディング戦略

Geminiに作ってもらったLP↓

＼ byGemini　動的ワイヤーカンプ（？）／

伝説への、扉が開かれる。

※スクロールトリガーになっているのでぜひスクロールしてみてください。

画像だけ適当に設置しています。

（自作の構想デモです。趣味で作りました。）

SPAについて知りたい方はこちらをタップ

1. SPAとは

SPA（Single Page Application）は、最初に1枚のHTMLとJavaScriptを読み込み、その後はサーバーからデータ（JSONなど）だけを受け取ってブラウザ内で画面を書き換える仕組みのWebアプリです。
従来のページごとに再読み込みする方式（MPA）と比べて、アプリのようにスムーズに使えます。

2. SPAのメリット・デメリット

メリット

サーバーを介さない分、表示が速い
ページ全体をリロードせず、必要なデータだけ受け取ってその場で更新するため、操作感が軽快。
アプリのような体験
スマホアプリに近い滑らかなUIを実現できる。
APIとの相性が良い
REST APIやGraphQLを使ってデータを柔軟にやり取りできる。
フロントとバックエンドの分離
開発チームの分担がしやすく、機能追加も柔軟。

デメリット

SEOに弱い
JavaScriptでレンダリングするため、検索エンジンに認識されにくい。SSRやプリレンダリングで補う必要あり。
初回読み込みが重い
JavaScriptをまとめて読み込むため、最初の表示に時間がかかることがある。
開発が複雑化
状態管理やセキュリティ設計が難しく、学習コストも高め。

3. どのような使い方をするべきか

SPAが適しているケース
- 操作や画面遷移が頻繁に発生するアプリ（チャット、地図、管理画面）
- データ更新が多いツール系Webサービス
- スマホアプリに近いUIが求められるサービス
SPAが不向きなケース
- SEOで集客するブログやコーポレートサイト
- 初回表示の速さが重視されるLP
現実的な使い分け
- 情報発信・集客 → MPAやSSR
- 操作重視・ツール系 → SPA
- LPなど → MPAに一部SPA的な動きを組み込む

自社ホームページの料金部分もGeminiに投げて、きれいなUIにしていただきました。↓

デザイン苦手なので助かります…

＼モニターさま特別価格キャンペーン／

相場30万円〜のホームページを
特別価格20万円でご提供

基本構成（5ページ）

レスポンシブ対応

ロゴ・キャッチフレーズ

お問い合わせフォーム

お知らせなどの投稿設定

ファーストビュー：スライダー

バナー画像

SEO対策

※但しページ数が10頁を超える場合は1ページにつき￥10,000頂戴いたします。

※きむらぼの実績として掲載させていただくのが条件となります。

プロンプトどうやってんの？と思った方へ

ちなみにこれは、

ChatGPTに「こういうのどうですか？」

というアイディアを提案をしまくって、

次に

「これをプロジェクトにしたいのでまとめてください」

と言って、それをコピペして

Geminiに「こういうデザイン（イメージ添付）でSPAとして作成してください。」

みたいなプロンプトしています。

基本的には監修（企画）と実行の役割を自分を含めて都度入れ替えています。時にはGeminiとChatGPTの仲介役だけの時もあります。

それぞれ得意分野が違うので、基本、会話の受け取りが上手いChatGPTに相談をしまくって最終的に話をまとめてもらってGemini（実行）に投げてる感じですね。

Geminiは受け取り方がデータに基づく（人間でいう所の左脳タイプで直感が弱い）ので会話が成り立たない率が高いです。でもデータ論や実行、反映力は神です。

プロンプトが具体化しないと実行しても予想通りの結果にはならないです（笑）

ChatGPTはその点、テキトーな会話でも、直感が強いので大まかに考えていることを分かってくれます。なので相談役にはうってつけです。

インプット左脳・アウトプット右脳（施策・実行・具現化・データ論）➡Gemini

インプット右脳・アウトプット左脳（企画・相談・提案・創造）➡ChatGPT

具体的な手順

STEP

まず何がしたいのか

（ChatGPTに夢を語る）

STEP

現実を聞く

（相談・提案を繰り返し、改善策を割り出していく）

STEP

ChatGPTと話をまとめる

（企画案・プロジェクトにする）

STEP

具体的な形式にしてもらう。

（Geminiにどのような形式でそのプロジェクトの内容が欲しいのかを指示する）

STEP

WordPressならカスタムHTML用にHTMLとCSSに分けてもらう。SPAとしてならSPAという。

何用なのかを明確にする（重要）

という形になります。考え方の基本はPDCAです。

そのステップごとにPDCAを繰り返して、納得いくところまで改善したら次のステップへ行っている感じです。

STEP③の「話をまとめる」でも何回かまとめを出して、細かく内容を調整しています。

実質、自分でやっているところは企画（監修）くらいです。場合によっては原稿作成やデータの抽出も行いますが、UIデザインや装飾（CSS）デザイン、UIに沿った文章構成・SPA（コード）作成などは全てGeminiでやってくれています。

ちなみにCSSでおかしい所などあったら、自分で直してもいいんですけど、面倒な時は、Geminiにおかしい部分のSS投げて、「こここうなっちゃったんでこうできますか？」みたいなこというと改善策いってくれたりします。（優秀すぎ）

Geminiに実際に実行している図。元のURLを元にHTMLとCSSに分けてもらっています。

AI活用の近況メモ

Gemini は無料の範囲内で使っているんですが、無料！？というほどすごい。（人間に頼んだら、お金かかる上に遅い）
画像や動画生成・加工も優秀ですが、私は今のところ データの可視化 をいろいろ試しています。

データは普遍的なので、抽出（プロンプト）の仕方で形（伝え方）を変えることが出来ます。これをGeminiでやっています。

GMOさんのこちらの記事が凄く参考になります。↓

Gemini Advancedでデータ分析をやってみた（外部リンク） – GMO

SPA埋め込みの便利さ

WordPress・note・Notionなどにコードを貼るだけで、ページの中にデータを「パーツ」としてドーンと載せられる。
記事の途中でグラフや統計を見せたいときに最高です。
イメージでもいいのですが、AIはまだイメージ生成よりも文法的なテキストの忠実性が高いので、クローラーの読み取りを考えてもテキスト形式が有利ですね。