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

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

3枚で語るストーリー

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

モックか実機UIか

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

仕上げの判断軸

ストアバッジ風CTAは画面ショーケースのすぐ隣に置き、「見て→入れる」を最短距離で繋ぎます。上部の★評価・ダウンロード数は、数字が小さくても「他者がすでに使っている」という社会的証明として効く。背景に散らす通知ピルやハートは1〜2個に留め、主役の端末より目立たせないことが、洗練と雑然を分ける境界線です。