フォーム · お問い合わせフォーム
設計図面風の見積もり依頼フォーム
青焼き図面の方眼と表題欄をそのまま画面に持ち込んだ見積もりフォーム。入力欄の右に工程と前提条件を並べ、送信前に何が起きるかを見せて心理的な壁を下げます。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/blueprint-quote-form/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
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 に反転する。 印刷したときにインクを食わない、実務寄りの見え方になる。
建築事務所版
表題欄に敷地面積・構造・階数の欄を追加し、依頼範囲を 基本設計 / 実施設計 / 監理 に置き換える。
このプレビューのコード
HTML・CSS・JavaScriptの1ファイルです。外部依存・広告・解析コードはありません。必須項目とメール形式をブラウザで確認し、デモの結果を表示します。見積もり依頼は送信されません。
コードを表示
<!doctype html>
<!-- Vibehaus / CC0。HTML・CSS・JSの独立したデモ。外部通信・送信処理なし。 -->
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>設計図面風の見積もり依頼フォーム — Vibehaus プレビュー</title>
<style>
:root {
--paper: #0e2436;
--paper-2: #123049;
--grid: rgba(160, 210, 245, 0.14);
--grid-bold: rgba(160, 210, 245, 0.26);
--ink: #e8f2fb;
--ink-dim: #9dbdd6;
--cyan: #6fd3e8;
--amber: #ffcf6b;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Inter", "Helvetica Neue", "Hiragino Kaku Gothic ProN",
"Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
color: var(--ink);
line-height: 1.8;
background-color: var(--paper);
/* Drafting paper: fine grid + heavier 5th line, drawn in CSS only. */
background-image:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px),
linear-gradient(var(--grid-bold) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px);
background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
-webkit-font-smoothing: antialiased;
}
.sheet {
max-width: 1080px;
margin: clamp(1rem, 4vw, 3rem) auto;
border: 2px solid var(--grid-bold);
background: rgba(14, 36, 54, 0.82);
}
/* Title block — the stamp in the corner of every technical drawing. */
.titleblock {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
border-bottom: 2px solid var(--grid-bold);
}
.titleblock > div {
padding: 0.9rem 1.1rem;
border-right: 1px solid var(--grid-bold);
}
.titleblock > div:last-child { border-right: 0; }
.tb-label {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-dim);
margin: 0 0 0.25rem;
}
.tb-value {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
font-weight: 600;
}
.tb-value.cyan { color: var(--cyan); }
.body {
display: grid;
grid-template-columns: 1.15fr 1fr;
}
@media (max-width: 860px) { .body { grid-template-columns: 1fr; } }
.col { padding: clamp(1.25rem, 3vw, 2.25rem); }
.col.left { border-right: 1px solid var(--grid-bold); }
@media (max-width: 860px) {
.col.left { border-right: 0; border-bottom: 1px solid var(--grid-bold); }
}
h1 {
margin: 0 0 0.6rem;
font-size: clamp(1.5rem, 3.4vw, 2.15rem);
line-height: 1.45;
font-weight: 700;
}
.lede {
margin: 0 0 1.6rem;
color: var(--ink-dim);
font-size: 0.95rem;
line-height: 1.85;
max-width: 46ch;
}
/* Dimension line — the visual signature of a blueprint. */
.dimension {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 1.5rem;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.72rem;
letter-spacing: 0; /* 和文を含む行なのでトラッキングは開かない */
color: var(--cyan);
}
.dimension .line {
flex: 1;
height: 1px;
background: var(--cyan);
position: relative;
}
.dimension .line::before,
.dimension .line::after {
content: "";
position: absolute;
top: -3px;
width: 1px;
height: 7px;
background: var(--cyan);
}
.dimension .line::before { left: 0; }
.dimension .line::after { right: 0; }
.field { margin-bottom: 1.15rem; }
/* Japanese labels keep letter-spacing at 0 — the mono/tracked treatment
is reserved for the Latin stamps (title block, dimension, footer). */
.field .label {
display: block;
font-size: 0.74rem;
line-height: 1.7;
letter-spacing: 0;
font-weight: 600;
color: var(--ink-dim);
margin-bottom: 0.35rem;
}
.field .req { color: var(--amber); }
input, select, textarea {
width: 100%;
font: inherit;
font-size: 0.95rem;
line-height: 1.7;
color: var(--ink);
background: rgba(18, 48, 73, 0.75);
border: 1px solid var(--grid-bold);
border-radius: 0;
padding: 0.65rem 0.8rem;
transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { min-height: 108px; resize: vertical; }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--cyan);
box-shadow: 0 0 0 2px rgba(111, 211, 232, 0.22);
}
input::placeholder, textarea::placeholder { color: rgba(157, 189, 214, 0.55); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }
.scope {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
margin-bottom: 1.15rem;
}
@media (max-width: 520px) { .scope { grid-template-columns: 1fr; } }
.scope label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
line-height: 1.7;
padding: 0.5rem 0.7rem;
border: 1px dashed var(--grid-bold);
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.scope label:hover { border-color: var(--cyan); background: rgba(111, 211, 232, 0.06); }
.scope input { width: auto; }
.submit {
width: 100%;
margin-top: 0.5rem;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.82rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
color: var(--paper);
background: var(--cyan);
border: 2px solid var(--cyan);
padding: 0.95rem 1rem;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.submit:hover { background: transparent; color: var(--cyan); }
.note {
margin: 0.75rem 0 0;
font-size: 0.78rem;
line-height: 1.75;
color: var(--ink-dim);
}
/* Right column — the "spec sheet" that answers what happens next. */
.spec { border: 1px dashed var(--grid-bold); padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; }
.spec h2 {
margin: 0 0 0.7rem;
font-size: 0.95rem;
line-height: 1.5;
font-weight: 700;
}
.spec ol { margin: 0; padding-left: 1.1rem; }
.spec li { font-size: 0.88rem; line-height: 1.8; color: var(--ink-dim); margin-bottom: 0.35rem; }
.spec li b { color: var(--ink); font-weight: 600; }
.legend {
display: grid;
gap: 0.4rem;
font-size: 0.82rem;
line-height: 1.75;
letter-spacing: 0;
color: var(--ink-dim);
}
.legend div { display: flex; justify-content: space-between; gap: 1rem; }
.legend b { color: var(--amber); font-weight: 600; }
footer.stamp {
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding: 0.8rem clamp(1.25rem, 3vw, 2.25rem);
border-top: 2px solid var(--grid-bold);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.66rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-dim);
}
.demo-note { position: relative; z-index: 6; max-width: 1100px; margin: 1rem auto; padding: 0.8rem 1rem; font-size: 13px; line-height: 1.8; letter-spacing: 0; border: 1px solid currentColor; }
:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.plan:hover, .receipt:hover, .plan-cta:hover, .cta a:hover { transform: none; }
}
</style>
</head>
<body>
<div class="sheet">
<div class="titleblock">
<div>
<p class="tb-label">Project</p>
<p class="tb-value">見積もり依頼シート</p>
</div>
<div>
<p class="tb-label">Drawing No.</p>
<p class="tb-value cyan">EST-2026-0148</p>
</div>
<div>
<p class="tb-label">Scale / Rev</p>
<p class="tb-value">1:1 · Rev.C</p>
</div>
</div>
<div class="body">
<div class="col left">
<h1>プロジェクトの寸法を教えてください</h1>
<p class="lede">
記入は2分ほど。内容を確認して、2営業日以内に概算レンジと想定スケジュールをお送りします。
</p>
<div class="dimension">
<span>入力項目</span>
<span class="line" aria-hidden="true"></span>
<span>7</span>
</div>
<form id="quote-form" onsubmit="return false;">
<div class="row">
<div class="field">
<label class="label" for="company">会社名 <span class="req">*</span></label>
<input id="company" name="company" autocomplete="organization" type="text" placeholder="株式会社トロゾ設計" required />
</div>
<div class="field">
<label class="label" for="contact-name">ご担当者名 <span class="req">*</span></label>
<input id="contact-name" name="contact-name" autocomplete="name" type="text" placeholder="山田 太郎" required />
</div>
</div>
<div class="row">
<div class="field">
<label class="label" for="email">メールアドレス <span class="req">*</span></label>
<input id="email" name="email" autocomplete="email" type="email" placeholder="you@example.com" required />
</div>
<div class="field">
<label class="label" for="budget">想定予算</label>
<select id="budget" name="budget">
<option>〜50万円</option>
<option selected>50〜150万円</option>
<option>150〜400万円</option>
<option>400万円以上 / 未定</option>
</select>
</div>
</div>
<div class="field">
<span class="label">依頼範囲（複数選択可）</span>
</div>
<div class="scope" role="group" aria-label="依頼範囲（複数選択可）">
<label><input type="checkbox" checked /> 要件整理・設計</label>
<label><input type="checkbox" checked /> UIデザイン</label>
<label><input type="checkbox" /> フロントエンド実装</label>
<label><input type="checkbox" /> 運用・保守</label>
</div>
<div class="field">
<label class="label" for="summary">プロジェクト概要 <span class="req">*</span></label>
<textarea id="summary" name="summary" placeholder="現状の課題、実現したいこと、希望納期などをご記入ください。" required></textarea>
</div>
<button class="submit" type="submit">Send Request →</button>
<p class="note">
架空の見積もりフォームです。入力は送信されません。個人情報や機密情報は入力しないでください。
</p>
<p class="note" id="demo-result" role="status"></p>
</form>
</div>
<div class="col">
<div class="spec">
<h2>お送りしたあとの流れ</h2>
<ol>
<li><b>2営業日以内</b>／概算レンジと前提条件を返信</li>
<li><b>1週間以内</b>／30分のオンライン打ち合わせ</li>
<li><b>10営業日以内</b>／確定見積書と工程表を提出</li>
</ol>
</div>
<div class="spec">
<h2>見積もりの前提</h2>
<div class="legend">
<div><span>最小規模</span><b>30万円〜</b></div>
<div><span>標準的な着手まで</span><b>3週間</b></div>
<div><span>対応時間</span><b>平日 10:00-18:00</b></div>
<div><span>契約形態</span><b>準委任 / 請負</b></div>
</div>
</div>
<div class="spec">
<h2>よくある確認</h2>
<ol>
<li>途中まで作ったものの引き継ぎも受けています</li>
<li>NDAは先に締結できます</li>
<li>金額が合わない場合は範囲の調整から相談します</li>
</ol>
</div>
</div>
</div>
<footer class="stamp">
<span>Drawn by · Trozo Studio</span>
<span>Checked · 2026.08.02</span>
<span>Sheet 1 of 1</span>
</footer>
</div>
<script>
const form = document.getElementById("quote-form");
const result = document.getElementById("demo-result");
form.addEventListener("submit", event => event.preventDefault());
form.querySelector('[type="submit"]').addEventListener("click", event => {
event.preventDefault();
if (form.reportValidity()) result.textContent = "入力の確認ができました。デモのため見積もり依頼は送信されていません。";
});
form.addEventListener("input", () => { result.textContent = ""; });
</script>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
青焼き図面——正確にはジアゾ複写——は19世紀半ばに発明され、20世紀を通じて建築と製造の共通言語でした。方眼、寸法線、そして右下の表題欄。この視覚言語が今も信頼を運ぶのは、それが「勝手に変更できない記録」の様式だからです。見積もりフォームにこの様式を借りるのは、単なる意匠の遊びではありません。
見積もりフォームが埋まらない本当の理由
問い合わせフォームの離脱は、入力項目の多さよりも送ったあとに何が起きるか分からないことで起きます。営業電話が来るのか、いくらから相手にしてもらえるのか、返事はいつか。この不確実性は、金額が絡む依頼ほど重くのしかかります。だから右カラムを丸ごと使い、2営業日で概算、1週間で打ち合わせ、10営業日で確定見積、最小規模30万円から、と先に開示します。値段を隠さないことが、結果的に問い合わせ数を増やします。
2営業日概算が出るまで。最初の返事までの時間を約束する
10営業日確定見積まで。いつ決められるかが逆算できる
30万円〜最小規模。相手にしてもらえるかの不安を消す
図面の様式が担保するもの
表題欄に図番と改訂番号を書く習慣は、その図面がいつ誰の責任で作られたかを固定するためのものです。フォームの上にこれを置くと、受け取る側の几帳面さが伝わります。寸法線で入力項目数を示すのも同じ発想で、7項目ですと明示すれば、どこまで続くのか分からない不安が消えます。破線で囲んだチェックボックスは補助線の質感を借りたもの——確定前の検討事項という含みが、複数選択の心理的コストを下げます。
仕上げの判断軸
方眼の不透明度は0.15が上限。濃紺地のフォームはコントラスト比4.5:1を割りやすいので、プレースホルダーの色は必ず実測してください。
相手がエンジニアや建築関係者なら様式の由来が伝わりますが、一般消費者向けサービスでは冷たく映ります。硬質さが信頼になる相手かどうかが、採否の分かれ目です。
フォームの構成要素
使いどころ
- 受託開発・制作会社の問い合わせ
- 建築・内装・施工の見積もり依頼
- 製造業の部品見積もりフォーム
- エンジニア相手のBtoBサービス
- 硬派・堅実さを打ち出したい窓口
このデザインの分類
背景と狙いどころ
よくある質問
方眼の背景は画像ですか？
CSSグラデーション4枚だけで描いています。画像を読まないので拡大しても劣化せず、転送量も増えません。
濃い背景でフォームは使いにくくないですか？
入力欄の背景をわずかに明るくし、フォーカス時にシアンの外周を出せば位置は明確になります。コントラスト比は4.5:1以上を確保してください。
右カラムの情報は本当に要りますか？
見積もり依頼で最大の離脱要因は「送ったあとどうなるか分からない」ことです。工程と最小金額を先に出すと完了率が上がります。
方眼が入力の邪魔になりませんか？
罫線の不透明度は0.15前後が上限です。それ以上濃いと文字と干渉して読みにくくなります。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
スイス様式のシンプルなお問い合わせフォーム
厳格なグリッドと無装飾サンセリフで構築する、スイス国際タイポグラフィ様式のお問い合わせフォーム。色を排し、罫線・余白・タイポの階層だけで「真剣さ」を伝える設計。
未保存の変更を見失わせないSaaS設定画面
左に節の目次、各節は左に説明・右に入力の2列で組むダークテーマのSaaS設定画面。変更した項目の数を数える未保存バー、役割を選べるメンバー一覧、名前を打ち込むまで押せない削除ボタンまでを備え、設定を触る人の不安を順に潰していく。
建築設計図風の機能紹介
建築・CAD図面のブループリントを再構築した機能紹介セクション。シアンブルーの方眼背景・寸法線・断面記号・コールアウトで「精密に設計された製品」の信頼感を技術的なビジュアルで叩きつける尖った設計。