グリーティングとは？

グリーティングはユーザーが会話に入ったときに表示される最初のメッセージで、クリエイターがあらかじめ作成します。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 サポート

グリーティング内のコードブロックは、本当に操作できる Web ページとしてレンダリングされ、JavaScript のインタラクションに対応しています：

選択肢分岐：ユーザーのクリックに応じて異なるオープニングシーンや雰囲気を表示
動的アニメーション：CSS + JS でタイプライター効果・フェードイン・パーティクル背景など
セリフの書き込み：setChatInput で選択肢のテキストを入力欄に書き込み、ユーザーが確認して送信
オープニング切り替え：setChatMessages で複数のグリーティングバージョンを切り替え

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

コードブロックの書き方と実行環境はコードブロックとは？、利用できる関数の一覧はオープン機能とは？を参照してください。

ヒント

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

グリーティングとは？ ​

コンテンツのサポート ​

スタイル管理 ​

ローカルスタイル ​

グローバルスタイル ​

JavaScript サポート ​

ヒント ​