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

スイス様式のシンプルなお問い合わせフォーム

プレビュー

vibe.itlibra.com/preview/swiss-contact-form/

概要

スイス・スタイル(国際タイポグラフィ様式)は、1950年代のスイスで確立されたデザイン思想です。ヘルベチカに代表される無装飾のサンセリフ、厳格なグリッド、非対称ながら数学的な構成——「装飾は嘘をつく、構造だけが正直だ」という信念がその根底にあります。お問い合わせフォームにこの様式を適用するのは、見た目の選択である以前に、姿勢の表明です。

装飾を引いて、何が残るか

多くのフォームは影・角丸・カラフルなバリデーション・アイコンで「親しみやすさ」を演出しようとします。スイス様式はそれらをすべて取り去り、罫線・余白・タイポグラフィの階層だけで構造を立てる。残るのは、入力項目そのものの明快さです。下線のみのフィールド、フォーカスで太くなる罫線——この最小限の挙動が、かえって「この会社は要点をわかっている」という信頼を生みます。B2Bや士業の問い合わせ窓口で効くのは、誠実さが様式とぴたりと一致するからです。

崩れる形影・角丸・アイコンで親しみを作る

装飾で愛想を演出すると、要点がその下に埋まります。入力項目そのものの明快さが犠牲になり、フォームは長く感じられます。

効く形罫線・余白・階層だけで組む

下線のみのフィールド、フォーカスで太くなる罫線。この最小限の挙動が要点をわかっているという信頼を生みます。

冷たさをどう避けるか

無装飾は、扱いを誤ると「冷淡」に転びます。スイス様式が冷たく見えないための鍵は、視覚ではなく言葉にあります。ラベルの敬語、補足説明の丁寧さ、送信ボタンの文言の柔らかさ——温度は文章で担保する。

無装飾は、扱いを誤ると冷淡に転びます。温度は文章で担保する。装飾で愛想を作るのをやめた分、責任はコピーライティングへ移ります。

仕上げの判断軸

12カラムグリッドは必ず守り、フォーム本体とサイド情報の幅比を崩さないこと。必須項目はアスタリスクのみで示し、任意バッジのような冗長な装飾は足しません。流行を排した様式なので、5年後に見ても古びない——この長寿命こそ、スイス様式を選ぶ実利的な理由です。

フォームの構成要素

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

使いどころ

  • B2B SaaSやエンタープライズ製品の問い合わせ窓口
  • 法律事務所・コンサルティング会社
  • 美術館・大学・公的機関
  • シリアスな雰囲気を保ちたい個人のサービス

このデザインの分類

カテゴリ
フォーム
スタイル
スイス様式 / ミニマル / クール / モノクロ

背景と狙いどころ

AIへの指示文

法人向けサービスのお問い合わせページを、スイス様式で設計してください。

要件:
- 配色: オフホワイト #f7f7f5 + 墨黒 #0a0a0a + 1色アクセント(深い藍 #1d2c5c)。
- 12カラムグリッド厳守。フォームは左 8 カラム、サイドに 4 カラムの補足情報(メールアドレス・電話・所在地)。
- フィールドは全て左揃え、ボーダーは下罫線のみ(ボックスでは囲まない)、フォーカスで罫線が太くなる。
- フィールド: 「お名前」「会社名」「メールアドレス」「お問い合わせ種別(select)」「内容(textarea)」「個人情報の取り扱いに同意」(チェックボックス)。
- ラベルはフィールド上、必須は * で示す。
- 送信ボタンは黒地に白文字、矩形(角丸なし)、文字は「送信する →」。
- 上部に大きな見出し + 小さなリード文。
- 補足情報セクションは左揃え、各項目はタイトル + 値の縦並び。
- フッターに「営業時間 / レスポンス目安」をモノスペース。
- フォントは Inter / Helvetica Neue。
- フルレスポンシブ。768px 以下で 1 カラム。

バリエーション

複数ステップ版

フォームを3ステップに分割(基本情報 → 内容 → 確認)。
上部にステップインジケータ「01 / 03」、下部に戻る・進むボタン。
罫線で囲んだ進捗バーで現在地を視覚化。

モーダル版

全画面でなく、モーダル内にコンパクトに収める。
サイド情報は廃し、フォームのみに集中。

よくある質問

装飾がなくて冷たく感じませんか?
装飾を排する代わりに、文言の温度(敬語の使い方、補足説明の丁寧さ)で誠実さを伝えます。冷たさを避けるならボタンコピーや確認文言を柔らかくしてください。
必須/任意の表示はどう?
スイス様式では「必須に *」「任意は何も付けない」が王道。冗長なバッジ装飾は使いません。
ダークモードに対応する場合の注意は?
配色を反転(背景

この画面を実装する

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