フォーム · お問い合わせフォーム
設計図面風の見積もり依頼フォーム
青焼き図面の方眼と表題欄をそのまま画面に持ち込んだ見積もりフォーム。入力欄の右に工程と前提条件を並べ、送信前に何が起きるかを見せて心理的な壁を下げます。
プレビュー
概要
青焼き図面——正確にはジアゾ複写——は19世紀半ばに発明され、20世紀を通じて建築と製造の共通言語でした。方眼、寸法線、そして右下の表題欄。この視覚言語が今も信頼を運ぶのは、それが「勝手に変更できない記録」の様式だからです。見積もりフォームにこの様式を借りるのは、単なる意匠の遊びではありません。
見積もりフォームが埋まらない本当の理由
問い合わせフォームの離脱は、入力項目の多さよりも送ったあとに何が起きるか分からないことで起きます。営業電話が来るのか、いくらから相手にしてもらえるのか、返事はいつか。この不確実性は、金額が絡む依頼ほど重くのしかかります。だから右カラムを丸ごと使い、2営業日で概算、1週間で打ち合わせ、10営業日で確定見積、最小規模30万円から、と先に開示します。値段を隠さないことが、結果的に問い合わせ数を増やします。
図面の様式が担保するもの
表題欄に図番と改訂番号を書く習慣は、その図面がいつ誰の責任で作られたかを固定するためのものです。フォームの上にこれを置くと、受け取る側の几帳面さが伝わります。寸法線で入力項目数を示すのも同じ発想で、7項目ですと明示すれば、どこまで続くのか分からない不安が消えます。破線で囲んだチェックボックスは補助線の質感を借りたもの——確定前の検討事項という含みが、複数選択の心理的コストを下げます。
仕上げの判断軸
方眼の不透明度は0.15が上限。濃紺地のフォームはコントラスト比4.5: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 に反転する。 印刷したときにインクを食わない、実務寄りの見え方になる。
建築事務所版
表題欄に敷地面積・構造・階数の欄を追加し、依頼範囲を 基本設計 / 実施設計 / 監理 に置き換える。
よくある質問
方眼の背景は画像ですか?
濃い背景でフォームは使いにくくないですか?
右カラムの情報は本当に要りますか?
方眼が入力の邪魔になりませんか?
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
スイス様式のシンプルなお問い合わせフォーム
厳格なグリッドと無装飾サンセリフで構築する、スイス国際タイポグラフィ様式のお問い合わせフォーム。色を排し、罫線・余白・タイポの階層だけで「真剣さ」を伝える設計。
建築設計図風の機能紹介
建築・CAD図面のブループリントを再構築した機能紹介セクション。シアンブルーの方眼背景・寸法線・断面記号・コールアウトで「精密に設計された製品」の信頼感を技術的なビジュアルで叩きつける尖った設計。
絞り込みと件数を先に見せる商品検索結果
左に絞り込み、上に適用中の条件、右にカードグリッドを置いた通販の検索結果ページ。各選択肢に件数を添えてゼロ件を踏ませない設計で、属性が構造化された商材の探索に向きます。