フォーム · お問い合わせフォーム

設計図面風の見積もり依頼フォーム

プレビュー

vibe.itlibra.com/preview/blueprint-quote-form/

概要

青焼き図面——正確にはジアゾ複写——は19世紀半ばに発明され、20世紀を通じて建築と製造の共通言語でした。方眼、寸法線、そして右下の表題欄。この視覚言語が今も信頼を運ぶのは、それが「勝手に変更できない記録」の様式だからです。見積もりフォームにこの様式を借りるのは、単なる意匠の遊びではありません。

見積もりフォームが埋まらない本当の理由

問い合わせフォームの離脱は、入力項目の多さよりも送ったあとに何が起きるか分からないことで起きます。営業電話が来るのか、いくらから相手にしてもらえるのか、返事はいつか。この不確実性は、金額が絡む依頼ほど重くのしかかります。だから右カラムを丸ごと使い、2営業日で概算、1週間で打ち合わせ、10営業日で確定見積、最小規模30万円から、と先に開示します。値段を隠さないことが、結果的に問い合わせ数を増やします。

2営業日概算が出るまで。最初の返事までの時間を約束する
10営業日確定見積まで。いつ決められるかが逆算できる
30万円〜最小規模。相手にしてもらえるかの不安を消す

図面の様式が担保するもの

表題欄に図番と改訂番号を書く習慣は、その図面がいつ誰の責任で作られたかを固定するためのものです。フォームの上にこれを置くと、受け取る側の几帳面さが伝わります。寸法線で入力項目数を示すのも同じ発想で、7項目ですと明示すれば、どこまで続くのか分からない不安が消えます。破線で囲んだチェックボックスは補助線の質感を借りたもの——確定前の検討事項という含みが、複数選択の心理的コストを下げます。

仕上げの判断軸

方眼の不透明度は0.15が上限。濃紺地のフォームはコントラスト比4.5:1を割りやすいので、プレースホルダーの色は必ず実測してください。

相手がエンジニアや建築関係者なら様式の由来が伝わりますが、一般消費者向けサービスでは冷たく映ります。硬質さが信頼になる相手かどうかが、採否の分かれ目です。

フォームの構成要素

フォームの構成要素 ラベル ── 入力欄の上に置く label と for / id で結ぶ 補助説明 ── 入力する前に読ませる エラーは入力欄の直後に 送信は1つ。取り消しは目立たせない 必須は「※」ではなく言葉で書く ── 記号は読み上げで伝わらないことがある 項目数がそのまま完了率に効く。減らせない項目だけを残す
フォームはラベルの位置と、エラーの置き場所で使いやすさが決まります。プレースホルダをラベル代わりにすると、入力後に何の欄か分からなくなります。

使いどころ

  • 受託開発・制作会社の問い合わせ
  • 建築・内装・施工の見積もり依頼
  • 製造業の部品見積もりフォーム
  • エンジニア相手のBtoBサービス
  • 硬派・堅実さを打ち出したい窓口

このデザインの分類

カテゴリ
フォーム
スタイル
ブループリント / モノクロ / コーポレート / クール / ミニマル

背景と狙いどころ

AIへの指示文

受託開発会社の見積もり依頼フォームを、設計図面(青焼き)風のデザインで作ってください。

要件:
- 配色: 濃紺の図面地 #0e2436、罫線 rgba(160,210,245,0.14)、太罫 rgba(160,210,245,0.26)、文字 #e8f2fb、アクセントのシアン #6fd3e8、必須マークの琥珀 #ffcf6b。
- 背景の方眼は CSS の linear-gradient を4枚重ねて作る。20px の細目と 100px の太罫の二層構造にする。
- 最上部に図面の表題欄(title block)を置く: プロジェクト名 / 図番 / 縮尺・改訂番号 の3セルを罫線で区切る。
- 本体は2カラム。左が入力フォーム、右が「送信後の流れ」「見積もりの前提」「よくある確認」のスペックシート。
- 入力欄は角丸なし、1px の罫線、フォーカスでシアンの外周グロー。
- 依頼範囲のチェックボックスは破線の枠で囲む(図面の補助線の質感)。
- 見出しの下に寸法線(両端に短い縦線が付いた水平線)を引き、項目数を寸法値のように表示する。
- 最下部に「Drawn by / Checked / Sheet 1 of 1」の署名欄。
- ラベルは英字モノスペースの小文字間隔広め、入力値と本文は日本語で letter-spacing 0。
- 860px 以下で1カラムに畳む。JSは不要。

バリエーション

白図面版

背景を白 #ffffff、罫線を薄い水色 #cfe3f2、文字を濃紺 #0e2436 に反転する。
印刷したときにインクを食わない、実務寄りの見え方になる。

建築事務所版

表題欄に敷地面積・構造・階数の欄を追加し、依頼範囲を 基本設計 / 実施設計 / 監理 に置き換える。

よくある質問

方眼の背景は画像ですか?
CSSグラデーション4枚だけで描いています。画像を読まないので拡大しても劣化せず、転送量も増えません。
濃い背景でフォームは使いにくくないですか?
入力欄の背景をわずかに明るくし、フォーカス時にシアンの外周を出せば位置は明確になります。コントラスト比は4.5:1以上を確保してください。
右カラムの情報は本当に要りますか?
見積もり依頼で最大の離脱要因は「送ったあとどうなるか分からない」ことです。工程と最小金額を先に出すと完了率が上がります。
方眼が入力の邪魔になりませんか?
罫線の不透明度は0.15前後が上限です。それ以上濃いと文字と干渉して読みにくくなります。

この画面を実装する

動くサンプルとコピペできるコードを、技術別にまとめています。