ユーザー向け追加説明は、キャラクター紹介ページに表示する内容を自由にデザインできる機能です。
追加説明を入力すると、従来の世界観・キャラクター説明に代わって、その内容が表示されます。公開したい情報だけをまとめたり、MarkdownやHTMLを使ってキャラクターの雰囲気に合った紹介ページを作ったりできます。
追加説明に入力した内容は、キャラクターのプロンプトには含まれません。 AIに覚えてほしい設定や、会話に反映してほしい設定は、世界観・キャラクター説明などの設定欄に入力してください。
以下は、キャラクターのユーザー向け追加説明を対象としたガイドです。チャットメッセージやウィジェットでは、使用できるコードや処理方法が異なる場合があるので、区別して確認してください。
追加説明は、最大15,000文字まで入力できます。
画面に表示される文章だけでなく、Markdownの記号、HTMLタグ、スタイル、画像URL、空白、改行もすべて文字数に含まれます。
一部の絵文字や特殊文字は、見た目が1文字でも複数の文字として数えられることがあります。最終的な文字数は、入力欄に表示される数値を確認してください。
AIで作成する場合は、文章だけを数えないように、入力欄に貼り付ける最終的な内容全体を対象に文字数を確認するよう依頼してください。JavaScriptで確認する場合は、文字列の
lengthを基準にします。
修正や翻訳に備えて、文字数には余裕を持たせておくことをおすすめします。たとえば、最初は14,000文字前後を目安に作成してから、必要な内容を追加できます。
Q. 紹介文に入れたい内容が多すぎる場合は、どうすればいいですか？
利用案内や制作者からのメッセージは、クリエイターコメントに分けて記載できます。クリエイターコメントは、別枠で最大30,000文字まで入力できます。
2つの欄にHTMLを分ける場合は、それぞれの欄に独立した完成形のHTMLを入力してください。追加説明で開いたタグを、クリエイターコメントで閉じることはできません。
Markdownは、簡単な記号で見出し、強調、リストなどを表現できる書き方です。背景色や複雑なレイアウトを使わず、内容を読みやすく整理したいときに利用できます。
追加説明では、以下のMarkdown記法を使用できます。
用途 | 書き方 |
|---|---|
見出し | # 見出し、 |
太字 | **強調する内容** |
斜体 | *斜体にする内容* |
取り消し線 | ~~取り消す内容~~ |
番号なしリスト | - リストの内容 |
番号付きリスト | 1. 最初の項目 |
引用 | > 引用する内容 |
区切り線 | 独立した行に |
リンク | [表示する文字](https://caveduck.io) |
画像 |  |
短いコードの表示 | 内容をバッククォート1つずつで囲む： |
見出しは、# を1個から6個まで使って区別できます。見出し、リスト、引用を書くときは、記号の後に半角スペースを1つ入れてください。
通常の本文では、Enterを1回押すと改行が反映されます。段落を分けたいときは、空行を入れてください。見出し・リスト・引用・区切り線の前後にも空行を入れると、区切りがわかりやすくなります。
表は、次のように記述できます。
| 項目 | 内容 |
| --- | --- |
| 名前 | キャラクター名 |
| 職業 | キャラクターの職業 |複数行のコードをそのまま表示したい場合は、内容の前後にそれぞれ独立した行を作り、バッククォートを3つ記述してください。これは、コードを実行したりデザインとして適用したりする機能ではなく、コード自体を表示する機能です。
以下の例をコピーして、キャラクターに合わせて編集してください。入力欄には、コードブロック内の内容だけを貼り付ければ大丈夫です。
Markdownだけでは、背景色、枠線、文字サイズ、複数列の配置などを細かく指定することは難しいです。このようなデザインが必要な場合は、HTMLで作成してください。
HTMLを使うと、背景色、余白、枠線、画像の配置などを直接設定して、紹介ページをデザインできます。
ただし、HTMLは許可されたタグと属性だけを残す処理を経て表示されるため、一般的なWebページで動作するコードがすべて使えるわけではありません。
HTMLを直接記述する場合は、以下のタグを使用してください。
用途 | 使用できるタグ |
|---|---|
セクションや段落を分ける | <div>、 |
文字を強調する | <b>、 |
改行や区切り線を入れる | <br>、 |
画像やリンクを入れる | <img>、 |
以下のタグは、直接記述するHTMLの許可リストに含まれていません。
<section>, <article>, <header>, <footer>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<table>, <ul>, <ol>, <li>
<details>, <summary>
<button>, <input>
<svg>, <canvas>見出しや表のようなレイアウトを作りたい場合は、<div> や <span> にスタイルを設定してください。追加説明では、<details> と <summary> を使った折りたたみ・展開機能には対応していません。
Markdownで記述した見出し・リスト・表は、別の処理で表示されます。Markdownで表示できる要素でも、同じ見た目のHTMLタグを直接使えるとは限りません。
Q. YouTubeの動画を入れられますか？
YouTubeの埋め込みは例外として対応しています。以下の形式のURLを使用した有効な
<iframe>コードは、専用プレーヤーに変換されます。一般的なWebページを埋め込む
<iframe>には対応していません。YouTubeの埋め込みでも、元のコードのスタイルやオプションがそのまま維持されるとは限りません。
背景色、余白、枠線などを設定する場合は、各タグの style 属性の中にCSSを記述してください。この方法をインラインスタイルと呼びます。
<div style="background:#f5f1eb;color:#302b26;padding:20px;border-radius:12px;">内容を入力してください。</div>インラインスタイルでは、色、背景、余白、枠線、角丸、影、文字サイズ、行間などを設定できます。FlexやGridを使ったレイアウトも可能です。
position、transform、filter も、一律に禁止されているCSSプロパティではありません。ただし、設定によってはブラウザーやアプリで見え方が異なる場合があるため、実際の画面で確認してください。
以下の方法は使用できません。
<style>タグや外部CSSファイルでスタイルを定義する方法<script>、onclick、onmouseoverなど、JavaScriptの実行が必要な方法React・JSX、Tailwind・Bootstrapなど、別途実行環境や外部ライブラリが必要な方法
@media、@font-face、@keyframes、:hover、::beforeなど、別途CSSルールの定義が必要な方法
class 名を書くだけで、自動的にデザインが適用されるわけではありません。 プラットフォーム内部のクラスには依存せず、必要なスタイルを各タグの style 属性に記述してください。
Q. 好きなフォントを使えますか？
font-familyでフォントを指定することはできます。ただし、フォント名を書くだけで、そのフォントがダウンロードされるわけではありません。指定したフォントがない環境でも読めるように、標準フォントや代替フォントも一緒に指定してください。
追加説明では、Markdownの処理も行われます。そのため、コードのインデントや改行によっては、HTMLがデザインとして表示されず、コード自体がそのまま見えてしまうことがあります。
HTMLを書くときは、以下の点に注意してください。
タグとタグの間では、Enterを1回押して改行してください。 すべてのコードを1行につなげる必要はありません。
行頭にタブや4つ以上の空白を使ったインデントを入れないでください。 特に、空行の後にインデントされたコードは、Markdownのコードブロックとして認識される場合があります。AIには、行頭にインデントを付けずに作成するよう依頼するのがおすすめです。
HTML内に不要な空行を繰り返し入れないでください。空行が必ずエラーを起こすわけではありませんが、Markdownとして解釈される範囲に影響することがあります。
AIがHTMLをコードブロックで回答した場合は、その中のHTMLだけをコピーしてください。デザインとして適用する場合、先頭と末尾のバッククォート3つや、
htmlの表記は入力欄に貼り付けないでください。タグの前にバックスラッシュを付けた
\<div>や、タグを文字に変換した<div>は使わないでください。実際のHTMLタグは<div>のように記述します。引用符やタグは、忘れずに閉じてください。属性値には、通常の引用符
"または'を使用してください。HTML内では、
**強調**のようなMarkdownではなく、<strong>強調</strong>を使ってください。HTML内のMarkdownは変換されず、そのまま表示される場合があります。
HTMLコードを読みやすくするための改行と、画面に表示する改行は別のものです。
HTMLコード内でEnterを押しても、画面上の文章が必ず改行されるわけではありません。画面上で文章を改行する場合は <br> を使い、段落を分ける場合は <p> または <div> を使用してください。
開始タグの属性とスタイルは1行にまとめ、タグとタグの間で改行する書き方をおすすめします。
画像を入れる場合は、<img> タグの src に、他のユーザーもアクセスできる画像URLを指定してください。Caveduckにアップロードした画像のURLを使うことをおすすめします。
自分のパソコン上のファイルパス、file:// のURL、ローカルプレビュー用のURLは、ほかのユーザーに画像を表示するためには使えません。画像をBase64文字列としてコードに直接埋め込むと文字数が大幅に増えるため、避けることをおすすめします。
Markdownで画像を挿入する場合も、ほかのユーザーがアクセスできる画像URLを使用してください。
パソコンだけでなくスマートフォンでも読みやすくなるよう、以下の点も確認してください。
全体の幅が画面に合わせて縮まるようにしてください。 たとえば、外側の領域に
width:100%;max-width:640px;box-sizing:border-box;を設定できます。640pxはあくまで例で、決められた規格ではありません。画像は
display:block;max-width:100%;height:auto;を基本にすると、領域からのはみ出しを抑えられます。本文領域の高さを固定したり、はみ出した文字を隠したりしないことをおすすめします。自動翻訳で文章が長くなると、内容が切れてしまう場合があります。
複数の列を使う場合は、狭い画面でも折り返せるようにしてください。
読みやすさのため、本文は12～14px以上、小さな補助文字も10px以上をおすすめします。これは推奨サイズであり、プラットフォームの必須制限ではありません。アプリでも文字サイズや改行を確認してください。
翻訳する文章は画像に埋め込んだり、1文字ずつ別のタグに分けたりせず、文や意味のまとまりごとに記述してください。
{{char}}、{{user}}などの置換キーワードを使う場合は、綴りと波括弧をそのまま維持してください。
以下は、許可されたタグとインラインスタイルだけで作成した簡単な例です。入力欄には、コードブロック内のHTMLだけをコピーしてください。
<div style="width:100%;max-width:640px;margin:0 auto;padding:20px;box-sizing:border-box;background:#f5f1eb;color:#302b26;font-size:14px;line-height:1.8;">
<p style="margin:0 0 12px;font-size:20px;font-weight:700;">キャラクター名</p>
<p style="margin:0 0 16px;">キャラクターを紹介する文章です。<br>続けて表示したい内容を入力してください。</p>
<div style="padding:14px;border:1px solid #d7cfc4;border-radius:10px;">
<p style="margin:0;"><strong>基本情報</strong><br>年齢や職業など、公開したい情報を入力してください。</p>
</div>
</div>一般的なブラウザーでHTMLファイルを開いた場合と、Caveduckに適用した場合では、見え方が異なることがあります。完成後は、作成画面のプレビューを確認し、保存した紹介ページもパソコンとスマートフォンで確認してください。
AIに作成を依頼する場合は、まずMarkdownとHTMLのどちらで作成するかを伝えてください。
簡単な見出しやリストで内容を整理したい場合はMarkdownを、背景色や枠線などの細かなデザインを設定したい場合はHTMLを指定するとよいでしょう。
キャラクターの雰囲気、使いたい色、公開する内容、画像URLも一緒に伝えると、イメージに合った紹介ページを作りやすくなります。
以下の作成条件は、HTMLでの作成を依頼するときに、希望するデザインの説明と一緒に伝えてください。
Caveduckのキャラクターの「ユーザー向け追加説明」に貼り付けるHTMLを作成してください。
最終的なHTMLコード全体を、JavaScriptの文字列の
lengthを基準に15,000文字以内で作成し、修正用の余裕を残してください。タグ、スタイル、画像URL、空白、改行も文字数に含めてください。使用できるHTMLタグは
div、p、span、b、strong、i、em、br、hr、img、aです。スタイルは、各タグの
style属性にだけ記述してください。完全なWeb文書の構造、
<style>・<script>タグ、外部CSS・フォントの読み込み、JavaScript、React・JSX、独自のCSSクラスは使用しないでください。
@media、@font-face、@keyframes、:hover、::beforeなど、別途CSSルールの定義が必要な方法は使用しないでください。
<table>、<details>、<summary>、<svg>など、許可リストにないタグは使用しないでください。開始タグの属性とスタイルは1行にまとめ、タグとタグの間には実際の改行を1回入れてください。不要な空行や行頭のインデントは入れないでください。
HTML内にMarkdownを混ぜず、画面上に表示する改行は
<br>で処理してください。スマートフォンで画面幅を超えないようにし、翻訳で文章が長くなっても内容が切れないようにしてください。
本文は原則として12～14px以上、小さな補助文字は10px以上にしてください。
翻訳対象の文章は1文字ずつタグに分けず、文や意味のまとまりごとに記述してください。
画像には私が提供したURLだけを使用し、
{{char}}・{{user}}のキーワードは変更しないでください。最終回答は、そのまま貼り付けられるHTMLだけを出力してください。バッククォートによるコードフェンスや説明文は付けないでください。