AIに話しかけるだけでWebアプリケーションをフルスタックで構築できるLovableは、まさに画期的なサービスです。
しかし、手軽にアプリを生成できる一方で、「PCでは綺麗なのに、スマホで見るとなぜか表示が崩れる…」という経験をした方も少なくないのではないでしょうか。
テキストがはみ出したり、ボタンが重なったり、意図しない横スクロールが発生したり。
こうしたレスポンシブデザインの課題は、アプリの使いやすさやプロフェッショナルな印象を大きく左右します。
この記事では、CSSの専門知識がなくても、LovableのAIへの「指示の出し方」を少し工夫するだけで、スマホ表示の崩れを解決し、あらゆるデバイスで美しい表示を実現するための具体的な指示パターンを徹底解説します。
もう表示崩れで悩む必要はありません。
この記事を読めば、あなたも今日からレスポンシブデザインの微調整を自在に行えるようになります。
なぜLovableでもレスポンシブの微調整が必要なのか？
Lovableは、ReactやTailwind CSSといったモダンな技術スタックを使い、初めからある程度レスポンシブに対応したコードを生成してくれます。では、なぜ追加の微調整が必要になるのでしょうか。その理由と、よくある表示崩れのパターンを理解することが、的確な指示を出すための第一歩です。
AIによる自動生成の限界とTailwind CSSの特性
Lovableが採用しているTailwind CSSは「ユーティリティファースト」と呼ばれる設計思想のフレームワークで、flex（フレックスボックスレイアウト）、pt-4（4単位のパディングを上に追加）、text-lg（大きいフォントサイズ）といったクラスを組み合わせてデザインを構築します。これらは画面幅に応じたクラス（例：md:flex は中サイズ以上の画面でflexを適用）も用意されており、レスポンシブデザインを効率的に実装できます。
しかし、AIはあくまで一般的なデザインパターンに基づいてコードを生成します。そのため、あなたが入力したテキストの長さ、画像の縦横比、あるいは追加したカスタムコンポーネントなど、個別のコンテンツ内容までは完全に最適化しきれないケースが出てきます。その結果、「AIが生成した時点では綺麗だったのに、実際のコンテンツを入れたら崩れた」という状況が起こり得るのです。
よくあるスマホ表示の崩れ具体例
Lovableで開発していると、特にスマートフォンなどの小さい画面で以下のような問題に直面することがあります。
- テキストのはみ出し: 長い単語やURLが改行されず、画面からはみ出して横スクロールが発生する。
- 要素の重なり: PCでは横並びだった要素が、スマホの狭い画面に収まりきらずに重なってしまう。
- ボタンや入力欄の崩れ: 横幅が足りず、ボタン内のテキストが2行になったり、入力欄が極端に小さくなったりする。
- 画像サイズの不一致: 画像がコンテナのサイズに合わず、大きすぎたり小さすぎたりする。
- 意図しない余白: PCでは適切だった余白が、スマホでは過剰に見えてしまい、コンテンツが間延びして見える。
これらの問題は、ほとんどの場合、CSSを微調整することで解決できます。そしてLovableの最大の強みは、このCSSの調整作業を、コードを直接編集することなくAIへのチャット指示で完結できる点にあります。
【基本編】レスポンシブ調整の定番指示パターン
まずは、使用頻度が高く、これだけで多くの表示崩れに対応できる基本的な指示パターンから見ていきましょう。ポイントは「どのデバイスで」「どうなってほしいか」を具体的に伝えることです。
「スマホでは〇〇して」- デバイスサイズを指定した指示
Tailwind CSSには、特定の画面幅以上でスタイルを適用するためのプレフィックス（sm:, md:, lg:など）があります。しかし、これを覚える必要はありません。LovableのAIは自然言語を理解してくれるので、以下のように直感的に指示できます。
指示例1：カラム数の変更
PCで3列表示のカードリストを、スマホでは1列で表示したい場合。
「このカードリストですが、PCでは3列表示のままで、スマホで表示した時だけ1列になるように変更してください。」
こう指示することで、AIは適切なブレークポイント（例: md:grid-cols-3）を適用し、スマホ（デフォルト）では1列、中サイズ以上の画面では3列というスタイルを生成してくれます。
指示例2：表示順序の入れ替え
PCでは「画像が左、テキストが右」のレイアウトを、スマホでは「画像を上、テキストを下」にしたい場合。
「このセクションのレイアウトを、スマホの時だけ画像のほうがテキストより上に来るように順番を入れ替えてください。」
これはCSSのFlexboxにおけるflex-directionの制御にあたりますが、Lovableならこんなに簡単な言葉で実現できます。
Flexboxを使ったレイアウト調整の指示
近年のWebレイアウトの要であるFlexbox。その強力な配置機能も、Lovableなら簡単な言葉で操れます。「中央揃え」「両端揃え」といったキーワードが有効です。
指示例3：要素の整列
ヘッダー内のロゴ、メニュー、ログインボタンを綺麗に配置したい場合。
「ヘッダーの要素について、左端にロゴ、右端にログインボタンを配置して、その間のメニュー項目は中央に均等な間隔で並べてください。」
この指示は、justify-content: space-between;やalign-items: center;といったCSSプロパティをAIが判断し、適切なTailwind CSSクラス（flex justify-between items-centerなど）に変換してくれます。
指示例4：縦方向の中央揃え
カードの高さがバラバラで、中のテキストが上詰めに表示されてしまう場合。
「このカードコンポーネント内のテキストやボタンを、カードの高さに対して常に上下中央に表示されるようにしてください。」
このように指示すれば、カード内でFlexboxを適用し、align-items: center;を適用してくれます。
【応用編】CSSプロパティ名で指示して精度を上げる
基本的な指示で解決しない、より細かいデザインの問題は、具体的なCSSプロパティ名を少しだけ添えて指示することで、AIの理解度が格段に上がり、一発で望む結果を得やすくなります。これは結果的に、修正のやり取りを減らし、Lovableのクレジット節約にも繋がる賢い方法です。
max-width でコンテンツのはみ出しを防ぐ
画像が親要素の幅を無視してはみ出してしまうのは、非常によくある問題です。これは画像の幅が固定値で指定されているか、特に指定がなく元の画像サイズで表示されている場合に起こります。
指示例：
「この記事のメイン画像が、スマホ表示の際に画面からはみ出してしまいます。画像の幅がコンテナの幅を超えないように、CSSの max-width プロパティを100%に設定してください。」
このようにmax-width: 100%;という具体的な指示を加えることで、AIは確実に意図を汲み取り、max-w-full というTailwind CSSクラスを適用してくれます。これにより、画像はコンテナの幅より大きくならず、レイアウト崩れを防ぎます。
word-break で不自然な改行を制御する
特に見出しやテーブルのセル内で、長い英単語やURLがあると、その文字列が改行されずにコンテナを突き破ってしまいます。これを解決するのがword-breakプロパティです。
指示例：
「このテーブルのID列にある長い文字列が原因で、テーブル全体のレイアウトが崩れています。このセル内のテキストに word-break: break-all; を適用して、単語の途中でも強制的に改行されるようにしてください。」
break-allは強力な指定ですが、意図しない場所で単語が分割される可能性もあります。代わりにbreak-word（またはoverflow-wrap: break-word;）を使うと、単語をできるだけ維持したまま改行する、より自然な挙動になります。AIに「break-wordを使って、より自然に改行して」と指示を調整することも可能です。
min-height でページのフッター落ちを防ぐ
コンテンツ量が少ないページで、フッターがページの中途半端な位置に上がってきてしまい、その下に不自然な空白ができてしまうことがあります。これは、ページのメインコンテンツ部分の高さが足りないために起こります。
指示例：
「コンテンツが少ないページでフッターが画面の途中に表示されてしまいます。ヘッダーとフッターを除いたメインコンテンツエリアの高さが、最低でも画面の表示領域いっぱいになるように、min-height を 100vh に設定してください。」
100vhは「ビューポート（表示領域）の高さの100%」を意味する単位です。この指示により、AIはメインコンテンツを囲む要素にmin-h-screen（Tailwind CSSでmin-height: 100vh;を意味するクラス）を適用し、フッターが常に最下部に固定されるようになります。
実践！Visual Editsとチャットを組み合わせた効率的な調整術
Lovableの強みは、チャットによるAIとの対話だけではありません。プレビュー画面を直接操作してデザインを編集できる「Visual Edits」モードの存在が、開発効率を飛躍的に高めます。この2つの機能を組み合わせることで、より直感的かつスピーディにレスポンシブ調整が可能です。
1. まずは「Visual Edits」で大まかに調整
多くの場合、レスポンシブで問題になるのは余白（マージンやパディング）や文字サイズです。これらの調整は、Visual Editsモードを使うのが最も効率的です。
- プレビュー画面で、調整したいデバイスの表示（スマホ、タブレットなど）に切り替えます。
- 画面上部の「Visual Edits」をオンにします。
- 調整したい要素をクリックし、表示されるパネルから余白、フォントサイズ、色などを直感的に変更します。
数値を入力するたびにリアルタイムでプレビューが更新されるため、試行錯誤が非常に簡単です。特に、「スマホではここの余白を少し詰めたい」「このボタンの文字をもう少し大きくしたい」といった微調整は、チャットで指示するよりも速く完了できます。
2. 複雑な調整はチャットで指示
Visual Editsでは対応しきれない、より構造的な変更はチャットの出番です。
- 要素の表示/非表示の切り替え（例：「スマホではこの検索バーを非表示にしてください」）
- レイアウト構造の変更（例：「PCでは横並びのこの要素を、スマホでは縦積みにしてください」）
- 今回紹介したような、特定のCSSプロパティを使った複雑な制御
まずVisual Editsで見た目を整え、それで解決しない構造的な問題をチャットでAIに解決してもらう。この「Visual Edits → チャット」というワークフローを意識することで、無駄なやり取りを減らし、クレジットを効率的に使いながら開発を進められます。
Lovableの基本的な使い方から、AIクレジットの仕組み、今回紹介しきれなかった応用機能までを網羅した完全ガイド記事も別途用意しています。Lovableをさらに深く使いこなしたい方は、ぜひそちらも合わせてご覧ください。
まとめ：AIへの「伝え方」をマスターして、デザインを意のままに
この記事では、AIソフトウェアエンジニア「Lovable」で生成したアプリケーションのスマホ表示が崩れた際に、CSSの知識が少なくてもレスポンシブデザインを微調整するための具体的な指示パターンを解説しました。
重要なポイントを振り返りましょう。
- Lovableが生成するコードは優秀ですが、コンテンツに応じた微調整は必要です。
- 「スマホではこうして」といったデバイス指定の指示が基本です。
max-widthやword-breakなど、少しだけCSSプロパティ名を添えると、AIへの指示精度が格段に向上します。- 簡単な余白や文字サイズは「Visual Edits」、複雑なレイアウト変更は「チャット」と使い分けるのが効率的です。
Lovableは、非エンジニアやデザイナーであっても、プロ品質のWebアプリケーションを迅速に構築できる強力なツールです。表示崩れは、もはや専門家でなければ解決できない問題ではありません。AIへの「伝え方」さえマスターすれば、デザインの細部にまでこだわった、ユーザーにとって本当に使いやすいサービスを生み出すことができます。
まずは、今回ご紹介した指示パターンを試してみてはいかがでしょうか。Lovableの公式サイトでは、クレジットカード不要で始められる無料プランが用意されています。実際に手を動かして、AIとの対話による開発の未来を体験してみてください。
また、Lovableの料金プランや登録方法、さらに高度な使い方について詳しく知りたい方は、【2026年完全版】Lovable(ラバブル)とは？AIでWebアプリを自動生成する使い方・料金・特徴を徹底解説で網羅的に解説していますので、ぜひご活用ください。