紹介ページを飾る

ユーザーがキャラクターに初めて出会う場所は、チャットルームではなくホームのカードと紹介ページです。ここで引かれなければ、会話までたどり着きません。

こんなときに

  • キャラクターは丁寧に作ったのに、会話を始める人が少ない。
  • 世界観が独特で、短い紹介文だけでは説明しきれない。
  • ほかの作品のように、写真と色で飾った紹介ページを作りたい。

見るところは三つ

どこに表示されるか何を入れるか
ホーム・検索のカードカバーイメージと短い紹介文
キャラクターの詳細ページ詳細説明(文章、Markdown、HTML)
会話を始める前おすすめペルソナ: ユーザーが演じる役の提案

良い例と惜しい例

惜しい例

短い紹介文:「優しい彼氏との日常。」どの作品とも区別がつきません。

良い例

短い紹介文:「3年前に私を捨てた婚約者が、今度は私の護衛になって帰ってきた。」関係と葛藤が一行で見えます。

カバーイメージはホームで**縦長のカード(2:3)**に切り取られて表示されます。顔が上側3分の2に収まるように選ぶと切れません。

やり方

  1. 最初のステッププロフィールの一番上で、カバーイメージと短い紹介文を入れます。
  2. 最後のステップ詳細情報の詳細説明は、そのまま文章で書いても構いませんし、飾りたいならHTML紹介の自動生成を押して下書きを受け取ります。
  3. 自分で作りたいならHTMLの作成ルール → AI用にルールをコピーを押します。コピーしたルールをChatGPTやClaudeに貼り付けて「このキャラクターの紹介ページを作って」と頼むと、アプリでそのまま表示できるHTMLが出てきます。
  4. 最初のステッププロフィールのおすすめペルソナに、「同じクラスの友だち」「ライバル校のエース」のように、ユーザーが演じたら面白そうな役を入れます。

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>で入れた外部の動画・ウィジェットは表示されません。画像かリンクに変えてください。