イスラエル UI デザインシステム

手順

ステップ 1: ヘブライ語フォントペアリングの選択

ヘブライ語の可読性とラテン文字との互換性に最適化されたフォント組み合わせを選択します:

ペアリング	ヘブライ語フォント	ラテン文字フォント	最適な用途	スタイル
モダンビジネス	Heebo	Inter	SaaS、ダッシュボード、管理画面	クリーン、ニュートラル
フレンドリースタートアップ	Rubik	Source Sans Pro	コンシューマーアプリ、マーケティングサイト	丸い、親しみやすい
政府・フォーマル	Assistant	Roboto	政府サイト、機関ページ	プロフェッショナル、明確
エディトリアル	Frank Ruhl Libre	Merriweather	ブログ、ニュース、コンテンツサイト	セリフ、文学的
ミニマル	Secular One	Montserrat	ランディングページ、ポートフォリオ	太字見出し

完全なフォントメトリクスと読み込み戦略については、references/hebrew-typography.md を参照してください。

フォント読み込み設定:

/* プライマリ: Heebo + Inter ペアリング */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700&family=Inter:wght@300;400;500;700&display=swap');

:root {
  --font-hebrew: 'Heebo', 'Assistant', 'Noto Sans Hebrew', sans-serif;
  --font-latin: 'Inter', 'Roboto', sans-serif;
  --font-mono: 'Fira Code', 'Source Code Pro', monospace;
}

body {
  font-family: var(--font-hebrew), var(--font-latin);
}

ステップ 2: ヘブライ語タイポグラフィスケール

ヘブライ文字は同じフォントサイズの場合、ラテン文字よりも視覚的に大きく見えます。タイプスケールを調整します:

:root {
  /* ヘブライ語調整済みタイプスケール */
  --text-xs: 0.8125rem;   /* 13px -- ヘブライ語最小読み取り可能サイズ */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px -- ヘブライ語本文最小サイズ */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */

  /* ヘブライ語固有の行高(ラテン文字より高い) */
  --leading-tight: 1.4;
  --leading-normal: 1.7;
  --leading-relaxed: 1.9;

  /* ヘブライ語に letter-spacing は決して使用しないこと */
  --tracking-hebrew: normal;
  /* わずかなワード間隔でヘブライ語の可読性が向上 */
  --word-spacing-hebrew: 0.05em;
}

/* ヘブライ語本文テキスト */
body[dir="rtl"] {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-hebrew);
  word-spacing: var(--word-spacing-hebrew);
}

ステップ 3: RTL ファーストコンポーネントアーキテクチャ

RTL を後付けではなくデフォルトとしてコンポーネントを設計します:

/* RTL ファースト ボタンコンポーネント */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 1.5rem;
  padding-block: 0.75rem;
  border-radius: 0.375rem;
  font-family: var(--font-hebrew), var(--font-latin);
  font-weight: 500;
  text-align: start;
  /* RTL ではアイコンが自動的に反転 */
}

.btn-icon-start {
  flex-direction: row;
  /* RTL では: アイコンが右側(スタート側)に表示される */
}

.btn-icon-end {
  flex-direction: row-reverse;
  /* RTL では: アイコンが左側(エンド側)に表示される */
}

/* RTL ファースト カードコンポーネント */
.card {
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: start;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 1rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--border-color);
}

/* RTL ファースト サイドバーレイアウト */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  /* RTL では: サイドバーが自動的に右側に表示される */
}

.layout-sidebar {
  border-inline-end: 1px solid var(--border-color);
  padding-inline-end: 1.5rem;
}

ステップ 4: イスラエル色パレットとデザイントークン

:root {
  /* イスラエル向けカラートークン */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;

  /* ステータスカラー(共通) */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-info: #2563eb;

  /* ニュートラルパレット */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-500: #6b7280;
  --color-gray-700: #374151;
  --color-gray-900: #111827;

  /* スペーシングスケール */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* ボーダーラディアス */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;
}

ステップ 5: Gov.il デザインパターン

政府およびイスラエルの公共機関向けウェブサイトの場合は、gov.il デザインシステムに従います:

/* Gov.il 風ヘッダー */
.gov-header {
  background-color: #1a3a5c;
  color: #ffffff;
  padding-block: var(--space-4);
  padding-inline: var(--space-6);
}

.gov-header-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* ロゴ + ヘブライ語サイト名、RTL で右揃え */
}

/* Gov.il フォームパターン */
.gov-form-group {
  margin-block-end: var(--space-6);
}

.gov-label {
  display: block;
  font-weight: 500;
  margin-block-end: var(--space-2);
  color: var(--color-gray-700);
}

.gov-input {
  inline-size: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-family: var(--font-hebrew), var(--font-latin);
  font-size: var(--text-base);
}

.gov-input:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Gov.il ステップインジケーター */
.gov-steps {
  display: flex;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
  /* RTL では: ステップが右から左に流れる */
}

.gov-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.gov-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-500);
  color: #ffffff;
  font-weight: 700;
}

ステップ 6: RTL ファーストフォームパターン

<!-- イスラエルアドレスフォーム -->
<form dir="rtl" lang="he">
  <fieldset>
    <legend>כתובת</legend>

    <div class="form-group">
      <label for="street">רחוב</label>
      <input id="street" type="text" dir="rtl">
    </div>

    <div class="form-row">
      <div class="form-group">
        <label for="house-num">מספר בית</label>
        <input id="house-num" type="text" dir="ltr"
               inputmode="numeric" size="6">
      </div>
      <div class="form-group">
        <label for="apartment">דירה</label>
        <input id="apartment" type="text" dir="ltr"
               inputmode="numeric" size="4">
      </div>
    </div>

    <div class="form-group">
      <label for="city">יישוב</label>
      <input id="city" type="text" dir="rtl">
    </div>

    <div class="form-group">
      <label for="postal">מיקוד</label>
      <input id="postal" type="text" dir="ltr"
             inputmode="numeric" pattern="[0-9]{7}"
             maxlength="7" size="10">
    </div>
  </fieldset>
</form>

例

例 1: イスラエル向けデザインシステムのセットアップ

ユーザーの質問: 「イスラエルの SaaS 製品向けにデザインシステムを作成したい」 結果: Heebo + Inter フォントペアリングを設定、16px 最小本文サイズと 1.7 行高を備えたヘブライ語調整済みタイプスケールをセットアップ、CSS 論理プロパティを使用したRTL ファーストコンポーネントプリミティブ(ボタン、カード、入力、サイドバーレイアウト)を定義、イスラエル向けカラートークンを確立します。

例 2: ヘブライ語フォームコンポーネントの構築

ユーザーの質問: 「適切な RTL レイアウトのヘブライ語アドレスフォームが必要です」 結果: ヘブライ語ラベル付きの RTL フォーム、右揃えフィールドグループ、数値フィールド(建物番号、郵便番号、電話)の LTR 入力方向、ヘブライ語凡例を備えた適切なフィールドセットグループ、イスラエル固有のフィールドパターン(7 桁郵便番号、市区町村セレクター)を作成します。

例 3: Gov.il デザインパターンの実装

ユーザーの質問: 「政府機関のウェブサイトが gov.il デザイン標準に対応する必要があります」 結果: 機関用ブルーを使用した gov.il ヘッダーパターンを適用、RTL フロー対応のヘブライ語ナビゲーション、複数ページフォーム用ステップインジケーター、フォーカスインジケーター付きのアクセシブルフォームスタイリング、必須の政府関連リンク付きフッターを実装します。

バンドルリソース

参照

• references/hebrew-typography.md -- Google Fonts メトリクス付きヘブライ語フォントカタログ、異なるユースケース(SaaS、エディトリアル、政府)向けの推奨ペアリング、フォント読み込みパフォーマンス戦略、ヘブライ語固有の CSS プロパティ(行高、ワード間隔、letter-spacing ルール)、およびヘブライ語/英語バイリンガルインターフェース向けのタイプスケール推奨。

注意点

• ヘブライ語テキストは通常、英語相当のテキストより 15~30% 短くなります。エージェントが英語のテキスト長に基づいて固定幅でUIレイアウトを設計すると、ヘブライ語テキストに過度な余白が発生したり、英語に切り替わる際にレイアウトが崩れたりする可能性があります。
• 標準的なヘブライ語ウェブフォントスタックはシステムフォントを優先する必要があります: "Segoe UI"、"Rubik"、"Heebo"、Arial、sans-serif。エージェントがフォールバックなしで Google Fonts のヘブライ語フォントを使用すると、低速接続で FOUT が発生する可能性があります。
• ヘブライ語のフォームラベルは右揃えで、入力フィールドの右側(またはその上)に配置する必要があります。エージェントはしばしばラベルを入力フィールドの左側に配置しますが、これは英語の慣例であり RTL では不自然に見えます。
• イスラエルの電話番号入力フィールドは、国番号ありとなしの両方の形式を受け入れる必要があります: 054-1234567、+972-54-1234567、および 0541234567。エージェントは国際形式のみを検証する可能性があります。

トラブルシューティング

エラー: 「ヘブライ語テキストが圧縮されているか小さく見える」

原因: ヘブライ語に対してラテン文字最適化のフォントサイズと行高を使用している 解決策: 本文テキストのベースフォントサイズを最低でも 16px に増やします。ヘブライ語の line-height を最低でも 1.7 に設定します。ヘブライ語テキストに letter-spacing を決して適用しないでください。わずかなワード間隔(0.05em)を追加して可読性を向上させます。

エラー: 「コンポーネントレイアウトが RTL で崩れる」

原因: 論理プロパティの代わりに物理的 CSS プロパティ(margin-left、padding-right)を使用している 解決策: すべての物理的方向プロパティを論理的な等価物に置き換えます: margin-inline-start、padding-inline-end、border-inline-start、inset-inline-start。dir 属性を自動的に尊重する flexbox と grid を使用します。

エラー: 「RTL でアイコンが間違った方向を指している」

原因: 方向性のあるアイコン(矢印、シェブロン、戻るボタン)が RTL で反転されていない 解決策: [dir="rtl"] コンテキスト内で CSS transform: scaleX(-1) を使用して方向性のあるアイコンを反転させます。非方向性アイコン(検索、ホーム、設定)は反転させてはいけません。一貫した適用のためにアイコン反転ユーティリティクラスを作成します。