SNSでスクリーンショットを見栄えよく見せる方法

2026年10月30日更新

フィードで見栄えのいいスクリーンショットは、1つのことをはっきり見せ、落ち着いた背景の上に余裕をもって置かれ、プラットフォームが想定するサイズで書き出されています。大事な部分を切り取り、余白と背景を加え、スマートフォンのスクリーンショットはデバイスフレームに収め、やわらかな影を付けて、プラットフォームのサイズのJPEGで投稿しましょう。このガイドでは、それぞれの手順と避けたい失敗を説明します。

フィードでスクリーンショットが雑に見える理由は、たいてい同じです。形が合っていない、端まで詰まっていて余白がない、そして文字が小さすぎてスマートフォンで読めない。どれもデザインのスキルがなくても直せます。

1. 何を見せる画像かを決める

ツールを開く前に、その画像で見せたいことを1つ決めましょう。新しい画面、1つの機能、変更前と変更後などです。それ以外はノイズです。アプリのウインドウ全体を撮って、隅に小さな新しいボタンがあるだけでは、そのボタンは伝わりません。

• 大事な部分を切り取る。Macのアプリなら、ウインドウだけ、または変更したパネルだけをキャプチャします。スマートフォンなら、フレームが文脈を補うので、たいていは画面全体で問題ありません。
• 先に画面を整える。本物らしいサンプルデータを使い、余計なパネルを閉じ、個人の名前やメールアドレスを隠し、ステータスバーを整えましょう。
• 1枚に1つのアイデア。見せたい機能が3つあるなら、詰め込んだ1枚ではなく、3枚の画像かカルーセルにしましょう。

2. 余白をとる

画像の端にくっついたスクリーンショットは途切れて見えますし、プレビューの端を切り取るフィードもあります。余白があればどちらも解決します。四辺それぞれにキャンバスの約10分の1の余白をとり、横長のキャンバスにスマートフォンを1台置くときはさらに広くとりましょう。

キャンバスの形は余白と同じくらい大切です。縦に長いスマートフォンのスクリーンショットをそのまま投稿すると、ほとんどのフィードで切り取られたり縮小されたりします。代わりに、プラットフォームの形のキャンバスに置きましょう。InstagramやLinkedInの投稿には4:5、Xには16:9、ストーリーズには9:16です。アプリのスクリーンショットをシェアするときの画像サイズにすべてまとめています。

3. 主張しすぎない背景を選ぶ

背景はスクリーンショットを引き立てる額縁です。スクリーンショットと競い合ってはいけません。

• 単色がいちばん無難です。アプリのカラーパレットから、インターフェイスより一段明るいか暗い色を選ぶと、輪郭が見えやすくなります。
• やわらかなグラデーションは、細部を加えずに奥行きを出せます。虹色よりも、近い2色のほうがうまくいきます。
• 壁紙や写真は豊かに見えますが、にぎやかです。コントラストが十分あるデバイス1台の背後には合いますが、小さな文字の背後には向きません。

コントラストでスクリーンショットと背景を分けましょう。明るい背景に暗いインターフェイス、または暗い背景に明るいインターフェイスです。インターフェイスも背景も白だと、スクリーンショットが背景に溶け込んでしまいます。

4. やわらかな影を付ける

うっすらとした影があると、スクリーンショットが背景から浮き上がり、ひとつの物体として見えます。影はやわらかく、コントラストを低くしましょう。ぼかしを広くして不透明度を下げ、スクリーンショットの少し下に落とします。濃くてくっきりした影は古く見え、内容から視線をそらしてしまいます。

5. フレームに収めるかどうか

デバイスフレームを使うかどうかは、スクリーンショットの種類で決まります。

デバイスフレームの場合、リアルなフレームは洗練されていて具体的に見えます。クレイモックアップのようなミニマルなフレームは、インターフェイスに注目を集め、ブランドカラーに合わせることもできます。Macのウインドウは、まずmacOSが付ける影を取り除き、すっきりした影を付け直しましょう。Macで影なしのスクリーンショットを撮る方法をご覧ください。

6. 角度は少しだけ、またはなしで

少し傾けると、スマートフォンがひとつの物体のように感じられ、静止画に動きが出ます。傾けすぎないことが大切です。大きく傾けた画面は読みにくく、文字がつぶれてしまいます。設定画面や長いリストのように情報が詰まった画面は、正面から見せるのがいちばんです。

7. シリーズの見た目をそろえる

複数の画像やカルーセルを投稿するときは、ひとつのセットに見えるようにしましょう。

• キャンバスのサイズと背景を同じにするか、同じパレットの背景を使う。
• デバイス、フレームのカラー、角度を同じにする。
• スワイプしたときに落ち着いて見えるよう、どの画像でもデバイスを同じ位置に置く。

見た目がそろっていると、寄せ集めではなく意図して作ったシリーズに見えます。

8. フィードのサイズでも文字が読めるようにする

ほとんどの人は、幅が数インチしかないスマートフォンで画像を見ます。Macでは問題ないインターフェイスの文字も、そこでは読めなくなります。

• 画面が許すなら、キャプチャするときにアプリでDynamic Typeを大きめのサイズにする。
• 小さな行が並んだ画面全体よりも、少なく大きな要素を見せる。
• 見出しを入れるなら、短く大きく。文章よりも数語のほうが伝わります。

確かめてみましょう。書き出した画像を、スマートフォンで腕を伸ばした距離から見ます。目を細めないと読めないなら、小さすぎます。

9. 適切なサイズと形式で書き出す

• サイズ：4:5の投稿なら1080 × 1350など、プラットフォームのサイズかそれ以上で書き出します。どのみちプラットフォームが画像をリサイズするので、大きすぎるファイルはアップロードが遅くなるだけです。
• 投稿にはJPEG：サイズが小さく、プラットフォームに圧縮されても見た目は変わりません。
• 細部を見せるならPNG：スライド、ウェブサイト、デザインファイルに入れる画像や、背景を透過させたい画像に使います。

やること、やらないこと

すべてを一度に

ここにある手順はすべてデザインアプリでもできますが、繰り返しの作業になります。FeatureFrameなら、Mac上の1か所で済みます。スクリーンショットをドロップすると、デバイスを判別して3Dのフレームに収めます。Macのウインドウキャプチャはシンプルなカードとして収めます。あとはキャンバスの形、背景（単色、グラデーション、macOSの壁紙、または自分の画像）、影、角度を選び、最大4KのJPEGかPNGでコピーまたは書き出すだけです。1つのキャンバスに最大3枚のスクリーンショットを置け、@ハンドルネームやロゴをウォーターマークとして入れることもできます。それが役立つ場面はスクリーンショットにウォーターマークを入れる方法で説明しています。

プラットフォームごとの詳細は、Xでアプリのスクリーンショットをシェアする方法とInstagramのカルーセルを作る方法をご覧ください。Mac App StoreでFeatureFrameを入手できます。

ほかのガイド

• アプリのスクリーンショットをSNSでシェアするときの画像サイズ
• MacでスクリーンショットをiPhoneのフレームに入れる方法
• Xでアプリのスクリーンショットをシェアする方法
• アプリのスクリーンショットでInstagramのカルーセルを作る方法
• アプリのローンチに使うSNS画像のチェックリスト
• ビルド・イン・パブリック：進捗のスクリーンショットをシェアする方法
• 無料のiPhone・iPadモックアップフレーム