グリーティングとは？

グリーティングはユーザーが会話に入ったときに表示される最初のメッセージで、クリエイターがあらかじめ作成します。AI が生成する返信ではなく、あなたが丁寧に設計した「第一幕」——シーンを設定し、キャラクターを紹介し、雰囲気を作り、ユーザーを自然にインタラクションへ誘導するためのものです。

優れたグリーティングは最初の一秒でユーザーを惹きつけ、自分がどんなストーリーの中にいるのかを明確にし、次に何ができるかを示します。

コンテンツのサポート

グリーティングはプレーンテキストおよび HTML5 タグと CSS3 スタイルをサポートし、リッチなレイアウトや視覚的効果を実現できます。

スタイルについては、タグに直接インラインスタイルを重ねるよりも、ローカルスタイルまたはグローバルスタイルを優先的に使用することをおすすめします。ローカルスタイルとグローバルスタイルは AI に送信されず、トークンを消費しません。一方、インラインスタイルはコンテンツと一緒に送信され、毎回のメッセージで余分なトークンを消費します。

グリーティング内では、標準的な HTML 構造を使ってスタイルを参照します：

✅ 推奨：クラスでスタイルを参照

html

<div class="scene">
  <b>夜が降り、街のネオンが雨の中でぼんやりとにじんでいる。</b>
  <br>あなたは半開きのドアを押し開けた。バーの中から低いジャズの音が流れてくる。
</div>

❌ 非推奨：インラインスタイルを直接重ねる

html

<div style="background:#1a1a2e;padding:12px 16px;border-radius:8px;color:#eee;line-height:1.8;">
  <b>夜が降り、街のネオンが雨の中でぼんやりとにじんでいる。</b>
  <br>あなたは半開きのドアを押し開けた。バーの中から低いジャズの音が流れてくる。
</div>

どちらも同じ見た目ですが、インライン記述はコンテンツと一緒に AI に送信され、毎回余分なトークンを消費し、統一管理も難しくなります。

スタイル管理

グリーティングには2種類のスタイル設定があります：

ローカルスタイル

ローカルスタイルはスタイルエディタで直接 CSS を記述し、現在のグリーティングにのみ適用されます。他のコンテンツには影響しません。特定のグリーティングに独自のビジュアル効果を付けたい場合に使います。

css

.scene {
  background: #1a1a2e;
  padding: 12px 16px;
  border-radius: 8px;
  color: #eee;
  line-height: 1.8;
}

.highlight {
  color: #f0c040;
  font-weight: bold;
}

グローバルスタイル

グローバルスタイルで定義したルールは、グリーティング・AI の返信・ユーザーメッセージを含むすべてのチャットコンテンツに統一適用されます。クリエイション全体の統一されたビジュアルスタイルに適しています。

近日公開 JavaScript サポート

まもなくグリーティングの JavaScript 機能をサポート予定です。インタラクティブなロジックを記述することで、本当に動的な没入型の入口を作れるようになります：

フォーム入力：開始前にユーザーに名前・陣営・背景を入力させる
選択肢分岐：ユーザーのクリックに応じて異なるオープニングシーンや雰囲気を表示
動的アニメーション：CSS + JS でタイプライター効果・フェードイン・パーティクル背景など
データプリセット：ユーザーの選択を変数として後続の会話ロジックに引き継ぐ

静的なグリーティングはユーザーを引き込み、インタラクティブなグリーティングはこれがフィクションだと忘れさせます。

お楽しみに。

ヒント

同じクラスがローカルスタイルとグローバルスタイルの両方で定義されている場合、ローカルスタイルが優先されます。
共通のコンテナ・フォント・カラー変数はグローバルスタイルで一元管理し、グリーティング固有のエフェクトはローカルスタイルで対応しましょう。

グリーティングとは？ ​

コンテンツのサポート ​

スタイル管理 ​

ローカルスタイル ​

グローバルスタイル ​

近日公開 JavaScript サポート ​

ヒント ​