Slackチャット風画像ジェネレーター

このツールとは？

Slackチャット風画像ジェネレーターは、Slackのチャンネル表示——トピック行付きの紫の#チャンネルヘッダーと、吹き出しなしで四角いアバター・太字の黒いユーザー名・薄いグレーのタイムスタンプ・下にメッセージ本文が並ぶフラットなメッセージリストスタイル——を再現するブラウザ内モックアップツールです。

Slackはデフォルトでライトテーマ（白背景、濃い紫#4A154Bのヘッダー）を採用しており、これはほとんどのSlackワークスペースの実際の見た目なので、このジェネレーターもデフォルトでライトモードで開き、Slackのダークテーマを使うチーム向けに任意でダークモードに切り替えられます。

各メッセージ行には独自のチームメイト名とアバターカラーがあり、1つのチャンネル内で複数の同僚がリアルにやり取りする様子をシミュレートできます。

エンタメとモックアップ用途に限定：製品デモのスクリーンショットを作ったり、プレゼン用に職場のシナリオを説明したり、会社のお知らせの絵コンテを作ったりできます。実際の職場の会話や実在の同僚になりすましたり、誰かが実際には言っていないことの証拠を捏造したりする用途には絶対に使えません。

入力した内容はあなたの端末から一切外に出ません。会話全体はHTML CanvasのAPIを使ってブラウザ内で直接描画され、PNGファイルもローカルで生成・ダウンロードされます。

なぜこれを使うのか？

• 製品デモやケーススタディ用にリアルなSlackチャンネルのスクリーンショットを作成できます。
• 実装前にSlack連携機能やボットメッセージの見え方をモックアップできます。
• 職場のシナリオ、オンボーディングの流れ、チームコミュニケーションの例をプレゼン用に説明できます。
• アプリのためにSlack風チャットUIのプロトタイプを作成できます。
• 100%ローカル描画——会話のテキストがサーバーに送信されることは一切ありません。

使い方

1. 紫のヘッダーに表示するチャンネル名とトピックを設定します。
2. ライトまたはダークテーマを選びます——Slackはデフォルトでライトです。
3. メッセージ行を追加します：チームメイトの名前を入力し、そのアバターカラーを選び、タイムスタンプを設定し、メッセージ本文を書きます。
4. 好きなだけメッセージとチームメイトを追加して、複数人のチャンネルをシミュレートできます。
5. ライブプレビューが更新される様子を確認し、「PNGをダウンロード」をクリックして画像を保存します。

例

入力

チャンネル：「content-review」・トピック：「公開前に投稿を下書き・レビュー・確定する」・メッセージ1——Maya Chen：「おはようチーム——公開前に来週の投稿を下書き中です。フックを確認してもらえますか？」・メッセージ2——Devon Ruiz：「了解——公開前に見られるようプレビューを置きました。」

出力

ライトテーマのSlackチャンネル表示を示すPNG画像：トピック文言付きの紫の# content-reviewヘッダーの下に2件のメッセージが積み重なり、それぞれ色付きの四角いアバター、太字のユーザー名、グレーのタイムスタンプ、その下にメッセージ本文が表示されます。

画像はライブプレビューのcanvas上で即座に生成され、ワンクリックでダウンロードできます——待ち時間もアップロードも不要です。

カスタマイズできる項目

• 紫のヘッダーに表示するチャンネル名とトピック。
• ライトまたはダークテーマ——ライトがSlackの本来のデフォルトです。
• 無制限のメッセージ行——それぞれに独自のチームメイト名、アバターカラー、タイムスタンプを設定可能。
• Slackのメッセージ幅に合わせて自動的に折り返されるメッセージ本文。

責任ある利用について

このジェネレーターは、製品デモ、プレゼンテーション、デザイン作業のために、明確にフィクションであるSlack風のスクリーンショットを手軽に作成できるようにすることを目的としています。証拠を捏造したり、職場でのハラスメントを仕組んだり、偽の会話が実在のワークスペースで実際に行われたと誰かに誤解させたりするためのツールではありません。このツールで作成した画像を共有する際は、「フィクション」や「モックアップ」といった注記を添えることを検討してください。

よくある質問