CodeKitHubこのツールとは？
Microsoft Teamsチャット風画像ジェネレーターは、Teamsの1対1チャット表示——連絡先のアバター、在席状況ドット、名前、ステータスが並ぶヘッダー、通話・ビデオ・共有アイコン、そして送信メッセージにTeamsの丸みのある右寄せ吹き出しスタイルを使うメッセージスレッド——を再現するブラウザ内モックアップツールです。
Teamsはデフォルトでライトテーマ（白背景、控えめなFluent紫#6264A7のアクセント）を採用しており、これは大多数のMicrosoft 365ユーザーが実際に見ている見た目です。任意でダークモードに切り替えることもできます。
各連絡先には在席状況——連絡可能（緑）、取り込み中（赤）、退席中（黄）、オフライン（グレー）——があり、実際のTeamsクライアントと同じように、アバター上の小さな色付きドットで表示されます。
エンタメとモックアップ用途に限定：企業向け製品デモを作ったり、プレゼン用にMicrosoft 365のワークフローを説明したり、サポートシナリオの絵コンテを作ったりできます。実際の職場の会話や実在の同僚になりすましたり、誰かが実際には言っていないことの証拠を捏造したりする用途には絶対に使えません。
入力した内容はあなたの端末から一切外に出ません。会話全体はHTML CanvasのAPIを使ってブラウザ内で直接描画され、PNGファイルもローカルで生成・ダウンロードされます。
なぜこれを使うのか？
- 企業向けソフトウェアのデモやケーススタディ用にリアルなTeamsチャットのスクリーンショットを作成できます。
- 実装前にTeamsボットや通知メッセージの見え方をモックアップできます。
- ITサポートのシナリオ、オンボーディングの流れ、職場のコミュニケーション例をプレゼン用に説明できます。
- 社内ツールのためにTeams風チャットUIのプロトタイプを作成できます。
- 100%ローカル描画——会話のテキストがサーバーに送信されることは一切ありません。
使い方
- 連絡先名と在席状況（連絡可能・取り込み中・退席中・オフライン）を設定します。
- アバター用の写真をアップロードするか、イニシャル入りの色付き円のままにします。
- ライトまたはダークテーマを選びます——Teamsはデフォルトでライトです。
- メッセージ行を追加します：本文を入力し、送信側（相手／自分）とタイムスタンプを選びます。
- スマホ型プレビューがリアルタイムに更新される様子を確認し、「PNGをダウンロード」をクリックして画像を保存します。
例
入力
連絡先：「Jordan」・ステータス：「連絡可能」・メッセージ1（相手）：「ねえ！確認する時間あった？」・メッセージ2（相手）：「よかった、今夜残りを送るね」・メッセージ3（自分）：「今見たよ——いい感じ、公開しよう」出力
ライトテーマのTeamsチャットを示すPNG画像：Jordanのアバター、緑色の在席状況ドット、名前と「連絡可能」ステータスが並ぶヘッダー、左側に名前とタイムスタンプ付きの薄いグレーの受信吹き出しが2つ、右側に薄紫色の送信吹き出しが1つ表示されます。画像はライブプレビューのcanvas上で即座に生成され、ワンクリックでダウンロードできます——待ち時間もアップロードも不要です。
カスタマイズできる項目
- 連絡先名と在席状況（連絡可能、取り込み中、退席中、オフライン）。
- アバター：実際の写真をアップロード（円形にトリミング）するか、デフォルトの色を選択。
- ライトまたはダークテーマ——ライトがTeamsの本来のデフォルトです。
- 無制限のメッセージ行——それぞれに本文、送信側（相手／自分）、タイムスタンプを設定可能。
責任ある利用について
このジェネレーターは、企業向けデモ、プレゼンテーション、デザイン作業のために、明確にフィクションであるTeams風のスクリーンショットを手軽に作成できるようにすることを目的としています。証拠を捏造したり、職場でのハラスメントを仕組んだり、偽の会話が実在のMicrosoft 365テナントで実際に行われたと誰かに誤解させたりするためのツールではありません。このツールで作成した画像を共有する際は、「フィクション」や「モックアップ」といった注記を添えることを検討してください。
よくある質問
このツールを使うのは合法または倫理的ですか？
ツール自体は、エンターテインメント、製品デモ、プレゼンテーション、デザイン作業のために使う分には合法です。合法でも倫理的でもないのは、生成した画像を使って誰かをだますこと——例えば実際のTeams会話であるかのように見せかけて詐欺を働いたり、同僚を嫌がらせ・誹謗中傷したり、実際の職場チャットになりすましたりすることです。居住地域によっては、こうした悪用は詐欺・名誉毀損・ハラスメントに該当する可能性があります。明確にフィクションまたは説明目的の用途にのみ使用してください。
ツールは私のメッセージや写真をどこかにアップロードしますか？
いいえ。入力したすべてのメッセージ、名前、写真、設定はブラウザのメモリ内に留まり、JavaScriptによって直接canvas要素に描画されます。PNGファイルはお使いの端末上で生成・ダウンロードされ、サーバーに送信されることは一切ありません。
在席状況のドットは制御できますか？
はい。在席状況のドロップダウンから連絡可能（緑）・取り込み中（赤）・退席中（黄）・オフライン（グレー）を選ぶと、連絡先アバター上の小さな色付きドットが実際のTeamsクライアントと同じように更新されます。素早い返信や進行中の会話がテーマなら連絡可能や取り込み中を使ってください。メッセージが未読のままだった、または後から見られたという設定にしたい場合は、退席中やオフラインを使うとより説得力のある見た目になります。
Teamsは実際にこのような丸みのある吹き出しを使いますか？
はい。メッセージをフラットなリストで表示するDiscordやSlackとは異なり、Microsoft Teamsは丸みのある吹き出しを使います：相手のメッセージは左側に表示され上に送信者名が付き、自分のメッセージは右寄せの薄紫色の吹き出しで表示されます。このツールはこのレイアウトを正確に再現しています。
実際の写真をアバターとしてアップロードできますか？
はい。「写真をアップロード」をクリックすれば、端末内の好きな画像を連絡先のアバターとして使えます——自動的に円形にトリミングされます。この手順を省略した場合、アバターは連絡先名から生成されるイニシャル付きの色付き円になります。