CodeKitHubこのツールとは？
カスタムチャットジェネレーターは、特定の実在プラットフォームのブランドに縛られないチャット画像を作成できるブラウザ内モックアップツールです。固定のブランドカラーではなく、「送信」用の吹き出しと「受信」用の吹き出しそれぞれにカラーピッカーが用意されているので、架空のアプリや仮想のUIコンセプトに合わせたり、ミームやプレゼンに合う好きな色を選んだりできます。
ストーリーやワイヤーフレーム、架空のアプリについての冗談などで、特定の実在メッセージアプリの見覚えのあるブランド要素に注意をそらされたくないチャットモックアップが欲しいときに便利です。
エンタメとデザイン用途に限定：このツールは冗談、ミーム、寸劇、プレゼン資料、UI/UXプロトタイプ、SNSコンテンツのために作られています。詐欺的な証拠の捏造、嫌がらせや誹謗中傷、実在の人物が実際に送ったメッセージを装う行為には絶対に使用しないでください——法域によっては違法となる可能性があり、このツールの想定用途とは明確に異なります。
入力した内容はあなたの端末から一切外に出ません——会話全体はHTML CanvasのAPIを使ってブラウザ内で直接描画され、PNGファイルもローカルで生成・ダウンロードされます。サーバーへのアップロード、アカウント登録、メッセージ内容の追跡は一切ありません。
なぜこれを使うのか？
- 自社開発中のメッセージアプリのUIコンセプトをクライアントに提案する際、既存アプリのブランドカラーを使わず、自社のコーポレートカラーで吹き出しの配色を再現したデザインモックアップを作りたいとき。
- YouTubeの寸劇動画やTikTokのコント動画で、架空のチャットアプリの会話シーンを差し込みたいが、特定の実在アプリのロゴやUIをそのまま使うと著作権的にグレーになってしまうとき。
- プレゼン資料のスライドに『こんな会話があったとします』という架空の例え話を、実際のチャット画面のような臨場感を持たせて見せたいとき。
- ゲームのシナリオやビジュアルノベルの企画書で、キャラクター同士のメッセージのやり取りシーンをイメージ画像として先に共有したいとき。
- 既存アプリの色に縛られず、送信側と受信側の吹き出し色をブランドの世界観に合わせて自由に組み合わせたいとき。
- アバターに実際の顔写真をアップロードする場合でも、画像がサーバーに送信されず、すべてブラウザ内のcanvasだけで処理されることが安心材料になるとき。
使い方
- 連絡先の名前とステータス文言を設定し、周囲のUIのダークまたはライトテーマを選びます。
- 2つのカラーピッカーを使って、送信用の吹き出しの色と受信用の吹き出しの色をそれぞれ選びます。
- アバター用の写真をアップロードするか、イニシャル入りの色付き円のままにします。
- メッセージ行を追加します：本文を入力し、送信側（相手／自分）とタイムスタンプを選びます。
- ステータスバー（時刻・電池残量・電波強度）をお好みに調整します。
- スマホ型プレビューがリアルタイムに更新される様子を確認し、「PNGをダウンロード」をクリックして画像を保存します。
例
入力
連絡先：「Alex」・送信吹き出し：紫・受信吹き出し：薄いグレー・メッセージ1（相手）：「今夜の予定は変わってない？」・メッセージ2（自分）：「うん！8時にね😊」出力
375×812のPNG画像で、チャット画面——左側の薄いグレーの吹き出しに最初のメッセージ、右側の紫色の吹き出しに返信が表示されます——あなたが選んだ色そのままです。画像はライブプレビューのcanvas上で即座に生成され、ワンクリックでダウンロードできます——待ち時間もアップロードも不要です。
カスタマイズできる項目
- 連絡先名、ステータス文言、周囲のUIのダーク／ライトテーマ。
- 送信用と受信用の吹き出しの色——それぞれ独立して選択可能。
- アバター：実際の写真をアップロード（円形にトリミング）するか、デフォルトの色を選択。
- 無制限のメッセージ行——それぞれに本文、送信側（相手／自分）、タイムスタンプを設定可能。
- スマホのステータスバー：時刻、電池残量（％）、電波強度。
責任ある利用について
このジェネレーターは、ユーモアやストーリーテリング、デザイン作業のために、明確にフィクションであるチャット画像を手軽に作成できるようにすることを目的としています。証拠を捏造したり、嫌がらせを仕組んだり、偽の会話を本物だと誰かに誤解させたりするためのツールではありません。このツールで作成した画像を共有する際は、「フィクション」や「モックアップ」といった注記を添えることを検討してください。
用途別・書き出し設定の目安
利用シーンによって、最適なテーマやアスペクト比の使い方は変わります。以下は代表的な用途ごとの設定の目安です。
| 用途 | おすすめの設定 |
|---|---|
| SNS（Instagramストーリーズ・TikTok）投稿用 | 縦長のスマホ比率のまま、背景テーマは投稿先アプリの表示モードに合わせる |
| プレゼン資料への埋め込み | スライドの配色に合わせて吹き出しの色をブランドカラーに統一する |
| UI/UXプロトタイプの共有 | 実在アプリと誤認されない配色（既存アプリのブランドカラーを避ける）を選ぶ |
| 動画コンテンツの一場面として使用 | 文字が小さくなりすぎないよう、メッセージは短く区切って複数行に分ける |
よくある質問
このツールを使うのは合法または倫理的ですか？
ツール自体は、エンターテインメント、モックアップ、プレゼンテーション、デザイン作業のために使う分には合法です。合法でも倫理的でもないのは、生成した画像を使って誰かをだますこと——例えば実際の会話であるかのように見せかけて詐欺を働いたり、誰かを嫌がらせ・誹謗中傷したり、ある人物が実際に送ったメッセージであるかのように装ったりすることです。明確にフィクションまたは説明目的の用途にのみ使用してください。
ツールは私のメッセージや写真をどこかにアップロードしますか？
いいえ。入力したすべてのメッセージ、名前、写真、設定はブラウザのメモリ内に留まり、JavaScriptによって直接canvas要素に描画されます。PNGファイルはお使いの端末上で生成・ダウンロードされ、サーバーに送信されることは一切ありません。
このツールとプラットフォーム専用のチャットジェネレーター、どちらを使うべきですか？
モックアップが特定の実在アプリ——WhatsApp、Telegram、Messenger、Signal、WeChat、LINE——に見える必要がある場合は、そのアプリ専用のジェネレーターを使うと、色・チェックマーク・ヘッダーのスタイルが視聴者の期待に合ったものになります。架空のアプリのチャットモックアップやワイヤーフレーム、特定の実在ブランドの見た目を出したくないコンテンツで、吹き出しの正確な色を自分で選びたい場合は、代わりにこのカスタムチャットジェネレーターを使ってください。
実際の写真をアバターとしてアップロードできますか？
はい。「写真をアップロード」をクリックすれば、端末内の好きな画像を連絡先のアバターとして使えます——自動的に円形にトリミングされます。この手順を省略した場合、アバターは連絡先名から生成されるイニシャル付きの色付き円になります。写真はブラウザ内でのみローカルに使用され、どこにもアップロードされません。
書き出される画像のサイズは？
プレビューと書き出されるPNGは、デフォルトでスマホ画面のアスペクト比（375×812）を使用しており、SNSでの共有やプレゼンへの埋め込みでも自然に見えます。
メッセージの吹き出しの順番を後から入れ替えることはできますか？
メッセージ行はリストの上から順番に表示されるため、会話の流れを変えたい場合は該当する行を削除して、正しい順序で追加し直す形になります。行ごとに送信側とタイムスタンプを個別に設定できるので、途中に別の日時のメッセージを差し込むことも可能です。
プレゼン資料に貼り付ける場合、透過PNGとして書き出せますか？
書き出されるPNGはスマホ画面全体（背景・ステータスバーを含む）を描画したものなので、背景ごとそのままスライドに配置する前提の画像になります。スライドの背景に馴染ませたい場合は、スマホ型のフレームごとトリミングするか、影を付けて『画面の一部を切り取った』ように見せる編集を別途行うと自然に仕上がります。
長い文章のメッセージを入力すると、吹き出しのレイアウトは崩れませんか？
吹き出しは入力したテキストの長さに応じて自動的に折り返され、高さが調整されるように設計されています。ただし極端に長い1行のメッセージ（改行のないURLなど）を入力すると、吹き出しの見た目が画面幅を超えて不自然になることがあるため、実際のチャットのように適度な長さで区切って複数のメッセージ行に分けることをおすすめします。
ダークテーマとライトテーマは、どちらのSNSでも見え方が同じですか？
このツールで選んだテーマ設定は書き出したPNG画像そのものに焼き込まれるため、投稿先のSNSがダークモードかライトモードかに関わらず、常に同じ見た目で表示されます。投稿先の表示環境を想定して、あらかじめ見やすいほうのテーマを選んでおくと安心です。