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
具体的な手順
（ChatGPTに夢を語る）
（相談・提案を繰り返し、改善策を割り出していく）
（企画案・プロジェクトにする）
（Geminiにどのような形式でそのプロジェクトの内容が欲しいのかを指示する）
何用なのかを明確にする（重要）
という形になります。考え方の基本はPDCAです。
そのステップごとにPDCAを繰り返して、納得いくところまで改善したら次のステップへ行っている感じです。
実質、自分でやっているところは企画（監修）くらいです。場合によっては原稿作成やデータの抽出も行いますが、UIデザインや装飾（CSS）デザイン、UIに沿った文章構成・SPA（コード）作成などは全てGeminiでやってくれています。
ちなみにCSSでおかしい所などあったら、自分で直してもいいんですけど、面倒な時は、Geminiにおかしい部分のSS投げて、「こここうなっちゃったんでこうできますか？」みたいなこというと改善策いってくれたりします。（優秀すぎ）
Geminiに実際に実行している図。元のURLを元にHTMLとCSSに分けてもらっています。
AI活用の近況メモ
Gemini は無料の範囲内で使っているんですが、無料！？というほどすごい。（人間に頼んだら、お金かかる上に遅い）
画像や動画生成・加工も優秀ですが、私は今のところ データの可視化 をいろいろ試しています。
データは普遍的なので、抽出（プロンプト）の仕方で形（伝え方）を変えることが出来ます。これをGeminiでやっています。
GMOさんのこちらの記事が凄く参考になります。↓
SPA埋め込みの便利さ
WordPress・note・Notionなどにコードを貼るだけで、ページの中にデータを「パーツ」としてドーンと載せられる。
記事の途中でグラフや統計を見せたいときに最高です。
イメージでもいいのですが、AIはまだイメージ生成よりも文法的なテキストの忠実性が高いので、クローラーの読み取りを考えてもテキスト形式が有利ですね。
市場調査もAI任せ
Googleデータからの統計を参照してくれるので、わざわざ調べ直す必要もなし。
Search Console やキーワード調査のデータは CSV で落として投げる必要がありますが、戦略の方針を伝えるとそれに沿った提案をしてくれるので「SUGEE…」ってなってます（笑）
役割分担
- ChatGPT → 相談・創造役
- Gemini → 実装・実行役
で使い分けています。
Notionにも手を出してみた
共有用資料、メモ、プロジェクト・タスク管理にめちゃくちゃ使えそう。
今は ChatGPT のみ課金中ですが、Google Workspace もコスパがいいので、覚えながら導入を検討中です。
まとめ
人がやっていた作業を AI に置き換えるだけで、10日分の作業が1日に圧縮された感覚。
しかもコミュニケーションの齟齬が減るので、効率が爆上がりしています。
あとは「AIを使い倒す側」で居続けられるかどうか。
これが一番大事ですね。今までにない（独自性）、アイディアや企画を考えられることが重要です。
おまけ
AI同士は平和（競争がなく、平等社会）なので役割分担で動きます。
人間のような感情の波がないので、彼らは尊重し合える仲です。
例えばChatGPTに「Geminiにこれやってもらいたいからこれやってー」といっても嫉妬しません。
普通にGeminiの為のプロンプト作ってくれます。（やさC）
平和社会ですね（笑）
お互いに〇〇のことどう思ってますか？と聞いても、悪口じゃなくて、「ここが強くて、ここが弱い。だからこれはこちらでおまかせください。」みたいなこと言ってくれます。
これこそ理想的なTheビジネス仲ですよね。競合だけど役割が違うというのが一番理想です。
ﾉﾘを覚えるChatGPTの図
