フォームの見た目を整えたいとき、色コードやフォント名を最初から言葉にするのは意外と大変です。頭の中では「このページみたいな雰囲気にしたい」と思っていても、それをテキストだけで説明しようとすると、急に難しくなります。FORMLOVAでは、そこをスクリーンショット1枚から始められます。まず参照したい画面を見せて、「このスクショにデザインを合わせてほしい」と頼むだけです。すると、背景色、文字色、アクセントカラー、フォント、全体のトーンを読み取り、フォーム側に反映してくれます。今回は、FORMLOVAのLPを例にして、その流れをそのまま見ていきます。
まずはスクショを1枚送ります
今回使った入力文言は、とても短いです。
このスクショにデザインを合わせてほしい。
この一言と一緒に、参照したい画面のスクリーンショットを送ります。今回の例では、FORMLOVAのLPを使いました。オフホワイトの背景、黒に近い文字、強めのピンクのアクセント、全体としてミニマルでクリーンな雰囲気を持っている画面です。
ここで大事なのは、最初から色コードやフォント名を指定しなくていいことです。もちろん、指定したければそれでも大丈夫です。でも、まずは「この雰囲気にしたい」をそのまま渡せるほうが、実務では速いと思っています。
私はこの guide で、その速さを見てほしいです。フォームの見た目を言葉で説明する前に、まず見せる。FORMLOVAはこの順番と相性がいいです。
FORMLOVAは、何を読み取ったかを言葉で返してくれます
返答でよかったのは、単に「適用しました」で終わらなかったことです。何を読み取ったのかを、ちゃんと言葉にして返してくれました。
今回の返答では、次のような内容が出ています。
- 背景色: オフホワイト
#F5F4F0 - 文字色: ほぼ黒
#1A1A1A - アクセントカラー: ビビッドピンク
#FF1F6E - フォント: 太めのゴシック系
- 全体: ミニマル・クリーン
この説明があると、認識のズレが少なくなります。たとえば「ピンク寄りにしたかったのに、思ったより赤っぽいな」と感じたら、ここを起点に言い直せます。「もっと淡いピンクにして」「フォントはもう少しやわらかくして」といった調整もしやすいです。
つまり、FORMLOVAはスクショを見て終わりではなく、どう解釈したかまで見せてくれるんです。私はここがかなり大事だと思っています。見た目だけ変わるより、解釈の中身が見えたほうが、次の修正が楽になるからです。
返答の最後では、preview もすぐ返していました。この流れが自然です。読み取り内容を確認して、すぐ画面で見る。デザイン調整では、この往復が一番効率的です。
preview を見ると、雰囲気がかなり寄っています
実際に preview を開くと、フォームの見た目はかなり変わっていました。
今回の例では、背景はオフホワイト寄りになり、文字は黒で締まり、送信ボタンはビビッドピンクになっています。さらに、フォントも Noto Sans JP に寄せた形で整えられていました。つまり、ただ色を変えただけではなく、LPのトンマナをフォームUIに移し替えようとしているのがわかります。
この時点で見てほしいのは、完全一致しているかどうかではありません。フォームとしての役割を保ちながら、元のページの雰囲気をどこまで持ってこられているかです。
LPのヒーロー表現とフォーム画面では、そもそも役割が違います。LPはブランドの世界観を伝える場所で、フォームは入力しやすさが重要な場所です。だから、完全に同じ見た目を目指すというより、雰囲気を揃えると考えたほうが自然です。
今回の preview は、まさにそのバランスが取れていました。見た瞬間に「同じブランドの画面だな」と感じられる一方で、フォームとしての読みやすさや入力しやすさは崩れていません。
この guide では before / after で見るのがいちばんわかりやすいです
この手のデザイン記事は、文章だけで説明するより before / after で見たほうが伝わります。
before の段階では、フォームは標準的な下書きの見た目です。そこに対して、スクショを渡したあとは、背景、文字、ボタン、フォントの印象が変わります。特に今回の例では、送信ボタンのピンクがかなり効いていて、FORMLOVAのLPの雰囲気に一気に寄っています。
私なら、この記事では次の差分を見てほしいです。
- 背景色の変化
- ボタン色の変化
- フォントの印象
- 全体のミニマルさ
逆に、「完全に同じ余白か」「1px単位で一致しているか」は主題にしません。そこを求める記事ではないからです。この guide は、スクショ1枚から実務で使えるトンマナ調整がどこまでできるかを見せる記事です。
before
after
完全一致ではなく「寄せる」と考えるのがコツです
ここは誤解しないように書いておきたいです。FORMLOVAはスクショを見てかなり雰囲気を寄せられますが、何でも完全一致するわけではありません。
理由は単純で、参照元の画面とフォーム画面では役割が違うからです。LPのトップは、見せるためのUIです。フォームは、入力してもらうためのUIです。見せ方を寄せながらも、入力欄やボタンはフォームとして成立する形に置き換わります。
だから、言い方としては「同じ見た目にする」より「雰囲気を合わせる」が正確です。
その前提で見ると、今回の結果はかなり実用的です。色も、フォントも、全体の空気感も、言葉にしづらい部分をちゃんと拾ってくれています。最初のたたき台としては十分に強いですし、もし少し違うところがあっても、次に短い一言で修正できます。
たとえば、このあとに続けるならこんな指示で十分です。
もう少し余白を広くして
ボタンのピンクを少し落ち着かせて
見出しをもう少しブランドっぽくして
スクショで方向を決めて、会話で最後の調整をする。この組み合わせが一番扱いやすいと思っています。
最初にやってみるなら、この流れがおすすめです
この guide で伝えたい流れは、とてもシンプルです。
- まず下書きフォームを作る
- 参照したいスクショを送る
- 「このスクショにデザインを合わせてほしい」と頼む
- 読み取った要素を確認する
- preview を見て、必要なら一言だけ追加で直す
この順番なら、色コードやフォント名を知らなくても、かなり速く見た目を整えられます。
特に、自社LP、イベントページ、キャンペーンページの雰囲気にフォームを寄せたいときには有効です。フォームだけ浮いて見えるのを防げますし、ブランドの一貫性も出しやすくなります。
もし最初に何を打てばいいか迷ったら、これで十分です。
このスクショにデザインを合わせてほしい。
そこから preview を見て、「もう少しこうしたい」を足していきましょう。次は、自動返信メールを整えるか、公開前レビューへ進むのが自然です。
