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

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

プレビュー

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

概要

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

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

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

冷たさをどう避けるか

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

仕上げの判断軸

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

使いどころ

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

このデザインの分類

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

背景と狙いどころ

AIへの指示文

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

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

バリエーション

複数ステップ版

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

モーダル版

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

よくある質問

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