Lovableに画像・ファイルを添付して指示する｜活用パターン集

Lovableのチャットには画像やファイルを添付できます。「言葉で説明しづらい見た目」を一発で伝えられるので、習熟度で生産性が大きく変わるポイントです。

効く使い方#

• Figma / 紙ラフのスクショ →「この通りに作って」
• 競合サイトのキャプチャ →「ヒーローセクションだけ真似て」
• エラー画面のスクショ →「この赤枠の箇所を直して」
• PDF仕様書 →「これに沿ってフォームを生成」

失敗しがちな指示#

「いい感じにして」だけだと、添付画像のどの要素を採用するかAIが迷います。色・配置・コピーのうち何を真似するか明示しましょう。

実例ケーススタディ：ワイヤーフレーム1枚→動くLP化#

1. FigmaのLPワイヤーをPNGで書き出し（1枚に収める）
2. 『この画像のレイアウト構造をTanStack Routerの /lp 1ページに、shadcn/uiで再現。色は src/styles.css のセマンティックトークンだけ使用』と1メッセージ
3. 確認後『ヒーロー右側のイラストはまだプレースホルダで、Lovableのimagegen で後から差し替えるからdiv＋alt属性で残しておいて』
4. 完成後にスクショで再添付『この赤丸部分の余白だけ12px広げて』とピンポイント修正

つまずきポイント集#

• 症状：複数枚渡したら関係ない要素が混ざる → 対処：1メッセージ1画像。複数枚なら『この2枚はそれぞれ別ページ用』と明記
• 症状：参考画像と全く違うデザインになる → 対処：『色・余白・タイポを参考画像どおりに。レイアウトの構造を最優先』と明記
• 症状：スクショの赤丸を読み取ってくれない → 対処：『画像の右上、ヘッダーの“ログイン”ボタン横の余白』と座標＋ラベルで言語化
• 症状：PDFをそのまま渡したら無視された → 対処：PDFは1ページずつPNG化して渡す、または重要部分だけ抜粋

よくある質問（検索意図別）#

[初心者向け] Q. スマホで撮った写真をそのまま添付しても大丈夫？

ピクセル数が大きすぎるとAIが要点を掴みにくくなります。横幅1500px程度にリサイズし、UI参考なら必要部分だけクロップしてから添付するのが鉄則。iPhoneは『写真』アプリ右上の編集→サイズ変更で30秒です。

[トラブル解決] Q. 画像を添付したのにAIが見ていない反応をする

本文中に『添付した画像のヒーロー部分を参考に』と明示的に参照させてください。送信から数十秒経過しても反映が薄いときは、別メッセージでもう一度同じ画像を貼り直すと安定します。