フォーム · お問い合わせフォーム
スイス様式のシンプルなお問い合わせフォーム
厳格なグリッドと無装飾サンセリフで構築する、スイス国際タイポグラフィ様式のお問い合わせフォーム。色を排し、罫線・余白・タイポの階層だけで「真剣さ」を伝える設計。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/swiss-contact-form/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
法人向けサービスのお問い合わせページを、スイス様式で設計してください。 要件: - 配色: オフホワイト #f7f7f5 + 墨黒 #0a0a0a + 1色アクセント（深い藍 #1d2c5c）。 - 12カラムグリッド厳守。フォームは左 8 カラム、サイドに 4 カラムの補足情報（メールアドレス・電話・所在地）。 - フィールドは全て左揃え、ボーダーは下罫線のみ（ボックスでは囲まない）、フォーカスで罫線が太くなる。 - フィールド: 「お名前」「会社名」「メールアドレス」「お問い合わせ種別（select）」「内容（textarea）」「個人情報の取り扱いに同意」(チェックボックス)。 - ラベルはフィールド上、必須は * で示す。 - 送信ボタンは黒地に白文字、矩形（角丸なし）、文字は「送信する →」。 - 上部に大きな見出し + 小さなリード文。 - 補足情報セクションは左揃え、各項目はタイトル + 値の縦並び。 - フッターに「営業時間 / レスポンス目安」をモノスペース。 - フォントは Inter / Helvetica Neue。 - フルレスポンシブ。768px 以下で 1 カラム。
バリエーション
複数ステップ版
フォームを3ステップに分割（基本情報 → 内容 → 確認）。 上部にステップインジケータ「01 / 03」、下部に戻る・進むボタン。 罫線で囲んだ進捗バーで現在地を視覚化。
モーダル版
全画面でなく、モーダル内にコンパクトに収める。 サイド情報は廃し、フォームのみに集中。
このプレビューのコード
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 {
--bg: #f7f7f5;
--ink: #0a0a0a;
--muted: #4a4a4a;
--quiet: #8a8a8a;
--accent: #1d2c5c;
--rule: #0a0a0a;
--rule-soft: rgba(10, 10, 10, 0.2);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Inter", "Helvetica Neue", "Helvetica", "Noto Sans JP",
"Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
font-feature-settings: "kern", "ss01";
}
.wrap {
max-width: 1200px;
margin: 0 auto;
padding: clamp(1.25rem, 4vw, 2.5rem);
}
header.bar {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: 1rem;
border-bottom: 1px solid var(--rule);
font-size: 0.85rem;
}
header.bar .logo {
font-weight: 800;
letter-spacing: -0.02em;
}
header.bar .nav {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 0.74rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
display: inline-flex;
gap: 1.4rem;
}
header.bar .nav a { color: inherit; text-decoration: none; }
header.bar .nav a:hover { color: var(--ink); }
header.bar .nav a.active { color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 4px; }
section.intro {
padding-block: clamp(2.5rem, 5vw, 4rem);
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.25rem;
align-items: end;
}
.intro .eyebrow {
grid-column: 1 / span 12;
font-family: "JetBrains Mono", monospace;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1rem;
}
.intro h1 {
grid-column: 1 / span 8;
margin: 0;
font-size: clamp(2rem, 5vw, 3.6rem);
line-height: 1.35;
letter-spacing: 0;
font-weight: 700;
}
.intro h1 :lang(ja) { letter-spacing: 0; line-height: 1.3; }
.intro p.sub {
grid-column: 9 / span 4;
margin: 0;
font-size: 0.95rem;
line-height: 1.85;
color: var(--muted);
}
@media (max-width: 720px) {
.intro h1, .intro p.sub { grid-column: 1 / span 12; }
}
.body {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem 3rem;
padding-block: 1rem 3rem;
border-top: 1px solid var(--rule);
}
@media (max-width: 880px) { .body { grid-template-columns: 1fr; gap: 2.5rem; } }
form.contact {
grid-column: 1 / span 8;
padding-top: 2rem;
}
@media (max-width: 880px) { form.contact { grid-column: 1 / -1; } }
.field {
display: block;
margin-bottom: 1.75rem;
}
.field .label {
display: block;
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 0.4rem;
}
.field .label .req { color: var(--accent); margin-left: 0.2rem; }
.field { display: block; }
.field input,
.field select,
.field textarea {
width: 100%;
background: transparent;
border: 0;
border-bottom: 1px solid var(--rule);
padding: 0.55rem 0;
color: var(--ink);
font-family: inherit;
font-size: 1rem;
outline: none;
transition: border-bottom-width 0.15s;
border-radius: 0;
appearance: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
border-bottom: 2px solid var(--accent);
padding-bottom: calc(0.55rem - 1px);
}
.field textarea {
min-height: 120px;
resize: vertical;
line-height: 1.7;
}
.field select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230a0a0a' stroke-width='1.5'><path d='M1 1L6 6L11 1'/></svg>"); background-position: right 0 center; background-repeat: no-repeat; padding-right: 1.5rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
@media (max-width: 600px) { .row { grid-template-columns: 1fr; } }
.check {
display: flex;
align-items: flex-start;
gap: 0.6rem;
margin: 0 0 1.5rem;
font-size: 0.92rem;
color: var(--muted);
}
.check input {
appearance: none;
width: 18px; height: 18px;
border: 1px solid var(--rule);
margin-top: 0.15rem;
flex: none;
cursor: pointer;
background: transparent;
position: relative;
border-radius: 0;
}
.check input:checked {
background: var(--ink);
border-color: var(--ink);
}
.check input:checked::after {
content: "";
position: absolute;
top: 3px; left: 6px;
width: 4px; height: 8px;
border: solid var(--bg);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.check a { color: var(--ink); }
.submit {
display: inline-flex;
align-items: center;
gap: 0.7rem;
background: var(--ink);
color: var(--bg);
border: 0;
padding: 1rem 1.85rem;
font-family: "JetBrains Mono", monospace;
font-size: 0.84rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
cursor: pointer;
transition: background 0.15s;
}
.submit:hover { background: var(--accent); }
aside.info {
grid-column: 9 / span 4;
padding-top: 2rem;
padding-left: 2rem;
border-left: 1px solid var(--rule);
}
@media (max-width: 880px) { aside.info { grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: 0; border-top: 1px solid var(--rule); padding-top: 2rem; } }
aside.info h2 {
margin: 0 0 1.5rem;
font-family: "JetBrains Mono", monospace;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
}
aside.info dl {
margin: 0;
font-size: 0.95rem;
}
aside.info dt {
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--quiet);
margin-bottom: 0.3rem;
}
aside.info dd {
margin: 0 0 1.5rem;
line-height: 1.7;
color: var(--ink);
}
aside.info dd a { color: inherit; border-bottom: 1px solid var(--rule); text-decoration: none; }
footer.bar {
margin-top: 0;
padding-block: 1rem 1.5rem;
border-top: 1px solid var(--rule);
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
display: flex;
justify-content: space-between;
}
.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="wrap">
<header class="bar">
<div class="logo">Helix</div>
<div class="nav">
<a href="#">Product</a>
<a href="#">Docs</a>
<a href="#" class="active">Contact</a>
<a href="#">Sign in</a>
</div>
</header>
<section class="intro">
<p class="eyebrow">Contact — Sales · Support</p>
<h1>お問い合わせ。<br/>2 営業日以内にご返信します。</h1>
<p class="sub">導入のご相談・カスタマイズ要件・取材のご依頼など、用途を選んで送信ください。</p>
</section>
<div class="body">
<form class="contact" onsubmit="event.preventDefault();">
<p class="note">架空のお問い合わせフォームです。入力は送信されません。個人情報は入力しないでください。</p>
<div class="row">
<label class="field">
<span class="label">お名前 <span class="req">*</span></span>
<input type="text" name="name" autocomplete="name" required />
</label>
<label class="field">
<span class="label">会社名</span>
<input type="text" name="company" autocomplete="organization" />
</label>
</div>
<label class="field">
<span class="label">メールアドレス <span class="req">*</span></span>
<input type="email" name="email" autocomplete="email" required />
</label>
<label class="field">
<span class="label">お問い合わせ種別 <span class="req">*</span></span>
<select required>
<option value="">選択してください</option>
<option>導入相談</option>
<option>機能・仕様について</option>
<option>パートナーシップ</option>
<option>取材・寄稿</option>
<option>その他</option>
</select>
</label>
<label class="field">
<span class="label">内容 <span class="req">*</span></span>
<textarea required placeholder="ご相談内容を具体的にご記入ください。"></textarea>
</label>
<label class="check">
<input type="checkbox" required />
<span><a href="#">個人情報の取り扱い</a> に同意のうえ送信します。</span>
</label>
<button class="submit" type="submit">送信する <span aria-hidden="true">→</span></button>
<p class="note" id="demo-result" role="status"></p>
</form>
<aside class="info">
<h2>架空の連絡先</h2>
<dl>
<dt>Email</dt>
<dd>hello@helix.example（送信先ではありません）</dd>
<dt>Phone</dt>
<dd>電話番号は未設定</dd>
<dt>Office</dt>
<dd>架空オフィス（所在地は未設定）</dd>
<dt>Hours</dt>
<dd>平日 09:30 — 18:00<br/>JST · 土日祝休み</dd>
</dl>
</aside>
</div>
<footer class="bar">
<span>© 2026 Helix · Build 2026.04</span>
<span>Response within 2 Business Days</span>
</footer>
</div>
<script>
const form = document.querySelector("form.contact");
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の描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
スイス・スタイル（国際タイポグラフィ様式）は、1950年代のスイスで確立されたデザイン思想です。ヘルベチカに代表される無装飾のサンセリフ、厳格なグリッド、非対称ながら数学的な構成——「装飾は嘘をつく、構造だけが正直だ」という信念がその根底にあります。お問い合わせフォームにこの様式を適用するのは、見た目の選択である以前に、姿勢の表明です。
装飾を引いて、何が残るか
多くのフォームは影・角丸・カラフルなバリデーション・アイコンで「親しみやすさ」を演出しようとします。スイス様式はそれらをすべて取り去り、罫線・余白・タイポグラフィの階層だけで構造を立てる。残るのは、入力項目そのものの明快さです。下線のみのフィールド、フォーカスで太くなる罫線——この最小限の挙動が、かえって「この会社は要点をわかっている」という信頼を生みます。B2Bや士業の問い合わせ窓口で効くのは、誠実さが様式とぴたりと一致するからです。
崩れる形影・角丸・アイコンで親しみを作る
装飾で愛想を演出すると、要点がその下に埋まります。入力項目そのものの明快さが犠牲になり、フォームは長く感じられます。
効く形罫線・余白・階層だけで組む
下線のみのフィールド、フォーカスで太くなる罫線。この最小限の挙動が要点をわかっているという信頼を生みます。
冷たさをどう避けるか
無装飾は、扱いを誤ると「冷淡」に転びます。スイス様式が冷たく見えないための鍵は、視覚ではなく言葉にあります。ラベルの敬語、補足説明の丁寧さ、送信ボタンの文言の柔らかさ——温度は文章で担保する。
無装飾は、扱いを誤ると冷淡に転びます。温度は文章で担保する。装飾で愛想を作るのをやめた分、責任はコピーライティングへ移ります。
仕上げの判断軸
12カラムグリッドは必ず守り、フォーム本体とサイド情報の幅比を崩さないこと。必須項目はアスタリスクのみで示し、任意バッジのような冗長な装飾は足しません。流行を排した様式なので、5年後に見ても古びない——この長寿命こそ、スイス様式を選ぶ実利的な理由です。
フォームの構成要素
使いどころ
- B2B SaaSやエンタープライズ製品の問い合わせ窓口
- 法律事務所・コンサルティング会社
- 美術館・大学・公的機関
- シリアスな雰囲気を保ちたい個人のサービス
このデザインの分類
背景と狙いどころ
よくある質問
装飾がなくて冷たく感じませんか？
装飾を排する代わりに、文言の温度（敬語の使い方、補足説明の丁寧さ）で誠実さを伝えます。冷たさを避けるならボタンコピーや確認文言を柔らかくしてください。
必須/任意の表示はどう？
スイス様式では「必須に *」「任意は何も付けない」が王道。冗長なバッジ装飾は使いません。
ダークモードに対応する場合の注意は？
配色を反転（背景
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
設計図面風の見積もり依頼フォーム
青焼き図面の方眼と表題欄をそのまま画面に持ち込んだ見積もりフォーム。入力欄の右に工程と前提条件を並べ、送信前に何が起きるかを見せて心理的な壁を下げます。
未保存の変更を見失わせないSaaS設定画面
左に節の目次、各節は左に説明・右に入力の2列で組むダークテーマのSaaS設定画面。変更した項目の数を数える未保存バー、役割を選べるメンバー一覧、名前を打ち込むまで押せない削除ボタンまでを備え、設定を触る人の不安を順に潰していく。
スイス様式・グリッド厳守の料金プラン
厳格なグリッドと無装飾サンセリフだけで構築する、スイス国際タイポグラフィ様式の料金プラン。装飾を排し、罫線・余白・タイポの階層だけで「比較しやすさ」を最大化する設計。