【実演】Gemini 3.0生成LPの修正術：スマホ表示を完璧にする「微調整」ワークフロー

はじめに

Gemini 3.0（Gemini 3 Pro / Flash）の登場により、AIが生成するWebデザインの精度は格段に上がりました。以前のようにデザインが大きく崩れることは少なくなりましたが、それでも「レスポンシブ対応」には課題が残ります。

特に日本語のLP制作において避けて通れないのが、「PCでは良い位置で改行されているが、スマホで見ると一文字だけ改行されて読みづらい」といった現象です。今回の動画では、こうした微細なレイアウト調整を、コードエディタ（VS Code）とマルチモーダルAI（Google AI Studio）を駆使して修正するワークフローを実演します。

使用機能と環境

• Google AI Studio (Gemini 3 Pro): コードの生成・修正指示に使用。
• VS Code (Visual Studio Code): 生成されたHTML/CSSの編集・確認。
• Chrome DevTools: 各デバイス（iPhone SE, Galaxy S8+等）でのレスポンシブ表示確認。

実演ワークフロー解説

1. 開発者ツールで崩れを特定する

まずはブラウザのF12キーを押して開発者ツールを開き、レスポンシブモードで表示を確認します。ここで注目すべきは、PCとスマホで同じ位置に入っている<br>（改行タグ）です。

PC画面に合わせて入れた改行が、画面幅の狭いスマホでは「文の途中で改行される」原因となり、可読性を損なうケースが多々あります。特に「～が必要です」の「す」だけが次の行に落ちてしまうような現象（いわゆる「ウィドウ」）は修正対象です。

2. VS Codeで改行をデバイスごとに制御する

修正には、Tailwind CSSなどのユーティリティクラス（またはAIが生成したCSSクラス）を活用します。

• PCのみ改行させたい場合:
  改行タグ<br>に対して、class="hidden md:block" のようなクラスを付与します。これにより、「モバイルでは非表示（hidden）、中画面以上ではブロック要素として表示（block）」という挙動になり、スマホでの不要な改行を防げます。
• スマホのみ改行させたい場合:
  逆にclass="md:hidden"を使用すれば、PCでは無視され、スマホでのみ有効な改行を作ることができます。

このコードスニペットを辞書登録しておいたり、AIに「この改行はPCのみにして」と指示することで、素早く修正が可能です。

3. マルチモーダルAIで視覚的に修正する

ボタンのレイアウト崩れやフッターの並びなど、CSSのクラス調整だけでは複雑な修正が必要な場合は、Google AI Studioのマルチモーダル機能を活用します。

手順:

1. 崩れている箇所のスクリーンショットを撮る（Win+Shift+S等）。
2. Google AI Studioに画像を貼り付ける。
3. 該当箇所のHTMLコードブロックを貼り付ける。
4. プロンプトで「このボタンの改行がおかしいので、モバイルでは1行になるように修正して」と指示する。

Gemini 3 Proなどの最新モデルは画像を認識する能力が高いため、「右にズレている」「余白がおかしい」といった視覚的な違和感を理解し、適切なコード修正案（flex-colの削除やpaddingの調整など）を即座に提示してくれます。

OKIHIRO流：建築家の視点（プロのコツ）

「100%の完璧」を追い求めすぎないこと。これがAI時代のWeb制作における重要なマインドセットです。

デバイスの画面幅は無数に存在します。iPhoneでは完璧でも、特定のAndroid端末では1文字ズレるといったことは往々にして起こります。動画内でも触れましたが、Galaxy S8+のような極端に幅が狭いデバイスに合わせすぎると、今度は他の主要デバイスでバランスが悪くなることもあります。

「主要なデバイス（iPhone SE〜Pro Max等）で破綻していなければ良しとする」という妥協点を見極めることも、スピード感を持ってWeb資産を構築する上では重要なスキルです。細部にこだわりすぎて時間を浪費するよりも、AIを活用して「合格点のクリエイティブ」を量産する方が、ビジネス全体へのインパクトは大きくなります。

まとめ

Gemini 3.0でベースを作成し、人間がVS CodeとDevToolsで微調整を行う。そして、複雑な修正は再びAIの「目」を借りて解決する。このサイクルを回すことで、高品質なLPを短時間で構築することが可能です。

ぜひ今回のテクニックを使って、あなたのLPを「スマホでも美しい」プロフェッショナルな仕上がりにアップデートしてください。