israeli-ui-design-system

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

React、Vue、Angular、vanilla HTML/CSS で動作します。コアパターンの利用にネットワーク接続は不要です。コンポーネント開発には Storybook の併用をおすすめします。

手順

ステップ 1：ヘブライ語フォントの組み合わせを選ぶ

ヘブライ語の読みやすさとラテン文字との互換性を考慮したフォントの組み合わせを選択します。

組み合わせ	ヘブライ語フォント	ラテン文字フォント	最適な用途	スタイル
モダンビジネス	Heebo	Inter	SaaS、ダッシュボード、管理パネル	すっきり、中立的
親しみやすいスタートアップ	Rubik	Source Sans 3	コンシューマー向けアプリ、マーケティングサイト	丸みがあり、親しみやすい
政府・フォーマル	Assistant	Roboto	政府機関のサイト、公共機関のページ	プロフェッショナル、明瞭
エディトリアル	Frank Ruhl Libre	Merriweather	ブログ、ニュース、コンテンツサイト	セリフ体、文学的
ミニマル	Secular One	Montserrat	ランディングページ、ポートフォリオ	太字の見出し

フォントの詳細なメトリクスと読み込み方法については、references/hebrew-typography.md をご覧ください。

フォントの読み込み設定：

/* Primary: Heebo + Inter pairing */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700&family=Inter:wght@300;400;500;700&display=swap');

:root {
  /* Latin face FIRST: Inter has no Hebrew glyphs, so Hebrew characters
     fall through to Heebo per glyph. Heebo ships Latin glyphs too, so
     listing it first would render English in Heebo and Inter never loads. */
  --font-sans: 'Inter', 'Heebo', 'Noto Sans Hebrew', Arial, sans-serif;
  --font-mono: 'Fira Code', 'Source Code Pro', monospace;
}

body {
  font-family: var(--font-sans);
}

汎用ファミリー（sans-serif）は常に一致するため、その後に記載したフォントはどれも使われません。テキストを Web フォントの読み込み中も読みやすく保つため、最後に一度だけ、ヘブライ語の字形を含むシステムフォント（ここでは Arial）の後に指定してください。組み合わせたフォントではなく Heebo 固有のラテン文字を使いたい場合は、Heebo だけを指定してください。ここで使用している等幅フォントにはヘブライ語の字形がないため、コード内のヘブライ語はシステムフォントにフォールバックします。

Next.js（next/font）。 事前読み込みするサブセットには hebrew を含めてください。next/font にデフォルトのサブセットはなく、preload が有効な状態で subsets を省略すると警告が表示されます。

import { Heebo, Inter } from 'next/font/google';
const heebo = Heebo({ subsets: ['hebrew', 'latin'], variable: '--font-heebo', display: 'swap' });
const inter = Inter({ subsets: ['latin'], variable: '--font-inter', display: 'swap' });
// <html lang="he" dir="rtl" className={`${inter.variable} ${heebo.variable}`}>

Tailwind v4 では、CSS で @theme inline { --font-sans: var(--font-inter), var(--font-heebo), sans-serif; } のようにマッピングします（テーマ変数が別の変数を参照する場合は inline が必須です）。

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

ヘブライ文字はラテン文字の x ハイトと大文字の高さの間に描かれ、大文字も背の高いアセンダーもありません。そのため、同じフォントサイズではヘブライ語のほうがラテン文字より小さく見えます。スケールはラテン文字ではなくヘブライ語に合わせて設定してください（フォントごとの実測値は references/hebrew-typography.md に記載されています）。

:root {
  /* Hebrew-adjusted type scale */
  --text-xs: 0.8125rem;   /* 13px -- minimum readable Hebrew */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px -- Hebrew body text minimum */
  --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 */

  /* Hebrew-specific line heights (taller than Latin) */
  --leading-tight: 1.4;
  --leading-normal: 1.7;
  --leading-relaxed: 1.9;

  /* NEVER use letter-spacing for Hebrew */
  --tracking-hebrew: normal;
  /* Slight word spacing improves Hebrew readability */
  --word-spacing-hebrew: 0.05em;
}

/* Hebrew body text: dir usually sits on <html>, so match either element */
html[dir="rtl"] body,
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-first button component */
.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-sans);
  font-weight: 500;
  text-align: start;
  /* Icon automatically flips in RTL */
}

.btn-icon-start {
  flex-direction: row;
  /* In RTL: icon appears on the right (start side) */
}

.btn-icon-end {
  flex-direction: row-reverse;
  /* In RTL: icon appears on the left (end side) */
}

/* RTL-first card component */
.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-first sidebar layout */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  /* In RTL: sidebar appears on the right automatically */
}

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

コンポーネントセットのその他の RTL 動作。 ボタン、カード、サイドバーだけが対象ではありません。方向性のあるコンポーネントはすべて反転します。

コンポーネント	RTL での動作
パンくずリスト	右から左に流します。区切り文字（/、>、シェブロン）は左（次のパンくず項目の方向）を指します。テキストの区切り文字（>、›）は双方向テキスト対応の文字であり、RTL ではブラウザーがすでに反転するため、scaleX(-1) を追加しないでください（反転が元に戻ってしまいます）。transform: scaleX(-1) が必要なのは SVG またはアイコンフォントのシェブロンだけです。また、インライン要素には transform が適用されないため、アイコンフォントのグリフには display: inline-block を指定します。
モーダル／ダイアログ	中央に配置されたモーダルに変更は不要です。閉じる（X）ボタンは inline-end（RTL では左上）に配置します。フッターのアクションボタンについては、プライマリボタンを inline-start（RTL では右側）に配置するのが一般的な慣例です。順序を決めて統一してください。
ドロップダウン／メニュー	トリガーの inline-start 端に揃えて開きます。サブメニューのフライアウトは inline-start 方向（RTL では左方向）に展開します。キャレット／シェブロンは反転します。
スライダー／レンジ入力	トラックは inline-start から伸びます。RTL では最小値が右、最大値が左になります。dir="rtl" を指定したネイティブの <input type="range"> はこの動作に対応します。カスタムスライダーでは、塗りつぶしの方向を反転させる必要があります。
プログレスバー	塗りつぶしは inline-start から伸びるため、RTL では進捗が右から左に進みます。ハードコードした left: 0 の起点ではなく、transform-origin／論理プロパティを使用します。
トースト／スナックバー	ビューポートの inline-end 端（RTL では左上または左下）からスライドインします（LTR の右上という慣例を反転させます）。right ではなく inset-inline-end で位置を固定します。

/* Toast anchored to the inline-end edge -- flips sides automatically in RTL */
.toast {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

/* Progress bar fill grows from the inline-start */
.progress-fill {
  block-size: 100%;
  inline-size: var(--progress, 0%);
  /* fill starts at the inline-start edge: right in RTL, left in LTR */
}

Tailwind v4。 どちらの方向でも同じクラスリストが使えるよう、論理ユーティリティを使用します。ps-*／pe-* と ms-*／me-*（インライン方向のパディングとマージン）、border-s／border-e、rounded-s-*／rounded-e-*、text-start／text-end、さらに v4.2.0 以降では inset-s-*／inset-e-* とブロック軸の pbs-*／pbe-*／mbs-*／mbe-* が使えます。v4.2.0 では、start-*／end-* は非推奨となり、inset-s-*／inset-e-* が推奨されています。rtl:／ltr: バリアントは、方向性のあるアイコンの反転（rtl:-scale-x-100）など、本当に例外が必要な場合に限って使用し、余白の指定には使わないでください。

shadcn/ui。 components.json で rtl: true に設定すると、CLI は left-*／right-* を論理クラスに変換し、対応するアイコンを rtl:rotate-180 で反転します。ただし、対象となるのは新しいスタイル（base-nova、radix-nova）で shadcn create を使って作成したプロジェクトのみです。それ以外のプロジェクトでは、移行ガイドに従ってください。DirectionProvider（shadcn add direction）を追加します。また、論理スライドユーティリティに関する既知の tw-animate-css の問題への回避策として、現時点では popover や tooltip のコンテンツなど、ポータル要素にも dir を渡すようドキュメントで案内されています。

反転するアイコン。 読み進む方向を示すアイコンは反転し、それ以外は反転しません。

RTL で反転する	反転しない
戻る／進む矢印、パンくずリストやステッパーのシェブロン、「次へ」や「送信」	メディアの再生、一時停止、シークのコントロール（テープの方向に従うため）
返信、リストのインデント、テキスト配置のアイコン	時計、更新、履歴のアイコン（時間はどこでも時計回りに進むため）
進捗やスライダーの塗りつぶし、直線状のタイムライン	チェックマーク、検索、カメラなど、方向性のないオブジェクト
前進するオブジェクトのアイコン	チャートやグラフ、数字、ロゴ、スラッシュ

元に戻す／やり直しは、水平方向と円形方向の両方を示します。RTL ではどちらか一方を選び、一貫して適用してください。選択を使用箇所ごとに指定するのではなく、（たとえば data-mirror 属性やアイコンレジストリのフラグで）一度だけ定義します。

ステップ 4：イスラエルのカラーパレットとデザイントークン

:root {
  /* Israeli-appropriate color tokens */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;

  /* Status colors (universal) */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-info: #2563eb;

  /* Neutral palette */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-500: #6b7280;
  --color-gray-700: #374151;
  --color-gray-900: #111827;

  /* Spacing scale */
  --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;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;
}

ダークモード（colors-dark トークン階層）。 コンポーネントにダークモードの値をハードコードするのではなく、対応するダークモード用トークンセットを定義します。トークン名は同じにして、コンポーネントが var(--color-bg) / var(--color-text) を参照し、テーマによる分岐をしないようにします。方向とテーマは独立した軸です。つまり、RTL とダークモードは互いに独立しているため、[data-theme="dark"][dir="rtl"] の組み合わせも問題なく動作する必要があります。

:root {
  /* light (default) */
  --color-bg: #ffffff;
  --color-surface: #f9fafb;
  --color-text: #111827;
  --color-border: #e5e7eb;
}

:root[data-theme="dark"] {
  /* colors-dark tier -- same token names, dark values */
  --color-bg: #0b0f19;
  --color-surface: #151b2b;
  --color-text: #e5e7eb;
  --color-border: #2a3346;
}

注：ヘブライ語の字形の影響で、暗い背景上のヘブライ語テキストは細く見えることがあります。コントラストが引き続き WCAG AA を満たしているか確認し、ダークモードの本文テキストにはやや太めのフォントウェイトを検討してください。

コントラストをトークンに組み込みます。 デザインシステムのトークン層で WCAG のコントラストを保証し、コンポーネントの作成者に委ねないようにします。すべてのテキストトークンを対応するサーフェスと組み合わせ、比率を確認します。--color-bg / --color-surface 上の本文テキストは少なくとも 4.5:1、大きなテキスト、アイコン、UI の境界線は少なくとも 3:1 が必要です。ステータストークンは特に監査してください。--color-warning: #d97706 は白背景で 3.19:1（--color-surface 上では 3.05:1）、--color-primary-500: #3b82f6 は 3.68:1 です。これらは大きなテキスト、アイコン、UI の境界線に求められる 3:1 の基準を満たすため（フォーカスアウトラインや塗りつぶしには問題ありません）、通常サイズの本文テキストに求められる 4.5:1 の基準は満たしません。明るい背景上では、これらの色を小さなテキストに使わないでください。テキストに色を使う必要がある場合は、より暗い段階（600/700 のシェード）を導入してください。

ランプには oklch を優先します。 カラ―ランプは、フォールバックの hex 値とともに oklch()（2023 年以降のベースライン）で定義します。知覚的に均一な明度を使うと、手作業で調整した hex 値よりも、アクセシブルなランプやダークモード用のバリエーションをはるかに簡単に生成できます。

トークンを階層化します。 コンポーネントから生のパレット段階（--color-primary-500 など）を直接参照してはいけません。プリミティブ（blue.600）、それを参照するセマンティックロール（color.action.primary）、ロールを参照するコンポーネントトークン（button.bg）の 3 階層を使います。ブランド変更やダークテーマの追加は、これで 1 つの階層を変更するだけで済みます。

トークンは一度だけ記述します。W3C Design Tokens Community Group（DTCG）形式を使います。その Format Module 2025.10 は Final Community Group Report（2025 年 10 月 28 日）です。エイリアスには {group.token} を使い、2025.10 のカラー値はオブジェクト形式です。

{
  "color": {
    "blue": { "600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.145, 0.388, 0.922], "hex": "#2563eb" } } },
    "action": { "primary": { "$type": "color", "$value": "{color.blue.600}" } }
  },
  "button": { "bg": { "$type": "color", "$value": "{color.action.primary}" } }
}

Style Dictionary は v4 以降 DTCG をサポートしていますが、ドキュメントによると 2025.10 はまだ完全にはサポートされておらず、v5 で対応作業中です。そのため、オブジェクト形式のカラー構文を採用する前にバージョンを確認してください。outputReferences: true を指定した css/variables 形式を使うと、出力される CSS にエイリアスの連鎖（--button-bg: var(--color-action-primary)）が保持されるため、トークン階層をコード内でも維持できます。

行の長さ。 メジャートークンを追加し、max-inline-size で適用します。例：--measure-prose: 65ch。ch 単位はラテン文字の「0」の幅を基準にするため、数値をそのまま信頼せず、ブラウザーで実際のヘブライ語の行の長さを確認してください。

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

政府機関や公的機関のイスラエルのウェブサイトでは、正式な参照先は**イスラエル政府デザインシステム（IGDS）**です。これは、gov.il サイト全体でユーザー体験を統一するために使用されている、公式のアトミックデザインシステムです。CC BY 4.0 のもと、Figma Community ファイルとして公開されています。現行バージョンは「Israeli Government DS 3.0」（https://www.figma.com/community/file/1637743894870099523/israeli-government-ds-3-0、問い合わせ先は digital.gov.il）です。以前の「IGDS Design System File 2.0」（https://www.figma.com/community/file/1426262348206342909/igds-design-system-file-2-0）も引き続き掲載されているため、プロジェクトがどちらを基に構築されたか確認してください。gov.il に関連する実際のプロダクトを開発する場合は、近似で済ませず、IGDS の Figma ファイルからトークン、コンポーネント、RTL のヘブライ語イラストスタイルを直接取得してください。IGDS は独自のカラースケール、余白、コンポーネント構造を定義しているため、近似すると公開中の gov.il ページとの違いが目立ちます。

以下の CSS は汎用的な公的機関向けパターンであり、公式の IGDS ではありません。IGDS を利用できない場合は、公的機関らしい外観を実現するための出発点として使用し、利用できるようになったら値を IGDS のトークンに置き換えてください。

/* Generic institutional header pattern (NOT official IGDS tokens) */
.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);
  /* Logo + Hebrew site name, right-aligned in RTL */
}

/* Gov.il form patterns */
.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-sans);
  font-size: var(--text-base);
}

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

/* Gov.il step indicator */
.gov-steps {
  display: flex;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
  /* In RTL: steps flow right-to-left */
}

.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>

イスラエルの本人確認情報と連絡先の入力欄。 ラテン文字を前提とするデザインシステムでは、次の 3 種類の入力欄を適切に扱えません。

<input id="tz" type="text" dir="ltr" inputmode="numeric"
       maxlength="9" autocomplete="off">


<input id="phone" type="tel" dir="ltr" inputmode="tel"
       autocomplete="tel">



<input id="email" type="email" dir="ltr" autocomplete="email">

teudat zehut の 9 桁目はチェックディジットです。桁数が少ない場合は、9 桁になるよう左側にゼロを補います。まずゼロを補ってから検証してください。

function isValidTz(raw) {
  const digits = String(raw ?? '').trim();
  if (!/^\d{1,9}$/.test(digits) || /^0+$/.test(digits)) return false; // no empty, all-zero or non-digit input
  const id = digits.padStart(9, '0');
  let sum = 0;
  for (let i = 0; i < 9; i++) {
    const n = Number(id[i]) * ((i % 2) + 1); // weights 1,2,1,2,...
    sum += n > 9 ? n - 9 : n;                // add the digits of a two-digit product
  }
  return sum % 10 === 0;
}
isValidTz('50012343'); // => true (padded to 050012343)

性別を考慮したマイクロコピー（実践）。 ヘブライ語の動詞と形容詞には性別があるため、男性形のみの命令形（「לחץ」「הירשם」）では、ユーザーの半数に誤った呼びかけになります。一般的な文体として、複数形の命令形（「לחצו」「הירשמו」）や不定詞（「ללחוץ כאן」）を使う方法、または名詞（「הרשמה」）に言い換える方法があります。文体を 1 つ選び、トークンと併せてコンテンツガイドラインに明記してください。

方向が混在するユーザーコンテンツ。 ユーザーが入力した内容や API からの内容は、ヘブライ語の場合もラテン文字の場合もあります。方向を固定しないでください。要素ごとに dir="auto" を指定すると、最初の強い方向性を持つ文字に基づいて方向が決まります。

<textarea dir="auto"></textarea>
<li dir="auto">{{ comment.body }}</li>

dir="auto" はリストのラッパーに一度だけ指定するのではなく、項目ごとに設定してください。ラッパーに一度だけ設定すると、最初の項目の方向が適用され、ほかの項目がすべてずれてしまいます。

ステップ 7：イスラエルの書式規則（通貨、数値、日付）

デザイントークンとコンポーネントには、ラテン文字圏や米国の既定値をそのまま反映するのではなく、イスラエル固有の書式を組み込む必要があります。

通貨：シェケル記号（₪）

シェケル記号 ₪（U+20AA）は、イスラエルの金融関連の文脈では通常、金額の後ろに置かれます（例：1,234.50 ₪）。ただし、小売では ₪ 1,234.50 もよく使われます。どちらの表記を選ぶ場合も、一貫して適用してください。数値は本質的に LTR であるため、ヘブライ語の RTL テキスト内に金額を含める場合は、周囲の句読点が並べ替えられないよう、明示的に双方向テキストを分離する必要があります。

<p>המחיר הוא <bdi>1,234.50 ₪</bdi> בלבד.</p>

// Prefer Intl.NumberFormat over hand-formatting -- it handles symbol placement,
// grouping separators, and invisible RTL marks correctly across browsers.
new Intl.NumberFormat('he-IL', {
  style: 'currency',
  currency: 'ILS',
}).format(1234.5);
// => "‏1,234.50 ‏₪"  (renders as "1,234.50 ₪")

返される文字列は、見た目どおりの "1,234.50 ₪" ではありません。RTL テキスト内で記号がずれるのを防ぐための RTL マーク（U+200F）が 2 つと、改行なしスペースが含まれています。スナップショットや単体テストで、手入力したリテラルとの文字列の完全一致を検証してはいけません。Intl の出力同士を比較するか、最初に ‏  を取り除いてください。

ヘブライ語の本文内の数値

数値（電話番号、ID 番号、価格、日付）は RTL によって逆順にはなりません。ただし、長い数値がヘブライ語のテキスト内にある場合、ブラウザーによって周囲の句読点の配置が変わることがあります。数値要素に <bdi> または dir="ltr" を使って、向きを固定してください。

<p>מספר הזהות הוא <bdi>012345678</bdi>, בתוקף עד 2030.</p>

日付と時刻

イスラエルの日付は日付が先で、米国式の MM/DD/YYYY でも、ユーザー向けの表示で ISO 形式の YYYY-MM-DD を使うこともありません。時刻は 24 時間表記（14:30）を使用します。イスラエルの UI で AM/PM が使われることはまれです。

プラットフォームの区切り文字はスラッシュではなくピリオドです。 CLDR ではヘブライ語の短縮形式が d.M.y と定義されているため、Intl はピリオドを返し、ブラウザーの設定を変えてもスラッシュにはなりません。

new Intl.DateTimeFormat('he-IL', {
  day: '2-digit', month: '2-digit', year: 'numeric',
}).format(new Date(2026, 3, 20));
// => "20.04.2026"   (dateStyle: 'short' gives "20.4.2026")

ピリオドが安全な既定値です。ネイティブユーザーが期待する表記であり、他のあらゆるヘブライ語アプリでも使われています。ブランドガイドラインで 20/04/2026 が必須の場合は、Intl がその形式を返すことを期待せず、自分で組み立ててください。

const parts = Object.fromEntries(
  new Intl.DateTimeFormat('he-IL', { day: '2-digit', month: '2-digit', year: 'numeric' })
    .formatToParts(new Date(2026, 3, 20))
    .map((p) => [p.type, p.value]),
);
`${parts.day}/${parts.month}/${parts.year}`; // => "20/04/2026"

カレンダー。 he-IL では、locale.getWeekInfo?.() ?? locale.weekInfo（const locale = new Intl.Locale('he-IL') を使用。一部のランタイムでは、Node 20 や 22 を含め、古い weekInfo アクセサーしか使えません）を呼び出すと、firstDay: 7（日曜日）および weekend: [5, 6]（金曜日と土曜日）が返されます。日付ピッカーとカレンダーグリッドでは、週の始まりを日曜日にし、土曜日と日曜日ではなく金曜日と土曜日を休日として示す必要があります。ネイティブの <input type="date"> はブラウザー独自のロケール形式で表示されるため、20.04.2026 のテキストの横に 20/04/2026 が表示されることがあります。両者を一致させる必要がある場合は、カスタムピッカーを使ってください。

後続のコンポーネントの一貫性を保てるよう、デザイントークンを定義してください。

:root {
  --date-format-short: 'dd.MM.yyyy';
  --time-format: 'HH:mm';
  --currency-locale: 'he-IL';
  --currency-code: 'ILS';
}

数値の区切り文字

千単位の区切り文字はカンマ（1,234,567）、小数点はピリオド（1,234.50）です。ヨーロッパ式の 1.234,50 に切り替えないでください。イスラエルの金融分野では米国式が使われます。

ステップ 8：両方の方向でテストする

RTL の回帰は視覚的に現れるため、視覚的にテストしてください。Storybook のグローバル設定でプレビューのルートに dir を設定するなどして、すべてのコンポーネントストーリーを dir="rtl" と dir="ltr" の両方（および各テーマ）でレンダリングし、Playwright の toHaveScreenshot() を使って CI で各組み合わせのスナップショットを取得します。物理方向を指定するクラスやプロパティ（ml-、mr-、pl-、pr-、left-、right-、margin-left）があると失敗する lint または grep チェックを追加し、新しいコードで再導入されないようにしてください。

例

例 1：イスラエル向けデザインシステムを設定する

ユーザーの依頼：「イスラエルの SaaS 製品向けにデザインシステムを作成してください」 結果：Heebo と Inter のフォントの組み合わせを設定し、本文テキストの最小サイズを 16px、行の高さを 1.7 とする、ヘブライ語に調整した文字サイズのスケールを設定します。CSS の論理プロパティを使用して、RTL ファーストのコンポーネントプリミティブ（ボタン、カード、入力欄、サイドバーレイアウト）を定義し、イスラエルに適したカラーのトークンを確立します。

例 2：ヘブライ語のフォームコンポーネントを構築する

ユーザーの依頼：「適切な RTL レイアウトのヘブライ語の住所フォームが必要です」 結果：ヘブライ語のラベルと右揃えのフィールドグループを備えた RTL フォームを作成します。数値入力欄（番地、郵便番号、電話番号）は LTR の入力方向にし、ヘブライ語の凡例を使った適切な fieldset グループを設け、イスラエル固有のフィールドパターン（7 桁の郵便番号、市区町村セレクター）を実装します。

例 3：Gov.il のデザインパターンを実装する

ユーザー：「政府のウェブサイトを gov.il のデザイン基準に合わせる必要があります」 結果：行政機関向けの青色を使った gov.il のヘッダーパターン、RTL の流れに沿ったヘブライ語のナビゲーション、複数ページのフォーム向けのステップインジケーター、フォーカスインジケーターを備えたアクセシブルなフォームのスタイル、必須の政府関連リンクを含むフッターを適用します。

同梱リソース

参考資料

• references/domain-checklist.md -- イスラエルの RTL デザインシステムで必ず含める項目と含めることが望ましい項目を、それぞれの出典とともに記載し、対象外の項目も明示しています。
• references/hebrew-typography.md -- Google Fonts の指標を含むヘブライ語フォントカタログ、ユースケース（SaaS、エディトリアル、政府機関）別のおすすめの組み合わせ、フォント読み込みのパフォーマンス戦略、ヘブライ語固有の CSS プロパティ（line-height、word-spacing、letter-spacing のルール）、ヘブライ語と英語のバイリンガルインターフェース向けの文字サイズの推奨値を記載しています。

注意点

• ヘブライ語のテキストは英語の同等の表現より短いことがよくありますが、どの程度短くなるかはコピーによって異なります。エージェントが英語のテキストの長さを基準に固定幅の UI レイアウトを設計すると、ヘブライ語のテキストの周囲に余白が多くなりすぎたり、英語に切り替えたときにレイアウトが崩れたりすることがあります。
• Heebo、Rubik、Assistant は、Google Fonts またはセルフホストで配信されるウェブフォントです。エージェントが汎用フォントファミリーより前にシステムフォールバックを指定せずに読み込むと、読み込み中にテキストがスタイルなしで表示されたり、表示が切り替わったりすることがあります。Step 1 のように、display: swap（または font-display: swap）と、sans-serif より前に Arial などのヘブライ語グリフに対応したシステムフォントを指定してください。
• ヘブライ語のフォームラベルは右揃えにし、入力欄の右側（または上部）に配置してください。エージェントはラベルを入力欄の左側に配置しがちですが、これは英語の慣習であり、RTL では不自然に感じられます。
• イスラエルの電話番号の入力欄では、国番号あり・なしの両方の形式を受け付ける必要があります：054-1234567、+972-54-1234567、0541234567。エージェントは国際形式しか検証しないことがあります。
• シェケル記号（₪）は方向性を持つ文字ではないため、ヘブライ語の段落内にある 1,234.50 ₪ のような価格表示は、ブラウザーによって予測できない位置に移動することがあります。エージェントは通常、ブラウザーの双方向テキストアルゴリズムを信頼し、<bdi> や Intl.NumberFormat('he-IL', { style: 'currency' }) を使用しないため、Chrome と Safari で価格表示に一貫性がなくなります。

参考リンク

出典	URL	確認する内容
Google Fonts – Hebrew	https://fonts.google.com/?subset=hebrew	Heebo、Assistant、Rubik、Frank Ruhl Libre、読み込みスニペット
CSS論理プロパティ（MDN）	https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Logical_properties_and_values	padding-inline、margin-block、論理的な位置指定
Tailwind の RTL サポート	https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support	コンポーネントライブラリ向けの rtl: および ltr: バリアント
shadcn/ui の RTL	https://ui.shadcn.com/docs/rtl	components.json の rtl: true、対応スタイル、DirectionProvider
WCAG クイックリファレンス	https://www.w3.org/WAI/standards-guidelines/wcag/	RTL に適用されるコントラストと読み上げ順序の要件

トラブルシューティング

エラー：「ヘブライ語のテキストが詰まって見える、または小さすぎる」

原因：ラテン文字に最適化されたフォントサイズと行の高さをヘブライ語に使用している 解決策：本文の基本フォントサイズを少なくとも 16px に引き上げます。ヘブライ語の line-height は最低 1.7 に設定します。ヘブライ語のテキストには letter-spacing を適用しないでください。読みやすさを高めるために、word-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"] コンテキスト内で、方向を示す SVG またはアイコンフォントのアイコン（inline-block として指定）に CSS transform: scaleX(-1) を適用して反転します。> や › などのテキストの山形記号は反転しないでください。RTL ではブラウザーがすでに反転します。検索、ホーム、設定などの方向を示さないアイコンは反転しないでください。一貫して適用できるよう、アイコン反転用のユーティリティクラスを作成してください。