スマホフレーム重ねの3画面アプリショーケース

スマートフォンアプリのプロダクトサイトで「端末を斜めに重ねて画面を見せる」構図は、App Store の登場以降ほぼ業界標準として定着しました。理由は単純です——アプリの価値はインストールするまで体験できない。だからこそ画面そのものを物理的なモノとして提示し、「使うとこう見える」を先に手渡す必要があるのです。

3枚で語るストーリー

1枚のスクリーンショットは機能を説明しますが、3枚を傾けて重ねるレイアウトは「流れ」を語れます。手前にホーム画面、奥に詳細・設定——という奥行きは視線に順序を与え、アプリ内の導線を無意識に予感させる。中央を最前面・最大に置き、左右を後退させる構図は、人の視覚が持つ一番大きく手前のものを主役と読む性質を、そのまま利用しています。

モックか実機UIか

ローンチ前は、CSSで組んだ擬似UI（色面・ピル・チップの組み合わせ）で十分に世界観を立てられます。むしろ画像を使わない方がページは軽く、グラデ背景にもなじむ。実装が固まった段階で本物のスクリーンショットへ差し替える運用が現実的です。重要なのは3枚それぞれが別の機能を見せていることです。

仕上げの判断軸

ストアバッジ風CTAは画面ショーケースのすぐ隣に置き、「見て→入れる」を最短距離で繋ぎます。上部の★評価・ダウンロード数は、数字が小さくても「他者がすでに使っている」という社会的証明として効く。

背景に散らす通知ピルやハートは1〜2個まで。主役の端末より目立たせないことが、洗練と雑然を分ける境界線です。