スイスUIデザイン は何をしますか？
このスキルは、スイス派の原理を具体的なUIデザインの決定に変換します。アーネスト・ケラーによるスイス派の基本理念は、デザインの解決策は問題の内容から導き出されなければならないということです。以下のすべては、この考えに基づいています。グリッドは論理であり、タイポグラフィはイメージであり、色は明確な役割を持つ強い平らな面であり、余白は構造であり、装飾は一切ありません。
2つ目の目標は、結果がAI生成に見えてはならないということです。一般的なAIインターフェースは、どれも同じように見えます（中央寄せのヒーロー、紫のグラデーション、ソフトシャドウ付きの角丸カード、3つのアイコン機能、曖昧なコピー）。スイス・スタイルはその正反対に近いため、規律を持って適用することで、この問題の大部分は解決します。残りはパート5で扱います。
3つ目の目標は、結果に力強さを持たせることです。クリーム色の背景にオレンジのブロックが一つある整然としたページは、グリッドがスイス的であるだけです。このスタイルで知られるポスターは、色に満ちています。強いフラットカラーまたは黒がシートの83～97%を占めるか、1つのクロマチックインクですべてを表現し、着色パネルが残りを埋めます。そのため、ステップ4では、レイアウトの前にルック（地、配色、画像処理）を選択します。references/looks.mdには、実際のポスターからサンプリングされた5つのルックと、テスト済みのCSSが含まれています。scripts/color_power.pyは結果を測定します。
このファイルの構成
- ワークフロー — 手順
- グリッド、スペーシング、タイポグラフィ、色 — トークン、スケール、パレット、レイアウトレシピ、ベースCSS
- アラビア語とRTL
- コンポーネント
- AIらしくない見た目にするために — レビューチェックリスト
- 出典：スイス派の概要（小冊子『スイス・デザイン派』より）
このスキルには他に、references/looks.md（ルック、コントラストペア、テスト済みCSSメカニクス）とscripts/color_power.py（スクリーンショットのカラーパワーチェック用）も含まれています。
パート1 — ワークフロー
1. コンテンツから始める
- その画面が存在する唯一の目的（一つのメッセージ、一つのアクション）を書き出す。それが最も支配的な要素となる。
- 残りを最大3～4レベルの階層にランク付けする。
- ユーザーからコンテンツが提供されなかった場合は、対象言語で現実的で具体的なコンテンツを作成する。現実的なローカル名、正確な数値、日付、価格、場所。決してロレム・イプサムや、マーケティングの決まり文句（「～の力を解き放て…」またはそのアラビア語の同等表現「～の力を発見しよう」）を使ってはならない。具体的なコンテンツは、そのページが人間によって作られたことを示す最も強力な兆候です。どの詳細が仮定でありユーザーが置き換えるべきか、ユーザーに伝えてください。
- スイス流にコピーを書く：客観的で事実に基づき、広告やプロパガンダに見られる誇張された主張を含まない（メグズによる同スタイルの定義）。デザイナーは情報の明確な伝達者として行動し、セールスマンとしては行動しません。事実、数字、条件、平易な動詞は、形容詞よりもここでは説得力があります。
- 言語と方向を決定する。アラビア語の場合は
dir="rtl"とし、パート3を適用して、配置、フォント、行の高さを変更します。
2. 目的に応じて方向性を選択する
スイス派は単一のスタイルではありません。以下の方向性から一つを選びます。それぞれは先駆者または派の原理に基づいています（原理を使用すること。決して彼らのポスターをコピーしないこと）。
| 方向性 | 特徴 | 適した用途 |
|---|---|---|
| チューリッヒ — ミュラーブロックマン | 厳格なグリッド（時には可視化）、客観的トーン、正確な小さなタイポグラフィと大きな写真または抽象的な幾何学的形態の組み合わせ、多くの余白。 | ドキュメンテーション、情報量の多いアプリ、ダッシュボード、機関、金融 |
| バーゼル — ホフマン | 白黒、ハイコントラスト、フィギュア・グラウンド、非常に少ない大きな形状、形態としてのタイポグラフィ。 | 文化、ポートフォリオ、イベント、建築 |
| バルマー | グリッド上に構築された見出し、太いウェイト、赤＋黒、積み重ねられた単語、可視化された構造。 | ブランド、キャンペーン、ローンチ、個性的なランディングページ |
| ケラー | 大胆なフラットカラーフィールド、シンプルな幾何学的形状、端で切り取られた特大タイポグラフィ。 | 消費者製品、教育、コミュニティ、美術館 |
| バーゼル物体ポスター（ザッハプラカート） | 1つの物体（製品、ツール、料理、デバイス）を大きく、接写で、シャープに撮影し、名前以外ほとんど何も置かない。 | 物理的な製品、食品、小売、ハードウェア |
| フォトモンタージュ（ヘルベルト・マッター） | 劇的に異なるスケールの写真を組み合わせ、グリッド上で切り取り、タイポグラフィをその中に固定する。 | 観光、場所、イベント、メディア |
選択に役立つ背景：スイス国立図書館は、戦後の2つの陣営、チューリッヒ＝具象芸術（数学的構築、純粋な幾何学的平面。マックス・ビルは1930年代後半に最初の真のレイアウトグリッドを構築した）とバーゼル＝新即物主義（物体、写真、形態のコントラスト）について述べています。ケラー自身は固定されたスタイルを教えませんでした。彼は解決策はコンテンツから生まれるべきだと信じており、彼自身の作品は非常に多様です。このスキルは彼に従います：方向性は習慣からではなく、コンテンツから来るのです。
チューリッヒは「安全な」選択であり、毎回それに陥りがちです。そのため、すべての出力が似たようなものになります。チューリッヒは、コンテンツが情報量が多く機能的である場合に選択してください。ランディングページ、ブランド、キャンペーンには、バルマー、ケラー、バーゼルを優先してください。これらの方向性はページに一つの強い印象（強い色の全面、巨大な切り取られた単語、ハイコントラストな形状）を与え、静かなページには欠けているものです。どの方向性を選んだか、その理由を一行でユーザーに伝えてください。インターフェース内に書かないでください。
方向性とルックは別の選択です。方向性は構造を決定し、ルック（ステップ4）は色を決定します。チューリッヒのグリッドにサン・ルックを組み合わせることも、バルマーにブラック＋スペクトラムを組み合わせることもできます。
3. コンテンツの中にコンセプトを見つける
バーゼル派は次のように述べています（ホフマンの学生であるケネス・ヒーバート）：抽象的な構造はコミュニケーションのための媒体であり、それを見つけることは、表面的なスタイルよりも前に、メッセージの本質を抽出することを強要します。デザインする前に、これを文章で行ってください。
- コンテンツから5～8個の具体的な事実をリストアップする：数字、場所、物理的な物体、時間、プロセス、名前、コントラスト（前/後、小/大）。
- それぞれ異なる事実に基づいた、3つの異なるコンセプトを、それぞれ一文で書く。例：コワーキングスペースの場合、(a) 建物の住所と間取り図をイメージとして使用、(b) 1日の15時間を直接予約できるグリッドとして表現、(c) 実際の物体 — 机、鍵、椅子 — を大きく表示（物体ポスター）。
- この製品に最も固有で、名前を変更するだけで競合他社のページに転用できないものを選択する。どれを選んだか、一行で説明する。
巨大な要素は、コンテンツから来なければならず、行動喚起から来てはなりません。 巨大な命令動詞（「予約する」、「始める」、またはそれらのアラビア語の同等表現）は、単なる常套手段です。どんな製品にも適合し、すぐに新しいテンプレートになります。この製品だけが持つ名詞、数字、または名前（場所、主要な数値、物体、日付）を使用してください。
4. ルックを選択し、システムを設定する
ルックが先。 レイアウトの前に、ルックを選択し、references/looks.mdを開いて、そのトークン、タイプペア、構成、テスト済みCSSを確認してください。地が最初に来ます。強いフラットカラーまたはインクが、最初の画面の少なくとも60%を覆います。2つの紙の地のルックは例外で、1つのクロマチックインクがすべてのタイポグラフィを担い、着色パネルが少なくとも30%を埋めます。コンテンツから選択し、同じルックを2回続けて使用せず、1ページに1つのルックを使用してください（セクションごとに構成を変え、パレットは変えない）。
| ルック | 地 | パレット | 適した用途 |
|---|---|---|---|
| 1 サン | 一つの強い色相とその補色 | イエロー #FFC611 · インディゴ #3A3A9C · ネイビー #16154A | ランディングページ、イベント、文化、教育 |
| 2 バイオレットインク | 白。全てのタイポグラフィに一つのクロマチックインク | バイオレット #4F2A7D · パーウィンクル #CFDBF1 · オーキッド #BD9CBB | エディトリアル、ジャーナル、レポート |
| 3 プライマリーバンド | 3～4色のフルブリードバンドを重ねる | ブルー #2F7BFF · グリーン #0FA23A · イエロー #EFB83E · レッド #E6040A · インク | 事実に基づくランディングページ、キャンペーン、機関 |
| 4 ブラック＋スペクトラム | インクブラック | 6～9色のピュアな色相、それぞれ少なくとも2回使用 | カタログ、予約、製品ファミリー、ダッシュボード凡例 |
| 5 ギグポスター | クリームまたはブラック | インク＋レッド、シアン、イエロー、パープル、オーバープリントあり | イベント、音楽、コミュニティ、ローンチ |
オレンジ＋ネイビー、コバルト＋イエロー、ピンク＋ダークグリーン、その他の地も同じファイルにあります。ブリーフにブランドカラーが指定されている場合、それが地または平面となり、パートナーはスキームに従って選択されます。
次にトークン（パート2）：ボディライン（サイズと行の高さ）、それから導出されるグリッド（デフォルトでは12/8/4カラム。コンテンツが必要とする場合は別の数でも可）、ベースラインユニット（8px）、急峻なスケールを持つ1つの書体ファミリー（または1つのアラビア語＋1つのラテン語パートナー）、そして表面ごとに1つのテキストカラーを持つルックのパレット。各ペアはコントラストがチェックされています。
5. 非対称で構成する
出典は、バランスは対称性ではなく、視覚的な力の配分によって達成されると説明しています。
- ヒーローを中央に配置しない。重い要素（巨大な見出し、大きな写真、色面）を片側に配置し、反対側には余白と小さなテキストでバランスを取る。
- 不均等なカラムスパンを使用する：5+7、4+8、3+9、2+6+4。どこでも均等な3分割は、AIのデフォルトです。
- 意図的にオフセットする：見出しはカラム1～9、イントロはその下の7～11、メタデータは1～3。
- 各セクションに、同じグリッド上で異なる構成を与える。すべてのセクションで「中央寄せタイトル＋カードグリッド」を繰り返すのは、強いAIの兆候です。
- セクションをコーディングする前に、そのスパンをコメントとして書き出す（
/* hero: h1 1–10, meta 1–3, lead 6–11 */）。これによりグリッドの整合性が保たれます。
6. ポスターレイヤーを追加する — スイス的であり、単にクリーンである以上のものにする
このステップが、スイスデザインと整然としたデザインの違いです。出典自体も、スイスの原理が現代のUIの基盤となったと述べています。つまり、機能的なルールだけ（グリッド、ヘアライン、左揃えテキスト、インデックスリスト、統計ストリップ、ワンアクセント）では、今やどのデザインシステムも同じようなものになります。クリーンではありますが、新しいものではなく、スイス的であると認識できるものでもありません。スイス派を際立たせたのは、そのポスターでした。イメージとして使用されるタイポグラフィ、大胆な色面、幾何学、スケールの緊張、そして目に見える構造です。その言語をインターフェースに取り入れてください。
出典は同じことを両側面から述べています。フラットデザインの研究（Aristova & Vasilieva）は、フラットなウェブデザインをインターナショナルスタイルに遡り、その普及がウェブサイトを均質化し、各サイトや機関のアイデンティティを弱めていると警告しています。デザイン史の教科書は、スイススタイルがユニバーサルになると、その視覚言語は革新性を失ったと指摘しています。治療法は原理を捨てることではありません。オリジナルのデザイナーが行ったように、コンテンツごとに固有の形態を見つけるための方法としてそれらを使用することです。
ルール： ランディングページ、マーケティングサイト、ブランドページには、少なくとも3つのシグネチャームーブが必要です。1つはヒーローに、少なくともあと2つは他のセクションに配置します。プロダクトUI（ダッシュボード、アプリ）は機能的なままですが、1つのポスターモーメントを持ちます。ページヘッダー、ログイン画面、空の状態、またはセクションの区切りです。
シグネチャームーブ（各々は、出典のポスター例に見られる原理に基づいています。原理を使用し、ポスターを再現しないでください。）
| # | ムーブ | UIでの表現方法 | CSS |
|---|---|---|---|
| 1 | 建築としての文字（バルマー） | グリッドモジュールから構築された単語またはイニシャル：カラム線で分割された巨大な文字、または正方形から組み立てられた文字。アラビア語では、スクエアクーフィック体が自然な同等物です。これはグリッド上に構築された文字だからです。ワードマークやヒーローの単語に使用し、正方形からSVGで描画し、読みやすさを保ちます。 | モジュールグリッド上のSVG <rect>; セルのgrid |
| 2 | 巨大な切り取られたタイポグラフィ（ケラー） | ビューポートよりも大きな見出しを、1つまたは2つの端で切り取る。ページのアイデンティティは単語そのもの。 | font-size: 28vw; line-height: .8; margin-inline-start: -.05em; セクション overflow: clip |
| 3 | 連動するタイポグラフィ（ホフマン） | ネガティブな行間で単語を積み重ね、接触または重なり合うようにし、一つのタイポグラフィックブロックを形成する。 | line-height: .75、ネガティブマージン、2色目に mix-blend-mode: multiply |
| 4 | 回転した平面（ミュラーブロックマン） | コンテンツのブロック、グリッド、または小さな正方形の散らばりを、45°または90°回転させた平面上に配置し、まっすぐなグリッドと対比させる。 | ラッパーに transform: rotate(-45deg); 内部のテキストは読みやすく保つか、90°回転させる |
| 5 | フィギュア・グラウンド幾何学（ホフマン） | インクまたはパレットの強い色で、画面端で切り取られた大きな円、半円、またはリング。テキストは形状の内側に配置するか、形状を回り込ませる。 | border-radius: 50% 要素 / SVG、clip-path、shape-outside |
| 6 | 縦書き単語カラム（バルマー） | 細く、全面カラーのカラムに、一つの単語を縦書きで配置する。アラビア語：単語全体を回転させる（文字を積み重ねてはならない）。 | writing-mode: vertical-rl、transform: rotate(180deg) |
| 7 | カラーフィールド＋インクブロック（ケラー） | 強いフィールドカラーのセクション全体に、テキストを保持する黒の長方形を置くか、または2つの強い色を端から端まで合わせる。 | グリッド上の2つのブロック、シャドウなし |
| 8 | コンテンツとしてのグリッド（ミュラーブロックマン） | グリッド線を意図的に描き、データ、数字、またはテキストをセルにスナップさせる。時刻表、価格グリッド、セクションインデックスに使用する。 | セルに境界線、または repeating-linear-gradient 線 |
| 9 | 一行の中でのスケールの緊張 | 同じベースライン上に、200pxの単語と12pxのメタデータを隣り合わせる。 | align-items: baseline のflex |
| 10 | トーナルオーバータイプ | 2つの表示単語を重ね、1つを薄いグレーで後ろに、もう1つをインクまたは紙の色で前に、グリッド上でオフセットして配置する。 | グリッドセル内の絶対配置 |
| 11 | 物体ヒーロー（バーゼル ザッハプラカート） | 実際の物体を接写で大きく撮影し、切り抜くかタイトにクロップし、名前と1つの事実だけを添える。 | object-fit: cover、画像は8～12カラムにまたがり、端でクロップされる |
| 12 | フォトモンタージュ（マッター） | 非常に異なるスケールの2～3枚の写真（ディテールは大きく、ワイドビューは小さく）をグリッドフィールドに切り取り、タイポグラフィをその上または間に配置する。 | overflow: clip のグリッドフィールド、画像はフィールド端に合わせる |
| 13 | 対決（ホフマン） | 2つの異質な要素が意図的に出会う：文字と幾何学的形態、密度の高いテキストブロックと空のフィールド、丸い形状とまっすぐなグリッド、黒と白。 | 端または重なりを共有する2つのグリッド領域 |
...
[続く...]