偽のチャットスクリーンショット作成ツール

リアルなチャットスクリーンショットを1行ずつ作成できます。まず連絡先の名前を設定し、やり取りをincoming:sent:というシンプルな形式で入力します。次にプラットフォームスタイル(汎用、iOS風、Android風)を選び、生成された画像をダウンロードします。アプリのモックアップ、サポートドキュメント、チュートリアル用スクリーンショット、ミームのキャプションなどに最適で、実際の会話を画面録画して後から一部を伏せる手間もかかりません。

偽のチャットスクリーンショットを作成する方法

  1. 1

    プラットフォームスタイルを選ぶ

    中立的なチャットレイアウト、または一般的なメッセージアプリの見た目を模したレイアウトを選択します。

  2. 2

    連絡先名を設定する

    会話の上部に表示されるヘッダーの名前を入力します。

  3. 3

    メッセージを入力する

    各行の先頭に`sent:`または`incoming:`を付けます。絵文字や改行にも対応しています。

  4. 4

    画像をダウンロードする

    画面解像度のPNGとして書き出し、スライド、ブログ記事、注釈付きチュートリアルにそのまま使えます。

モックアップ会話を作るときのベストプラクティス

偽のチャットスクリーンショットは、モックアップであることを明確に示している限り、正当なコミュニケーション手段です。しかし、実在の人物やプラットフォームになりすますために使われた瞬間、それはデザイン素材ではなく誤情報に変わります。

メッセージスクリプトの書式

各行が1つの吹き出しを表します。シンプルな接頭辞で表示する側と向きを指定します。

接頭辞 表示のされ方
sent: 右寄せの吹き出し(自分)
incoming: 左寄せの吹き出し(相手)
time: 中央揃えのタイムスタンプ区切り
system: グレーの情報行(参加、退出 など)

適した使い方

  • プロダクトのモックアップ。 リアルな文面で、アプリのチャット体験がどう見えるかを示す。
  • サポート向けチュートリアル。 「これが当社のボットから届く確認メッセージです」といった説明。
  • ストーリーボード。 デモ、ピッチ資料、オンボーディング用のUXフロー。
  • 教育。 フィッシングや詐欺メッセージの見分け方を教える研修資料。

避けるべき使い方

  • 実在のプラットフォームのなりすまし(Messenger、WhatsApp、iMessage など)を、スクリーンショットが本物であるかのように見せる行為。これは欺瞞であり、そのプラットフォームの商標ポリシーに違反するおそれがあります。
  • 証拠の捏造。 裁判で証拠として認められるには実際の会話から取得したものでなければならず、モックアップのスクリーンショットは無価値であるうえ法的リスクを伴います。
  • 名誉毀損。 実在の人物が言っていない発言をでっち上げる行為は、媒体を問わず、ほとんどの法域で名誉毀損に当たります。

出典表示のヒント

ブログ記事やスライド資料にモックアップを掲載する際は、隅やキャプションに小さなMockupバッジを添えましょう。何が実物で何が説明用のイメージかをはっきり示すと、読者からの信頼が高まります。

よくある質問

はい。レンダラーはUnicodeに対応したフォントを使用しているため、絵文字、アクセント付き文字、右から左への文字列、およびCJK文字もエクスポートされたPNGファイルで正しく表示されます。

デフォルトのレイアウトでは、連絡先名から生成したイニシャルが使われます。デザイン上カスタムのアバター画像が必要な場合は、モックアップを書き出してから画像編集ソフトでアバターを合成してください。

実際の上限は最終スクリーンショットの高さです。20〜30行が適切に収まります。より長い会話は可読性を考慮して複数のスクリーンショットに分割するとよいでしょう。

いいえ。モックアップはお使いのセッション内でのみ生成され、タブを閉じると入力した内容は一切保存されません。

関連ツール

このツールは他の言語でも利用できます