PixelyChat自分らしく
自分だけのテーマを作成。
PixelyChatテーマは小さな1ファイルです。コードを書く必要はありません。ほしい見た目を説明し、ClaudeやChatGPTなどのAIアシスタントに既存テーマを変更してもらい、その結果をインポートするだけです。
チャットの見た目を変えたい場合は チャットスタイルを作成 ↓
1. 元になるテーマを用意
- から好きなテーマをダウンロードします。 テーマライブラリ — たとえば、作りたい雰囲気に近いものがおすすめです。
- またはPixelyChatで シーンテーマを開き、テーマを選んで 編集用に書き出す をクリエイターツールから選びます。
.pixelytheme ファイルは、拡張子名が違うだけの通常のZIPアーカイブです。AIチャットがアップロードを拒否する場合は、ファイル名を .zipへ変更してください。各パッケージには README.md があり、AI向けにフォーマットが説明されています。
2. AIに依頼
アップロードしたファイルを読めて 、 ファイルを返せるアシスタントを使います（ファイル作成対応のClaude、またはファイルアップロードとコード実行が使えるChatGPT）。テーマファイルを添付し、次のプロンプトを貼り付け、指定部分を書き換えてください：
PixelyChatテーマ（.pixelythemeファイル。実体はZIPアーカイブです。開けない場合は.zipとして扱ってください）を添付しました。これを私用の新しいテーマに作り変えてください。
まず最初に展開し、README.mdを読んでください。これはPixelyChatテーマ形式の公式ガイドで、利用できるすべてのCSSフックが記載されています。次にtheme.json、theme.css、fields.jsonを読んでください。
希望する見た目：
[ここにテーマを説明：雰囲気、色、形、フォント、アニメーション。例：「ネオン・シンセウェーブ。濃い紫のパネル、ホットピンクとシアンのアクセント、光る境界線、アラートにゆっくり脈動する光。」]
ルール
- theme.json：新しく一意な「id」（小文字、数字、ハイフンのみ）と新しい「name」を設定してください。「author」は {"name": "[あなたの名前]", "type": "creator"}、「version」は「1.0.0」にし、「released」に今日の日付をYYYY-MM-DD形式で追加してください。「basedOn」「supports」を含むその他のフィールドは維持してください。
- テーマは見た目だけを変更します。CSS、JSON、同梱ファイルのみを使用し、JavaScript、@import、外部URLは禁止です。画像とフォントはassets/内に置き、相対パスで参照してください。
- 「supports」に記載されているすべての領域（アラート、リワード、ウィジェット、Starting Soon / Be Right Back / Shoutout画面）をスタイルしてください。どんな配信背景でも文字が読めるようにし、横向き・縦向きの両方で動作させてください。
- サイズは小さく保ってください。使用権がある画像、フォント、サウンドだけを使ってください。古いpreview.webpが新しい見た目と合わず、新しいプレビューをレンダリングできない場合（小さなWebP、約1280x720、150KB未満）は削除してください。
- パッケージ化：テーマフォルダーの「中身」をZIPにして、theme.jsonがサブフォルダー内ではなくアーカイブ直下に来るようにし、ファイル名を[id].pixelythemeにしてください。
完了したら、最終的な.pixelythemeファイルをダウンロードできる形で渡し、変更内容と確認できなかった点を一覧にしてください。
3. インポートして試す
- AIから返されたファイルをダウンロードします。
- PixelyChatで シーンテーマ を開いて テーマをインポート。
- をクリックします。プレビューを確認し、次にアラート、ウィジェット、各画面を確認します。まだ違う場合は、AIへ直したい点を伝えてください。スクリーンショットも役立ちます。新しいファイルをインポートすると、既存テーマの更新が提案されます。
- インポートしたテーマはいつでも削除できます。内蔵テーマは残ります。
4. 共有する（任意）
完成しましたか？ .pixelytheme ファイルを [email protected] へ、作者として表示したい名前と一緒に送ってください。一部確認を行い、問題がなければ テーマライブラリ へ追加して、みんなが使えるようにします。
共有する権利があるものだけ送ってください。 テーマを送信することで、自分が作成したか配布する権利を持っていること、また許可なく第三者の著作物（画像、フォント、音声、ロゴ、キャラクター）を含まないことを確認したものとみなします。投稿テーマはユーザー作成コンテンツであり、PixelyChatによる確認は一部のみです。内容についての責任は作者にあり、PixelyChatはいつでもテーマを削除できます。
チャットスタイル
自分だけのチャットスタイルを作ろう。
チャットスタイルは、チャットオーバーレイに表示されるメッセージの見た目を変えます。名前タグ、カード、枠線、バッジ、装飾などです。仕組みはテーマと同じで、小さな .pixelystyle ファイル1つだけ。AIアシスタントに作ってもらうこともできます。
1. 元になるスタイルを用意する
- チャットスタイルライブラリ から好きなスタイルをダウンロードします。
- または PixelyChat で チャット → スタイル を開き、インストール済みのチャットスタイルを選んで スタイルオプション の 編集用にエクスポート をクリックします。このコピーには、あらゆる種類のメッセージを表示するテストページ（
dev/test.html）も含まれます。
.pixelystyle ファイルは名前が違うだけの通常のZIPアーカイブです。AIチャットがアップロードを受け付けない場合は、拡張子を .zip に変更してください。すべてのパッケージには、AIに形式を説明する README.md が含まれています。
2. AIに依頼する
スタイルファイルを添付し、このプロンプトを貼り付けて、指定の部分を記入してください：
PixelyChatのチャットスタイル（.pixelystyleファイル。実体はZIPアーカイブです。開けない場合は.zipとして扱ってください）を添付しました。これを私用の新しいチャットスタイルに作り変えてください。
まず最初に展開し、README.mdを読んでください。これはPixelyChatチャットスタイル形式の公式ガイドで、メッセージの構造、すべてのクラスとdata属性、CSS変数が記載されています。次にchat-style.json、style.css、fields.jsonを読んでください。
希望する見た目：
[ここにチャットスタイルを説明：雰囲気、色、形、名前タグ、バッジ、装飾。例：「居心地のいい秋。温かみのある茶色のカード、オレンジの名前タグ、各メッセージの角に小さな葉、モデレーターにはカエデの葉のアイコン。」]
ルール
- chat-style.json：新しく一意な "id"（小文字、数字、ハイフンのみ）と新しい "name" を設定してください。"author" は {"name": "[あなたの名前]"}、"version" は "1.0.0" にし、"released" に今日の日付をYYYY-MM-DD形式で追加してください。"format"、"schemaVersion"、"styleApiVersion" はそのまま残してください。
- チャットスタイルは見た目だけを変更します。CSS、JSON、同梱ファイルのみを使用し、JavaScript、@import、外部URLは禁止です。画像とフォントはassets/内に置き、相対パスで参照してください。
- 背景、角、エッジ、アクセントカラーのCSS変数（README.mdに記載）を使える場所ではできるだけ使い、PixelyChatのスタイル設定が引き続き機能するようにしてください。装飾はアクセントカラーで塗り（単色SVGをマスクとして使用）、配信者の色に合わせて変わるようにしてください。
- すべての種類のメッセージをデザインしてください：各ロール（配信者、モデレーター、VIP、サブスク、視聴者）の通常メッセージ、エモートだけのメッセージ、イベント（フォロー、サブスク、ギフト、レイドなど）。どんな配信背景でも文字が読みやすいようにしてください。
- 軽く保ってください：ループアニメーション、backdrop-filter、ぼかしは使わず、登場アニメーションは短いものを1つまでにしてください。パッケージは小さく（最大5 MB）。使用許可のある画像とフォントだけを使ってください。古いpreview.webpが新しい見た目と合わず、新しいもの（小さなWebP、約960x540、150 KB未満）を作成できない場合は削除してください。
- パッケージ化：chat-style.jsonがアーカイブの最上位に来るように（サブフォルダー内ではなく）スタイルフォルダーの中身をZIP圧縮し、dev/フォルダーは除外して、ファイル名を[id].pixelystyleにしてください。
完了したら、完成した.pixelystyleファイルをダウンロードできる形で渡し、変更点と確認できなかった点を一覧にしてください。
3. インポートして試す
- AIから受け取ったファイルをダウンロードします。
- PixelyChatで チャット → スタイル → スタイルライブラリ を開き、スタイルをインポート をクリックします。
- オーバーレイ でスタイルを選び、プレビューを確認します。背景、角、エッジ、アクセントカラーの設定もこのスタイルで使えます。まだイメージと違う場合は、変更点をAIに伝え（スクリーンショットがあると便利です）、新しいファイルをインポートしてください。インストール済みのスタイルを更新するよう案内されます。
- 軽く保ちましょう：メッセージは配信中ずっと画面に表示されるため、ループアニメーションやぼかしはOBSのパフォーマンスを消費します。
4. 共有する（任意）
仕上がりに満足したら、.pixelystyle ファイル（最大5 MB）を、作者として表示したい名前を添えて [email protected] に送ってください。一部確認を行い、問題がなければ チャットスタイルライブラリ に追加して、みんなが使えるようにします。
共有してよいものだけを送ってください。 チャットスタイルを送ることで、あなた自身が作成したか配布する権利を持っていること、そして許可なく第三者の著作物（画像、フォント、ロゴ、キャラクター）を含まないことを確認したものとみなします。送られたチャットスタイルはユーザー作成コンテンツであり、PixelyChatによる確認は一部のみです。内容の責任は作者にあり、PixelyChatはいつでもスタイルを削除できます。