arabic-design

アラビア語デザイン — AI 生成 UI における美しいアラビア語

アラビア語は筆記体の連結文字です。文字はつながり、ダイアクリティカルマーク（ً ّ َ）はベースラインの上下に配置されます。AI が生成する CSS のほとんどはラテン文字用に調整されており、まさにそれがアラビア語を崩します。デザインにアラビア語が含まれる場合は常に、これらのルールをデフォルトで適用してください。指示されるまで待たないでください。

ルール 1 — アラビア語に letter-spacing の負の値を絶対に使わない（最大のバグ）

ラテン文字のデザイントレンドでは、詰めたトラッキング（letter-spacing: -0.02em）が好まれます。アラビア語では、負のトラッキングは文字のつながりを重ね合わせ、単語を読めないかたまりに押しつぶします。正のトラッキングも同じくらい誤りです。つながるべき文字を分断してしまいます。

/* ❌ WRONG — crushes connected letters into a blur */
h1 { letter-spacing: -1.5px; }        /* element contains Arabic */

/* ✅ RIGHT */
h1 { letter-spacing: normal; }        /* or 0 — always, for any element containing Arabic */

• アラビア語（またはアラビア語とラテン文字の混在）を含む要素 → letter-spacing: normal。以上です。
• 負または正のトラッキングが許可されるのは、純粋にラテン文字または数字のみの要素（大きな統計数値、$99、VS、すべて大文字のラテン文字ラベル）だけです。

ルール 2 — 本物のアラビア語フォントを使う（ラテンフォントへのフォールバックは絶対に避ける）

アラビア語のグリフを持たないラテンフォントは、暗黙的にシステムフォントへフォールバックします。ウェイトが合わず、見た目が崩れます。常にアラビア語対応フォントを明示的に宣言し、完全なフォントスタックを指定してください。

/* pick one that matches the design's mood: */
font-family: "Cairo", "Tajawal", "IBM Plex Sans Arabic", "Noto Kufi Arabic", sans-serif;      /* modern UI */
font-family: "Almarai", "Rubik", "Baloo Bhaijaan 2", sans-serif;                              /* rounded/friendly */
font-family: "Noto Naskh Arabic", "Amiri", serif;                                             /* editorial/classic */

• 実際に使用するアラビア語のウェイト（最低でも 400/700）を読み込んでください。
• アラビア語に font-style: italic を適用しないでください（疑似斜体は筆記体を崩します）。また、text-transform に頼らないでください（アラビア語には大文字・小文字の区別がありません）。

ルール 3 — 行の高さはダイアクリティカルマークを収めること

太字のディスプレイ用アラビア語には縦方向の余裕が必要です。そうでないと、点やダイアクリティカルマークが上の行と衝突します。

コンテキスト	安全な行の高さ
ディスプレイ見出し（大きく、太字）	1.3
中間の見出し	1.35
本文 / キャプション	1.5〜1.7

不明な場合は、より緩めにしてください。ダイアクリティカルマークが切れると、即座に「壊れて見える」兆候になります。

ルール 4 — 方向と双方向テキスト（「単語が逆になる」系統のバグ）

• 方向はルートで一度だけ設定してください（アラビア語優先のページでは <html dir="rtl">）。子要素は継承します。すべての要素に dir 属性を散りばめないでください。
• レイアウトが正しく反転するように、論理 CSS プロパティを使用してください。margin-left、text-align: left の代わりに margin-inline-start、padding-inline-end、text-align: start を使います。
• アラビア語テキスト内に埋め込まれたラテン文字の単語や数字は、双方向アルゴリズムが順序を並べ替えないよう、独立した span で囲んでください。

  .ltr { display: inline-block; direction: ltr; }
  

  حدد أول <span class="ltr">MVP</span> قبل ما تبدأ
  

• direction: ltr の親からの漏れ（単語順が逆になる根本原因）：カードやカラムの順序のために direction: ltr に設定されたレイアウトコンテナは、内部のアラビア語テキストに LTR を漏らします。その結果、Marketplace مدمج が مدمج Marketplace として描画されます。修正方法：LTR はレイアウトの順序にのみ使用し、内部のすべてのアラビア語テキストブロックには明示的に direction: rtl を設定します。
• الـ + ラテン文字の単語の罠： アラビア語の定冠詞接頭辞（الـ、بالـ、للـ）を、独立したラテン文字の単語の直前に置かないでください。分離した文字が誤った側に飛んでしまいます。冠詞を省く（عبر الـ CLI ではなく عبر CLI）か、言い換えてください。
• RTL のコンテキストでは方向性のあるアイコン（矢印）を反転してください。アラビア語 UI では「次へ」の矢印は左を指します。

ルール 5 — 句読点と改行

• アラビア語の文ではアラビア語の句読点を使用してください。? ではなく ؟、, ではなく ، を使います。
• ? や ، が誤った側に浮く場合、原因はほとんどの場合、境界をまたぐラテン文字のトークンです。それを .ltr で囲むか、文がその周りで中途で分断されないように言い換えてください。
• 見出しを行に分割する場合、各行は文を自然に続けなければなりません。アラビア語の読者は積み重なった行をひとつの流れる思考として読みます。

ルール 6 — モバイルでの可読性

アラビア語の字形は、同じ px サイズではラテン文字よりも密度が高くなります。ソーシャル / モバイル向けのキャンバス（例：幅 1080px）では、本文テキストを約 36〜40px 以上に保ち、ディスプレイテキストにはより重いウェイト（600〜800）を選んでください。

---

出荷前チェックリスト

1. アラビア語を含むセレクターに負の letter-spacing が指定されていないこと:

   grep -nE "letter-spacing:\s*-" file.html
   

   すべての該当箇所は純粋なラテン文字/数字でなければなりません。アラビア語を包含する場合は → normal。
2. すべてのアラビア語要素に、アラビア語対応の font-family が明示されていること。
3. 見出し用アラビア語の行高は 1.3 以上、本文は 1.5 以上であること。
4. 埋め込まれたラテン単語/数字は .ltr で囲まれていること。ラテン単語の直前に الـ/بالـ/للـ がないこと:

   grep -noE "(الـ|بالـ|للـ) ?<?[A-Za-z]" file.html
   

5. direction: ltr の祖先要素がアラビア語テキストブロックに漏れ込んでいないこと。
6. レンダリングして確認する。 結果をスクリーンショットして検査します。文字が連結していること（潰れていない、分離していない）、発音記号が切れていないこと、句読点が正しい側にあること、語順が正しいことを確認します。