mockupchatdmdesignpng

チャットモックアップ生成ツール — 無料ツール

スライド、事例紹介、チュートリアル用の図版として会話を組み立てられます。メッセージを追加し、左右のどちらに置くかを選び、話し手の名前を入力し、ライト/ダークのテーマと吹き出しのスタイルを選んで、2倍解像度の鮮明なPNGを書き出せます。アイコンはイニシャルから生成され、実在のプロフィール写真や認証バッジを使うことはありません。

会話

アバターは入力した名前から生成されます(色付きの円にイニシャル)。写真のアップロードもプロフィールの取得もないため、モックアップが実在の人物との本物のチャットに見えることはありません。

意図的に汎用的なメッセンジャー風の見た目です。特定のアプリの画面をそのまま模倣することはしません。

メッセージ

メッセージ 1
メッセージ 2

プレビュー

Retinaディスプレイ向けに2倍解像度で書き出されます。

これは図版を作るツールであり、スクリーンショットではありません

名前はあなたが入力し、アイコンはそこから生成されるため、実在のプロフィール写真や認証バッジが入ることはありません。入力した内容がブラウザの外に出ることもありません。書き出した画像にラベルは入りません。説得力のある画像として扱ってください。スライド、チュートリアル、サポート資料には適しますが、実際のやり取りとして通用させる用途には向きません。

機能

  • メッセージ単位で会話を組み立て — 行の追加・削除・並べ替えができ、それぞれを左(相手)または右(自分)に配置できます
  • 会話のタイトル、ライトとダークのテーマ、そして丸角・角形・ミニマルという3つの汎用的な吹き出しスタイル
  • 長いメッセージは折り返され、吹き出しもキャンバスもそれに合わせて広がるため、20行のやりとりでも2行のときと同じようにきれいに表示されます
  • 生成されたイニシャルのアバター — 写真のアップロード、プロフィールの取得、認証バッジはいずれもありません
  • すべてブラウザ内で動作し、2倍解像度で書き出します — アップロードは一切なく、アカウントも不要です

よくある質問

この画像を共有する前に知っておくべきことは何ですか。

書き出した画像は本物のスクリーンショットのように見える、ということです。ラベルは入らないため、その会話が撮影されたものではなく入力されたものだと画像自体からは分かりません。実在の人物に帰属させた架空のダイレクトメッセージは、よく知られた偽情報の形式です。スライド、事例紹介、チュートリアル、ポートフォリオといった図版用途にとどめ、証拠と誤解されうる場面では必ずモックアップだと明示してください。実在のプロフィール写真と認証バッジという、偽物を最も安上がりに信じさせる2点はこのツールには入っていませんが、そのほかの判断はあなたに委ねられます。

なぜプロフィール写真をアップロードできないのですか?

偽の会話を本物らしく見せてしまうのが、まさに実在の写真だからです。ここでのアバターは入力した表示名から生成されます。名前から導かれた色の上にイニシャルを載せるため、同じ名前には常に同じ色が割り当てられます。アップロード欄はなく、ハンドルやプロフィールから画像を取得する手段もなく、認証バッジもありません。資料やチュートリアルの用途では、そもそもプレースホルダーのアバターで十分です。重要なのはやりとりの形であって、誰の顔かではありません。

なぜ特定のメッセージアプリとまったく同じ見た目にならないのですか?

理由は2つあります。アプリの画面(ヘッダー、アイコン、吹き出しの正確な形状)をそのまま複製することは商標上の問題になりますし、同時にそれこそが偽造スクリーンショットを本物らしく見せる部分でもあります。ここで用意している3つのスタイルは、角の丸みと配色の扱いだけが異なる汎用的なメッセンジャー風の見た目です。特定の製品を模倣することなく「これは会話です」と伝えられます。

実際にはどんな用途に使えばよいですか?

スライドでサポートの流れを図示する、事例紹介で顧客とのやりとりの例を示す、チュートリアルで返信テンプレートのビフォー・アフターを描く、クライアント向けにダイレクトメッセージ施策の構成案を作る、ポートフォリオの作例を作る、といった用途です。会話が実際にあった証拠ではなく、会話の形を見せたい場面に向いています。

サーバーに何か送信されますか?

いいえ。画像はブラウザ内のキャンバスで描画され、そのままページからダウンロードされます。入力した内容がアップロード・保存・記録されることはなく、ネットワーク通信も発生せず、アカウントも不要です。