ランディングページのヒーローでモックアップを使う

ヒーローは、ほとんどの訪問者が読み続けるかを決める場所です。そこでのモックアップの仕事はひとつ、製品が存在することを示し、それがどんな種類の製品かを、文章が1語も読まれる前の最初の1秒で伝えることです。書き出しと配置のすべてはこの締め切りから導かれます。

縮めるのではなくデバイスの中へ切り込む

ヒーローに浮かぶスマホ全体は、広い画面では小さく見え、中のインターフェースは読めなくなります。デバイスが区画の下や横へはみ出すように切ってください。見分けのつく上部の曲線だけでスマホだと伝わります。そして画面に実面積を与えます。切り抜いたモックアップはブレークポイント間の調整も楽です。画像全体を縮めるのではなく、切り抜き位置を動かせるからです。

まず静止画、重さに見合うなら動画

ヒーローで自動再生されるモックアップ動画は効果的であり高価でもあります。初回描画を遅らせ、モバイルの通信量を使い、電池を消費します。使うなら短く無音でループさせ、すぐ何かが見えるようポスター画像を用意し、小さい画面では無効にしてください。多くの場合、静止のヒーローとページ下部の短い動画の組み合わせで同等に転換し、読み込みは何分の一にもなります。

モックアップの光をページに合わせる

暗い背景でレンダリングしたデバイスを白いページに置くと、背景が透明でも必ず貼り付けたように見えます。本体に乗った光が暗い環境を示唆しているからです。ページが実際に使う明度に対してレンダリングしてください。これは書き出した画像だけでなくモックアップのプロジェクトを保管しておくべき実務的な理由でもあります。サイトを作り直すときは、修正ではなく再レンダリングすれば済みます。