スイス・タイポグラフィ デザインインスピレーション
国際タイポグラフィ様式 -- 通称スイススタイル。1950年代にスイスで確立され、Josef Muller-Brockmann、Max Bill、Jan Tschicholdらが体系化したこのデザイン哲学は、今日のUI/UXデザインの基盤となっている。グリッドが法律、Helveticaが公用語、装飾は犯罪。情報の客観的伝達こそが、デザインの最高目的である。
このページの使い方
各セクションにインラインHTMLのビジュアル例を配置しています。厳格なグリッド、大きな数字、フラッシュレフトの整然とした秩序を画面上で体感してください。
デザイン哲学 -- グリッドが法律
デザイナーの個性は不要だ。情報が語れ。
スイス・タイポグラフィは「自己表現」の対極にある。デザイナーは透明な存在となり、情報そのものが受け手に届くための最適な構造を設計する。12カラムグリッドは恣意性を排除し、Helveticaは「個性のないフォント」として中立的に情報を伝達する。
カラーパレット -- 白、黒、グレー、そして赤一点
スイス・タイポグラフィのカラーシステムは極限まで削ぎ落とされている。色は情報伝達を助ける場合にのみ使用する。
Color System
| Token | 値 | 役割 |
|---|---|---|
| bg-white | #ffffff | メイン背景 |
| bg-light | #f0f0f0 | セクション背景 |
| bg-black | #000000 | 反転セクション |
| text-black | #000000 | メインテキスト |
| text-dark | #333333 | サブテキスト |
| text-gray | #777777 | 補助テキスト |
| accent-red | #ff0000 | 唯一のアクセント（一箇所のみ） |
グリッドシステム -- 法則
12-Column Grid
1
2
3
4
5
6
7
8
9
10
11
12
すべての要素はこの12カラムグリッドに整列する。例外は存在しない。
大きな数字 -- デザイン要素としての数字
47
Projects completed
12
Team members
6
Years of practice
コンポーネント -- 装飾を排除した純粋形
ボタンバリエーション
Primary
Secondary
Text Link
マニフェストセクション
Manifesto
Good design is as little design as possible. Less is more. But less is not nothing.
タイポグラフィの階層 -- ウェイトとサイズの二軸
スイス・タイポグラフィではフォントウェイトは 400 と 700 の二種のみ。サイズの差で階層を作る。
Heading 1 -- 48px Bold
Heading 2 -- 32px Bold
Heading 3 -- 24px Bold
Body text -- 16px Regular. 情報の客観的伝達のために読みやすさを最優先する。
Label -- 10px Bold Uppercase
フラッシュレフトの鉄則
| 要素 | 整列 | 理由 |
|---|---|---|
| 見出し | 左揃え | 視線の起点を統一 |
| 本文 | 左揃え、右端不揃い | 読みやすさの最大化 |
| ラベル | 左揃え | グリッドへの整列 |
| 数字 | 左揃え | ベースライン整合 |
| 中央揃え | 禁止 | 恣意性の排除 |
使い方ガイド
Stitch への投入方法
/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/SWISS_TYPOGRAPHY.mdをプロジェクトのDESIGN.mdにコピー- 赤のアクセントを使う一箇所を決定
- Stitch に「この DESIGN.md に従って [画面名] を作成してください」と指示
適したプロジェクト
- デザインエージェンシーのポートフォリオ
- 建築事務所のウェブサイト
- 出版・エディトリアル系
- アカデミック・研究機関
- タイポグラフィ重視のブランドサイト
不向きなプロジェクト
- 親しみやすいカジュアルなサービス
- 子供向け・エンタメ系
- ECサイト（商品の色を見せる必要がある場合）
- 写真主体のポートフォリオ
赤(#ff0000)の使用制限
赤はページ全体で一箇所にのみ使用してください。複数箇所で使用するとスイススタイルの禁欲的な美学が崩壊します。