できること

画像編集ソフトを開く前の、構図確認とたたき台作りに使えます。

Frame

スクリーンショットをスマホ画面としてはめ込み、LP向けに見せやすくします。余白を含めた全体の印象を、短時間で確認できます。

Text

上部タイトル、補足テキスト、文字サイズ、背景色を調整できます。見出しの長さを試しながら、画像の中で読みやすいバランスを探せます。

Export

作成したモックはPNGとして保存できます。完成稿ではなく、LP、記事、ストア画像の方向性を早めに共有するための下書きとして使いやすい形です。

紹介画像を作る流れ

見た目の作り込みより先に、伝えたい画面とコピーの組み合わせを確認します。

Step

まずはアプリの一番伝えたい画面を選びます。設定画面や一覧画面より、ユーザーが価値を感じる操作中の画面を使うと、紹介画像として伝わりやすくなります。

Copy

画像内の見出しは、機能説明を詰め込みすぎるより、検索結果やSNSで見た人が内容をつかめる短さが向いています。補足テキストで利用シーンや安心材料を足すと、読みやすさを保てます。

Check

LPやストア画像は、スマホ画面では小さく表示されることがあります。保存前に、文字が細すぎないか、背景色と文字色の差が足りているかを確認すると、後の修正が減ります。

ブラウザで画像を扱うツールなので、処理場所と注意点を明確にしています。

Local

読み込んだ画像はブラウザ内のCanvasで処理され、外部サーバーへ送信されません。公開前のアプリ画面を扱う場合も、アップロード型ツールより確認しやすい設計です。

Care

画像が外部送信されない場合でも、保存したPNGを公開する可能性があります。名前、メールアドレス、位置情報、通知内容などがスクリーンショットに残っていないか確認してください。

Open

ほかのファイル系ツールの考え方は、ファイルを扱うWebツールを安心して使うためににまとめています。

モック画像は早く作れるぶん、最後に小さな確認を入れると仕上げに進みやすくなります。

Message

紹介画像に複数の機能を入れすぎると、スクリーンショットも見出しも読みづらくなります。まずは「何ができる画面か」「誰に向いているか」のどちらか一つに寄せると、LPの冒頭でも使いやすくなります。

Mobile

PCで作った画像は大きく見えるため、文字が読めるように感じやすいです。実際にLPへ置く前に、スマホ表示やサムネイル相当のサイズで見て、タイトルがつぶれていないか確認してください。

Reuse

背景色、見出し、スクリーンショットだけを変えて複数案を作ると、記事、ストア、SNSで使い回しやすくなります。完成デザインを一枚で決めるより、最初に数案を並べる使い方が向いています。