紹介ページを飾る
ユーザーがキャラクターに初めて出会う場所は、チャットルームではなくホームのカードと紹介ページです。ここで引かれなければ、会話までたどり着きません。
こんなときに
- キャラクターは丁寧に作ったのに、会話を始める人が少ない。
- 世界観が独特で、短い紹介文だけでは説明しきれない。
- ほかの作品のように、写真と色で飾った紹介ページを作りたい。
見るところは三つ
| どこに表示されるか | 何を入れるか |
|---|---|
| ホーム・検索のカード | カバーイメージと短い紹介文 |
| キャラクターの詳細ページ | 詳細説明(文章、Markdown、HTML) |
| 会話を始める前 | おすすめペルソナ: ユーザーが演じる役の提案 |
良い例と惜しい例
惜しい例短い紹介文:「優しい彼氏との日常。」どの作品とも区別がつきません。
良い例短い紹介文:「3年前に私を捨てた婚約者が、今度は私の護衛になって帰ってきた。」関係と葛藤が一行で見えます。
カバーイメージはホームで**縦長のカード(2:3)**に切り取られて表示されます。顔が上側3分の2に収まるように選ぶと切れません。
やり方
- 最初のステッププロフィールの一番上で、カバーイメージと短い紹介文を入れます。
- 最後のステップ詳細情報の詳細説明は、そのまま文章で書いても構いませんし、飾りたいならHTML紹介の自動生成を押して下書きを受け取ります。
- 自分で作りたいならHTMLの作成ルール → AI用にルールをコピーを押します。コピーしたルールをChatGPTやClaudeに貼り付けて「このキャラクターの紹介ページを作って」と頼むと、アプリでそのまま表示できるHTMLが出てきます。
- 最初のステッププロフィールのおすすめペルソナに、「同じクラスの友だち」「ライバル校のエース」のように、ユーザーが演じたら面白そうな役を入れます。
HTMLで飾るときに知っておくと便利
紹介ページはスマートフォンで見られることが一番多いです。アプリで安全に表示できるよう、いくつかは制限されています。
- できること: 文字サイズ・色・背景などの装飾(
<style>、style="")、外部のhttps画像(<img>)、表・箇条書き・見出し、折りたたみ(<details>)、マウスを乗せると変わる効果、写真の横スクロール(scroll-snap)。 - できないこと: JavaScriptと、ほかのサイトを埋め込む窓(
<iframe>)は保存時に削除されます。ページ内の#リンク移動も、アプリでは動きません。 - **幅はスマートフォン基準(360px)**で組み、固定のpxではなく%を使います。横にスクロールすると見づらくなります。
- 画像には
max-width:100%をつけてください。 - 最初の文字が
<でなければMarkdownとして読まれます。このとき<style>は適用されないので、飾るならHTMLタグで始めてください。 - 長さは空白とタグを合わせて最大30,000文字です。
こんなときは
PCではきれいなのに、スマートフォンで崩れます
- 固定幅(
width: 800px)がないか見てください。%かmax-widthに変えます。
入れた動画やウィジェットが見えません
<iframe>で入れた外部の動画・ウィジェットは表示されません。画像かリンクに変えてください。