SaaSのランディングページに載せる製品のスクリーンショット

効くスクリーンショットは、製品の実物の画面を1枚だけ見せます。価値が表れる場所だけに寄せて、中身は本物のデータです。抽象的な図形、ぼかしたダッシュボード、浮いているガラス風のカードは、そのソフトが自分の仕事をこなせるかを何も伝えません。SaaSのヒーローが滑る一番よくある原因です。

仕事が片付く画面を選ぶ

顧客が撮って上司に送るような画面を選びます。仕上がったレポート、空になった受信箱、ダブルブッキングが消えたカレンダー、支払われた請求書。ログインの画面、空の状態、設定のパネルはここで落ちます。ソフトが買い手の課題ではなく自分自身に働いている画面だからです。どの画面かを一文で言えないなら、利用者が一番開いているビューをプロダクトチームに聞きます。

使うのは1枚です。5枚ではありません。ファーストビューに6枚のUI画像を並べたカルーセルは、ノイズとして読まれます。他の画面は下のセクションに回し、それぞれが証明する主張の隣に置きます。

本物のデータを入れる、入れないならデータなしで

Lorem ipsum、Acme Corp、123,456は、その画像をモックアップに見せます。読み手はデザイナーが思うよりずっと早く気づきます。狙っている市場の顧客が見慣れている名前、数字、ラベルで埋めます。採用担当者向けのツールなら職種名を入れます。経理チーム向けなら、5,000ではなく4,182.60のような、現実味のある形の数字を使います。

末尾が000で終わる数字は仮のデータに見えるので避けます。ツールが検知した問題を示す行を、画面の中に1つ残します。全部が緑で片付いている画面は、買い手に欲しいものを何も残しません。

訪問者の多くはスマホなので、大胆に切り抜く

UnbounceのConversion Benchmark Reportによれば、SaaSのランディングページの訪問の79%がモバイルです。デスクトップのダッシュボード全体を幅390ピクセルの画面に縮めると、ラベルはすべて灰色のにじみになります。要点を運んでいるパネル1つに寄せます。そのうえで、画像の中の一番小さい文字を実機のスマホで確認します。腕を伸ばした距離で読めないなら、もっと寄せるか、2枚に分けます。

判断を簡単にする目安が1つあります。スクリーンショットの中の一番小さい文字が、そのブレークポイントの本文とだいたい同じ大きさで表示されること。それより小さいものは飾りなので、公開せずに切り落とします。

見てほしい1か所だけに注釈を付ける

大事な部分を指すラベル、矢印、囲みを1つだけ足し、横に4語から6語を書きます。「この列は自動で更新されます」のような一文です。ラベルは1つで、4つではありません。2つめを足すと、読み手はどこを見るかを選ぶことになり、たいていスクロールを選びます。

ドロップシャドウ、光る効果、傾いた3Dの見せ方、背景のグラデーションは省きます。ファイルサイズが増えて、読みやすさが減ります。平らなブラウザの枠、または枠なしで、単色の背景に置くと、ライトでもダークでもきれいに読めます。

短い動画がスクリーンショットに勝つ場面

価値が動きの中にあるときは、短いループを使います。ドラッグ、フィルタの適用、数値の再計算など。長さは6秒以内に収めます。音は消し、自動で再生して、ループさせます。最初のフレームが1枚の画像として成立することも確認します。回線が遅いときやFramerの遅延読み込みで表示されるのは、そのフレームだからです。

触れる製品ツアーは、ヒーローではなくファーストビューの下に置きます。ページの重さを実際に増やしますし、まだ興味を持つと決めていない訪問者に作業をお願いすることになります。

書き出しの設定と確認リスト

UIは2倍のサイズで書き出すと文字が締まります。PNGではなくWebPかAVIFで配信し、レスポンシブなサイズはFramerに作らせます。ヒーロー画像には幅と高さを明示して、読み込み中にレイアウトがずれないようにします。圧縮したあとのサイズは200KB程度までに収めます。altテキストは「スクリーンショット」ではなく、画面に何が写っているかを書きます。

公開の前に5つ確認します。実物の画面か。データは本物らしいか。一番小さい文字をスマホで読めるか。ラベルはちょうど1つか。UIの見た目ではなく結果を見せているか。1つでも「いいえ」があればやり直しで、かかるのは20分です。