フォーム · お問い合わせフォーム
スイス様式のシンプルなお問い合わせフォーム
厳格なグリッドと無装飾サンセリフで構築する、スイス国際タイポグラフィ様式のお問い合わせフォーム。色を排し、罫線・余白・タイポの階層だけで「真剣さ」を伝える設計。
プレビュー
概要
スイス・スタイル(国際タイポグラフィ様式)は、1950年代のスイスで確立されたデザイン思想です。ヘルベチカに代表される無装飾のサンセリフ、厳格なグリッド、非対称ながら数学的な構成——「装飾は嘘をつく、構造だけが正直だ」という信念がその根底にあります。お問い合わせフォームにこの様式を適用するのは、見た目の選択である以前に、姿勢の表明です。
装飾を引いて、何が残るか
多くのフォームは影・角丸・カラフルなバリデーション・アイコンで「親しみやすさ」を演出しようとします。スイス様式はそれらをすべて取り去り、罫線・余白・タイポグラフィの階層だけで構造を立てる。残るのは、入力項目そのものの明快さです。下線のみのフィールド、フォーカスで太くなる罫線——この最小限の挙動が、かえって「この会社は要点をわかっている」という信頼を生みます。B2Bや士業の問い合わせ窓口で効くのは、誠実さが様式とぴたりと一致するからです。
冷たさをどう避けるか
無装飾は、扱いを誤ると「冷淡」に転びます。スイス様式が冷たく見えないための鍵は、視覚ではなく言葉にあります。ラベルの敬語、補足説明の丁寧さ、送信ボタンの文言の柔らかさ——温度は文章で担保する。装飾で愛想を作るのをやめた分、コピーライティングに責任が移ると考えてください。
仕上げの判断軸
12カラムグリッドは必ず守り、フォーム本体とサイド情報の幅比を崩さないこと。必須項目は「*」のみで示し、「任意」バッジのような冗長な装飾は足しません。流行を排した様式なので、5年後に見ても古びない——この長寿命こそ、スイス様式を選ぶ実利的な理由です。
使いどころ
- B2B SaaSやエンタープライズ製品の問い合わせ窓口
- 法律事務所・コンサルティング会社
- 美術館・大学・公的機関
- シリアスな雰囲気を保ちたい個人のサービス
このデザインの分類
- カテゴリ
- フォーム
- スタイル
- スイス様式 / ミニマル / クール / モノクロ
背景と狙いどころ
AIへの指示文
法人向けサービスのお問い合わせページを、スイス様式で設計してください。 要件: - 配色: オフホワイト #f7f7f5 + 墨黒 #0a0a0a + 1色アクセント(深い藍 #1d2c5c)。 - 12カラムグリッド厳守。フォームは左 8 カラム、サイドに 4 カラムの補足情報(メールアドレス・電話・所在地)。 - フィールドは全て左揃え、ボーダーは下罫線のみ(ボックスでは囲まない)、フォーカスで罫線が太くなる。 - フィールド: 「お名前」「会社名」「メールアドレス」「お問い合わせ種別(select)」「内容(textarea)」「個人情報の取り扱いに同意」(チェックボックス)。 - ラベルはフィールド上、必須は * で示す。 - 送信ボタンは黒地に白文字、矩形(角丸なし)、文字は「送信する →」。 - 上部に大きな見出し + 小さなリード文。 - 補足情報セクションは左揃え、各項目はタイトル + 値の縦並び。 - フッターに「営業時間 / レスポンス目安」をモノスペース。 - フォントは Inter / Helvetica Neue。 - フルレスポンシブ。768px 以下で 1 カラム。
バリエーション
複数ステップ版
フォームを3ステップに分割(基本情報 → 内容 → 確認)。 上部にステップインジケータ「01 / 03」、下部に戻る・進むボタン。 罫線で囲んだ進捗バーで現在地を視覚化。
モーダル版
全画面でなく、モーダル内にコンパクトに収める。 サイド情報は廃し、フォームのみに集中。
よくある質問
装飾がなくて冷たく感じませんか?
必須/任意の表示はどう?
ダークモードに対応する場合の注意は?
関連するデザイン
スイス様式・グリッド厳守の料金プラン
厳格なグリッドと無装飾サンセリフだけで構築する、スイス国際タイポグラフィ様式の料金プラン。装飾を排し、罫線・余白・タイポの階層だけで「比較しやすさ」を最大化する設計。
POSレシート風の料金プラン
コンビニや飲食店のサーマルプリントレシートを再構築した料金プラン。破れたエッジ・点線セパレータ・バーコード・赤い「人気」スタンプで「正直で透明な価格」を視覚的に証明する尖った設計。
建築設計図風の機能紹介
建築・CAD図面のブループリントを再構築した機能紹介セクション。シアンブルーの方眼背景・寸法線・断面記号・コールアウトで「精密に設計された製品」の信頼感を技術的なビジュアルで叩きつける尖った設計。