売れるデバイスモックアップ：ランディングページのビジュアルレイヤー

訪問者は、コピーを一行も読まないうちにあなたのアプリを判断しています。ランディングページで最初に目に入るのはプロダクトショット。そしてアプリにとってのプロダクトショットとは、誰もが知っているデバイスの中で動くあなたの画面のことです。色付きの四角形に貼っただけの平面的なスクリーンショットは「スクショ」にしか見えません。美しくライティングされた iPhone が回転しながら光を受ける姿は「プロダクト」に見えます。

この差を生むのは予算ではなく、作り方です。ここでは、ランディングページのどこでデバイスモックアップが最も効くのか、説得力を決めるポイント、そして 1 枚のスクリーンショットや画面収録からヒーロー動画・機能セクション用スチル・SNS カードまで一式を作る方法を紹介します。

モックアップが最も効く場所

ヒーローセクション

モックアップが最も売上に貢献するのはヒーローです。デバイスは 1 台、カメラの動きはひとつ — もしくは完璧な静止画を 1 枚 — 見出しの隣に置きます。これはピッチの「3 秒版」です。プロダクトが何か、使うとどんな感覚か、そして実在するということが一目で伝わります。モックアップをひとつだけ磨くなら、ここに投資してください。

機能セクション

ページの下部では、機能ごとに 1 台のデバイスを割り当て、該当する画面を表示します。鉄則は一貫性。同じ機種、同じライティング、同じ系統の背景でそろえれば、ページはコラージュではなく、ひとつのプロダクトストーリーとして読まれます。変えるのは画面の中身であって、アートディレクションではありません。

プロダクトが旅するすべての場所

同じ素材は、ページ公開後も働き続けます。

• SNS カードや投稿 — デバイスに載せたショットは、リンクプレビューの厳しいトリミングや小さな表示サイズに、生の UI スクリーンショットよりはるかに強く耐えます。
• プレスキット — 記者は渡されたものをそのまま使います。完成品に見える素材を渡しましょう。
• アップデートのお知らせ — 新機能をデバイスの中で見せれば、「予定」ではなく「リリース済み」だと瞬時に伝わります。

「プロダクト」に見せるための作法

• モックアップをブランドに合わせる。 ライティング、背景、パレットは、ページの他の部分と同じデザインシステムから生まれたように見えるべきです。ミニマルな金融アプリの背後にネオンのグラデーションを置けば、両方が損をします。
• 主役のデバイスは 1 台。 自信を持ってフレーミングされた 1 台は、注意を奪い合う 5 台に勝ちます。複数の画面を見せる必要があるなら、1 台を主役にして残りは脇役に。
• 視線を集めたい場所にだけ動きを使う。 動きはページ最強の視線マグネットです。ヒーローに使い、機能セクションは静止画やごく控えめなループで静かに保ちましょう。
• ファイルサイズを意識する。 ヒーローには短いループ MP4、それ以外は PNG のスチル。これでページは軽快なままです。自動再生動画だらけのページは、まさに転換したい訪問者を罰します。

Mockpose で使えるもの

Mockpose には、素材まで正確に再現された本物の Apple デバイス — iPhone、iPad、MacBook、iMac、Apple Watch — がそろっています。アプリを囲むフレームがクリップアートではなく、ハードウェアに見えるということです。100 以上の編集可能なテンプレートから始めて、100 以上のアニメーション背景、30 種のグラデーション、床のテクスチャや天候エフェクトでどんなブランドの方向性にも合わせられます。シネマティックなカメラワークはキーフレームタイムラインで操作でき、「ひとつの強い動き」は数クリックで完成します。

書き出しはページ全体をカバーします。PNG スチルは透過背景でのアルファ付き書き出しに対応し、サイトのどのセクションにもデバイスをそのまま置けます。MP4 動画は最大 4K/60 fps で、エンコードはすべてブラウザ内でローカルに行われます。自分のページデザインに重ねるための透過背景の動画も、プレミアムのサーバーレンダリングとして用意しています。

実際にユーザーが公開している作例は、コミュニティショーケース Made with Mockpose でご覧いただけます。本物のランディングページやストアで使われている、本物の書き出しです。

まずはヒーローから、無料で

無料プランにはフルエディタと、小さなウォーターマーク付きの 720p 書き出しが含まれます。費用をかける前に、ページ全体をプロトタイピングして本物のプロダクトショットの効果を確かめるには十分です。プレミアムにアップグレードすれば、4K とウォーターマークなしの書き出しが解放されます。

Mockpose を開いて、スクリーンショットか画面収録をドロップしてください。ランディングページに足りなかったビジュアルレイヤーが、そこから始まります。