グローバルスタイルとは？

グローバルスタイルはクリエイション全体に適用される CSS で、グリーティング・AI の返信・ユーザーの全メッセージを含むすべてのチャットコンテンツに効果が及びます。

なぜグローバルスタイルが必要なのか？

グローバルスタイルは AI に送信されません。CSS ルールをいくら書いても、トークンは一切消費されません。

グローバルスタイルがない場合、統一されたビジュアルスタイルを実現するには、すべての HTML 要素にインライン style 属性を繰り返し記述する必要があります。これらのインラインスタイルはコンテンツと一緒に AI に送信され、メッセージのたびに余分なトークンを消費します。

例えば、背景・ボーダー・フォント・余白のあるカードコンテナを実装する場合：

インライン記述（毎回繰り返し、AI に送信される）：

<div style="background-color:#1a1a2e;padding:12px 16px;border-radius:8px;color:#eee;font-size:14px;line-height:1.6;border:1px solid #3a3a5c;margin-bottom:8px;font-family:Georgia,serif;letter-spacing:0.5px;">
  コンテンツ
</div>

グローバルスタイル使用後（クラス記述、スタイルは AI に送信されない）：

<div class="card">コンテンツ</div>

このコンテナ1つだけで、インライン記述は約 45〜50 トークン消費しますが、クラス記述ではわずか 4〜5 トークンです。

1回の完全な会話に 20 個のコンテナが登場すると仮定した場合：

方式	コンテナ1個あたり	20個	50ターン累計
インラインスタイル	~47 トークン	~940 トークン	~47,000 トークン
グローバルクラス	~5 トークン	~100 トークン	~5,000 トークン

グローバルスタイルはこの部分の消費を約 90% 削減できます。会話が長くなるほど節約効果は顕著になります。

完全な CSS3 サポート

グローバルスタイルは完全な CSS3 構文をサポートしています：

• セレクタ（クラス・タグ・子孫・擬似クラスなど）
• 変数（--var）
• アニメーション（@keyframes、transition、animation）
• フレックスボックス（flex）
• メディアクエリ（@media）
• その他すべての標準 CSS3 プロパティ

ヒント

• グローバルスタイルは一度定義すれば、すべてのメッセージで繰り返す必要はありません。
• よく使うコンテナ・テキストスタイル・カラー変数などはグローバルスタイルで一元管理することをおすすめします。