スクショを送ってフォームのデザインを合わせる方法

最終更新日: 2026-10-15

FORMLOVAでは、参照スクリーンショットを対応AIチャットへ送り、フォームの色・文字・ボタンの雰囲気を合わせるよう依頼できます。まず未公開下書きを用意し、読み取った要素とプレビューを確認して調整します。参照ページ全体の完全複製ではなく、入力しやすいフォームへ見た目の方向性を移す使い方です。

この記事では、既存のFORMLOVA LPを使った観測例を残しながら、自分の受付で試す依頼文と比較項目を示します。色が似たかだけでなく、スマホとPCでラベルや送信ボタンが読めるかを確認しましょう。

まずはスクショを1枚送ります

今回使った入力文言は、とても短いです。

このスクショにデザインを合わせてほしい。

この一言と一緒に、参照したい画面のスクリーンショットを送ります。今回の例では、FORMLOVAのLPを使いました。オフホワイトの背景、黒に近い文字、強めのピンクのアクセント、全体としてミニマルでクリーンな雰囲気を持っている画面です。

ここで大事なのは、最初から色コードやフォント名を指定しなくていいことです。もちろん、指定したければそれでも大丈夫です。でも、まずは「この雰囲気にしたい」をそのまま渡せるほうが、実務では速いと思っています。

私はこの guide で、その速さを見てほしいです。フォームの見た目を言葉で説明する前に、まず見せる。FORMLOVAはこの順番と相性がいいです。

デザインの参照としてFORMLOVAのLPスクリーンショットを渡した画面

FORMLOVAは、何を読み取ったかを言葉で返してくれます

返答でよかったのは、単に「適用しました」で終わらなかったことです。何を読み取ったのかを、ちゃんと言葉にして返してくれました。

今回の返答では、次のような内容が出ています。

背景色: オフホワイト #F5F4F0
文字色: ほぼ黒 #1A1A1A
アクセントカラー: ビビッドピンク #FF1F6E
フォント: 太めのゴシック系
全体: ミニマル・クリーン

この説明があると、認識のズレが少なくなります。たとえば「ピンク寄りにしたかったのに、思ったより赤っぽいな」と感じたら、ここを起点に言い直せます。「もっと淡いピンクにして」「フォントはもう少しやわらかくして」といった調整もしやすいです。

つまり、FORMLOVAはスクショを見て終わりではなく、どう解釈したかまで見せてくれるんです。私はここがかなり大事だと思っています。見た目だけ変わるより、解釈の中身が見えたほうが、次の修正が楽になるからです。

返答の最後では、preview もすぐ返していました。この流れが自然です。読み取り内容を確認して、すぐ画面で見る。デザイン調整では、この往復が一番効率的です。

preview を見ると、雰囲気がかなり寄っています

実際に preview を開くと、フォームの見た目はかなり変わっていました。

今回の例では、背景はオフホワイト寄りになり、文字は黒で締まり、送信ボタンはビビッドピンクになっています。さらに、フォントも Noto Sans JP に寄せた形で整えられていました。つまり、ただ色を変えただけではなく、LPのトンマナをフォームUIに移し替えようとしているのがわかります。

この時点で見てほしいのは、完全一致しているかどうかではありません。フォームとしての役割を保ちながら、元のページの雰囲気をどこまで持ってこられているかです。

LPのヒーロー表現とフォーム画面では、そもそも役割が違います。LPはブランドの世界観を伝える場所で、フォームは入力しやすさが重要な場所です。だから、完全に同じ見た目を目指すというより、雰囲気を揃えると考えたほうが自然です。

今回の preview は、まさにそのバランスが取れていました。見た瞬間に「同じブランドの画面だな」と感じられる一方で、フォームとしての読みやすさや入力しやすさは崩れていません。

自分のフォームで、変更前後を比べる

スクショから調整するときは、下書きの変更前プレビューを手元に残してから、同じフォームの変更後と比べます。上のLPの例とは別に、次の依頼で自分の受付を試せます。これは提案で、今回新たに実行した結果ではありません。

問い合わせフォームを未公開で作ってください。氏名・メール・問い合わせ内容の3項目にし、まず標準デザインのプレビューを見せてください。まだ公開しないでください。

プレビューを見た後、利用権限のある自社LPのスクショを添えて依頼します。個人情報や管理画面の機密情報が映る部分は外してから共有してください。

添付した自社LPのスクショに、今の下書きの背景色・文字・ボタンの雰囲気を合わせてください。質問項目は変えず、読み取りにくい色や不明なフォントは無理に再現せず教えてください。変更内容とプレビューを見せてください。

比較するもの	確認すること
背景と文字	参照に寄せても、質問文と入力値が読める
ボタン	背景と区別でき、ボタン内の文字も読める
項目	ラベル・必須・順番がデザイン変更で変わっていない
文字と余白	スマホで長いラベルが切れず、PCで間延びしない
フォント	対応フォントや代替フォントで自然に表示される

下書き作成とデザイン調整は無料で使えます。スクショの読み取りは画像を扱えるAIクライアント側の能力にも依存し、利用条件や費用は各提供元に従います。完全な配置一致や、スクショのフォントを必ず特定できることは保証しません。

自社LPと問い合わせフォームの見た目を比べる

無料で下書きを作り、スクショを参照して色やボタンを調整できます。変更前後のプレビューで、ブランドの雰囲気と入力しやすさを確認できます。

無料登録して、スクショからデザインを試す

登録・メール確認の後、対応AIチャットへFORMLOVAを接続し、下書き作成とスクショ付きの依頼を順に行います。プレビューでは回答は保存されません。

完全一致ではなく「寄せる」と考えるのがコツです

ここは誤解しないように書いておきたいです。FORMLOVAはスクショを見てかなり雰囲気を寄せられますが、何でも完全一致するわけではありません。

理由は単純で、参照元の画面とフォーム画面では役割が違うからです。LPのトップは、見せるためのUIです。フォームは、入力してもらうためのUIです。見せ方を寄せながらも、入力欄やボタンはフォームとして成立する形に置き換わります。

だから、言い方としては「同じ見た目にする」より「雰囲気を合わせる」が正確です。

その前提で見ると、今回の結果はかなり実用的です。色も、フォントも、全体の空気感も、言葉にしづらい部分をちゃんと拾ってくれています。最初のたたき台としては十分に強いですし、もし少し違うところがあっても、次に短い一言で修正できます。

たとえば、このあとに続けるならこんな指示で十分です。

もう少し余白を広くして

ボタンのピンクを少し落ち着かせて

見出しをもう少しブランドっぽくして

スクショで方向を決めて、会話で最後の調整をする。この組み合わせが一番扱いやすいと思っています。

最初にやってみるなら、この流れがおすすめです

この guide で伝えたい流れは、とてもシンプルです。

まず下書きフォームを作る
参照したいスクショを送る
「このスクショにデザインを合わせてほしい」と頼む
読み取った要素を確認する
preview を見て、必要なら一言だけ追加で直す

この順番なら、色コードやフォント名を知らなくても、かなり速く見た目を整えられます。

特に、自社LP、イベントページ、キャンペーンページの雰囲気にフォームを寄せたいときには有効です。フォームだけ浮いて見えるのを防げますし、ブランドの一貫性も出しやすくなります。

もし最初に何を打てばいいか迷ったら、これで十分です。

このスクショにデザインを合わせてほしい。

変更前後で色・必須表示・ボタンを比べ、直す点を1つずつ伝えてください。フォームと完了画面の確認が済んだら公開前レビューへ進みます。カスタム自動返信まで設定する場合はスタンダード以上の範囲です。

執筆・確認情報

この記事はFORMLOVAの自社ブログ記事です。筆者はFORMLOVAの開発者です。2026-10-15に、スクショは対応AIクライアントが解釈してデザインへ反映する経路、対応フォント、プレビューと料金定義を再確認しました。既存LPの観測例を保持し、新しい依頼文は未実行の提案として追加しています。料金、機能、上限値などの条件は変更される可能性があるため、最新情報は各サービスの公式ページで確認してください。個人情報、採用、法務、医療、金融に関わるフォーム運用は、各社の規程や専門家の確認に合わせてください。