拡張機能の Chrome ウェブストア用スクリーンショットを作成する方法

Chrome ウェブストア用のスクリーンショットを作成するには、Chrome ウェブストア用スクリーンショットジェネレーターを使います。拡張機能のスクリーンショットをアップロードし、見出しを追加して、PNG 画像をダウンロードします。デフォルトの出力サイズは、ストアで使われる 1280 × 800 ピクセルです。このサイズで正確に書き出されるため、そのままアップロードできます。

拡張機能のスクリーンショットをそのまま載せても、魅力は伝わりません。見出しと色付きの背景を加え、ブラウザのフレームに入れると、完成品のように見えます。このツールなら、それを簡単に作成できます。

準備するもの

• 拡張機能を使用しているときの、見やすいスクリーンショット。デスクトップ全体ではなく、ポップアップやページを切り取ります。
• 主なメリットを伝える3〜5語の見出し。たとえば「すべてのサイトでトラッカーをブロック」などです。
• 補足情報を1行で伝えるサブタイトル。

拡張機能に複数の機能がある場合は、機能ごとに画像を1枚作成します。

画像を作成する方法

1. 「スクリーンショット」の下に画像をアップロードします。
2. 見出しとサブタイトルを入力します。デフォルトのテキストは例なので、両方とも置き換えてください。
3. 「テンプレートレイアウト」を選びます。テキストは画像の上、下、左、右に配置できます。
4. 「デバイスフレーム」を「ブラウザ」にすると、ブラウザウィンドウ内にスクリーンショットが表示されます。「なし」を選ぶと、画像だけが表示されます。
5. 背景を選びます。単色か、2色のグラデーションを設定できます。
6. 画像が大きすぎたり小さすぎたりする場合は、「スクリーンショットの拡大縮小」スライダーを調整します。
7. 画像を PNG で書き出します。

見栄えをよくする方法

• 見出しは短く、フォントサイズは大きくします。検索結果では画像が小さく表示されるため、長いテキストは読みにくくなります。
• 似た色を使ったグラデーションにします。色の差が大きいと、スクリーンショットが目立たなくなります。
• ブラウザフレームを使う場合は、「フレームの色」を背景と同じ色にします。フレームが背景になじみます。
• すべての画像で同じスタイルを使います。背景、フォント、見出しのサイズをそろえると、ストアの掲載画像に統一感が出ます。

PNG と JPG

PNG を使いましょう。画質を保てて、このサイズならファイルも小さくなります。README やSNSの投稿など、別の場所でより小さいファイルが必要な場合にだけ JPG を使います。

一番よい画像を最初に配置しましょう。最初の画像が、ユーザーの目に留まります。