CodeKitHubこのツールとは？
Messengerチャット風画像ジェネレーターは、Facebook Messengerのインターフェース——特徴的な角丸の青い送信吹き出し、連絡先名と「アクティブです」表示のあるヘッダーバー、スマホのステータスバー——をブラウザ上で再現し、自分だけの会話を入力して共有可能な画像として書き出せるモックアップツールです。
Messengerの送信吹き出しは特徴的な単色の青を使っており、このジェネレーターもデフォルトでその見た目を再現します。ライト／ダークテーマの切り替えボタンでは、周囲のUIをMessengerの2つの外観モードのどちらかに合わせて調整できます。
エンタメとデザイン用途に限定：このツールは冗談、ミーム、寸劇、プレゼン資料、UI/UXプロトタイプ、SNSコンテンツのために作られています。詐欺的な証拠の捏造、嫌がらせや誹謗中傷、実在の人物が実際に送ったメッセージを装う行為には絶対に使用しないでください——法域によっては違法となる可能性があり、このツールの想定用途とは明確に異なります。
入力した内容はあなたの端末から一切外に出ません——会話全体はHTML CanvasのAPIを使ってブラウザ内で直接描画され、PNGファイルもローカルで生成・ダウンロードされます。サーバーへのアップロード、アカウント登録、メッセージ内容の追跡は一切ありません。
なぜこれを使うのか？
- 友人グループのFacebookネタ動画を作りたいが、実際のMessengerのやり取りをスクショして加工するのはプライバシー的に気が引ける——架空の名前とやり取りで一から作成できます。
- アプリのUIデザイン提案で「通知が来たときのMessenger風画面」をクライアントに見せたいが、実機でスクショを撮るより早く仕上げたい——既読マークや「アクティブです」表示まで含めて自由に作り込めます。
- コメディ系のショート動画で「既読無視されたMessengerのやり取り」ネタを作りたいが、本物の会話を晒すのは避けたい——最初から架空の会話として安全に作れます。
- ライト／ダークモード両方でのMessenger風チャットのモックアップをデザイン資料に入れたいが、両方のスクショを実際に撮り直すのは手間——テーマ切り替えで一度に両方作れます。
- 友人へのドッキリ企画の台本を、口頭説明ではなくチャット画像のモックアップで先に見せて演出を固めたい——時刻やアバターまで自由に設定できるので細部まで詰められます。
- これらすべてをブラウザだけで完結させたい——会話の文面や写真をどこにもアップロードしたくない場合に、ローカル描画のこのツールが向いています。
使い方
- 連絡先の名前、ステータス文言（例：「アクティブです」）を設定し、ダークまたはライトテーマを選びます。
- アバター用の写真をアップロードするか、イニシャル入りの色付き円のままにします。
- メッセージ行を追加します：本文を入力し、送信側（相手／自分）とタイムスタンプを選びます。
- 自分のメッセージには、既読ステータスを選びます。
- ステータスバー（時刻・電池残量・電波強度）をお好みに調整します。
- スマホ型プレビューがリアルタイムに更新される様子を確認し、「PNGをダウンロード」をクリックして画像を保存します。
例
入力
連絡先：「Alex」・ステータス：「アクティブです」・メッセージ1（相手）：「今夜の予定は変わってない？」・メッセージ2（自分、既読）：「うん！8時にね😊」出力
375×812のPNG画像で、Messenger風の画面——「Alex」と「アクティブです」を表示するヘッダー、左側の薄いグレーの吹き出しに最初のメッセージ、右側の丸みのある青い吹き出しに返信が表示されます。画像はライブプレビューのcanvas上で即座に生成され、ワンクリックでダウンロードできます——待ち時間もアップロードも不要です。
カスタマイズできる項目
- 連絡先名、ステータス文言、ダーク／ライトテーマ。
- アバター：実際の写真をアップロード（円形にトリミング）するか、デフォルトの色を選択。
- 無制限のメッセージ行——それぞれに本文、送信側（相手／自分）、タイムスタンプを設定可能。
- 自分が送信したメッセージごとの既読ステータス。
- スマホのステータスバー：時刻、電池残量（％）、電波強度。
責任ある利用について
このジェネレーターは、ユーモアやストーリーテリング、デザイン作業のために、明確にフィクションであるチャット画像を手軽に作成できるようにすることを目的としています。証拠を捏造したり、嫌がらせを仕組んだり、偽の会話を本物だと誰かに誤解させたりするためのツールではありません。このツールで作成した画像を共有する際は、「フィクション」や「モックアップ」といった注記を添えることを検討してください。
Messenger風UIの細部
| 要素 | Messengerらしさのポイント | このツールでの設定 |
|---|---|---|
| 自分の吹き出し | 濃い青、右揃え、角が丸い | 自動で適用（テーマに連動） |
| 相手の吹き出し | 薄いグレー背景、左揃え | 送信側を「相手」に設定するだけ |
| ヘッダーバー | 連絡先名と「アクティブです」表示 | ステータス文言を自由入力 |
| 既読表示 | 吹き出しの外側下に小さく表示 | メッセージごとにON/OFF切り替え |
| ステータスバー | 時刻・電波・電池アイコンが並ぶ | 手動で数値と時刻を指定可能 |
よくある質問
このツールを使うのは合法または倫理的ですか？
ツール自体は、エンターテインメント、モックアップ、プレゼンテーション、デザイン作業のために使う分には合法です。合法でも倫理的でもないのは、生成した画像を使って誰かをだますこと——例えば実際の会話であるかのように見せかけて詐欺を働いたり、誰かを嫌がらせ・誹謗中傷したり、ある人物が実際に送ったメッセージであるかのように装ったりすることです。明確にフィクションまたは説明目的の用途にのみ使用してください。
ツールは私のメッセージや写真をどこかにアップロードしますか？
いいえ。入力したすべてのメッセージ、名前、写真、設定はブラウザのメモリ内に留まり、JavaScriptによって直接canvas要素に描画されます。PNGファイルはお使いの端末上で生成・ダウンロードされ、サーバーに送信されることは一切ありません。
このツールとWhatsApp／Signalチャットジェネレーター、どちらを使うべきですか？
モックアップしたいシーンが青い吹き出しと「アクティブです」表示を持つFacebook Messenger専用の場面であれば、こちらを使うと見た目が一致します。Messengerのブランド要素なしで、ミーム用の一般的なメッセージ画面が欲しいだけなら、Custom Chat Generatorで自分の好きな吹き出しの色を選べます。シーンが特にWhatsAppやSignalに見せたい場合は、それぞれの専用ジェネレーターを使うことで、色・チェックマーク・ヘッダーのスタイルなど、視聴者が期待するプラットフォームの細部が一致します。
実際の写真をアバターとしてアップロードできますか？
はい。「写真をアップロード」をクリックすれば、端末内の好きな画像を連絡先のアバターとして使えます——自動的に円形にトリミングされます。この手順を省略した場合、アバターは連絡先名から生成されるイニシャル付きの色付き円になります。写真はブラウザ内でのみローカルに使用され、どこにもアップロードされません。
書き出される画像のサイズは？
プレビューと書き出されるPNGは、デフォルトでスマホ画面のアスペクト比（375×812）を使用しており、SNSでの共有やプレゼンへの埋め込みでも自然に見えます。
「アクティブです」以外のステータス表示にもできますか？
はい。ステータス文言は自由入力なので、「アクティブです」以外にも「5分前にアクティブ」「オフライン」など、実際のMessengerで見かける表示に合わせて自由に書き換えられます。
既読・未読の表示はどこまで細かく設定できますか？
自分が送ったメッセージ1件ごとに既読ステータスを個別に選べます。送信済みで未読の状態と既読になった状態を使い分けることで、既読スルーのネタや、逆に即既読がついた驚きの演出などをそのまま画像で表現できます。
ライトモードとダークモードの両方を1枚の画像にまとめることはできますか？
1回の書き出しでは片方のテーマのみが反映されます。両方を見せたい場合は、テーマを切り替えて2回PNGをダウンロードし、後から画像編集ソフトで並べて1枚にまとめることをおすすめします。
作った画像は本物のMessengerスクショだと信じられてしまいませんか？
見た目はかなり近づけていますが、あくまでモックアップです。悪用を防ぐため、投稿する際は「フェイク」「イメージ」などの注記を添えることを推奨します。実在の相手の名前や実際にやり取りした内容をそのまま使い、本物のメッセージであるかのように見せる行為は、このツールの想定用途から外れます。