Webデザイン・UIの頼み方

レスポンシブ

Responsive design

画面の幅に合わせて、並び方が変わるつくり。

使いどころ　スマホでも崩れずに見せたいとき。

コピペ用プロンプト

[ ] のところを書きかえて使ってください。英語のほうが伝わりやすいツールもあります。

日本語

レスポンシブにしてください。パソコンでは[3列]、スマホでは[1列]に。スマホで横にスクロールしないように。

English

Make it responsive: [3 columns] on desktop, [1 column] on mobile, with no horizontal scrolling on phones.

ひとりAIラボ作成のテンプレートです（各社の公式ガイドの文ではありません）。

レスポンシブが各社の公式プロンプトガイドに載っているか
ガイド	記載
v0	載っている^[1]
Lovable	載っている^[2]

確認日 2026年11月2日。公式ガイドのページを開いて、本文にこの言葉（英語）が出てくるかを見ました。「公式記載なし」は、出典のページに見当たらなかったという意味です。

上のコピペ用プロンプトの日本語版を写して、[ ] を自分の内容に書きかえ、v0 の無料版（1日7メッセージ）で作りかけの画面に1回だけ足して、前と見くらべてください。

どのAIに頼むか（v0・Bolt などの無料版）は開発する人のAIの使い分け（UI試作）にまとめています。