ウェブアプリを本物に見せるノート PC モックアップ

ノート PC のモックアップは、これはブラウザで動くと伝える定番の方法です。素のスクリーンショットにはない文脈、つまり大きさ、置かれた面、視点をフレームが与えるので機能します。難点は、ノート PC の画面が横に広く縦に浅いことです。撮影を計画しないと、中のインターフェースは小さな表示でつぶれます。

モニタ全体ではなく妥当なビューポートを撮る

撮影前にブラウザを1440 × 900程度にしてください。ウルトラワイドで撮った画面をノート PC のフレームに押し込むと、文字は本来の半分の大きさで描かれ、レイアウトは模様になります。その幅で横方向の余白が多すぎるなら、フレームを縮めるのではなくページを拡大します。モックアップは実際の訪問者が見るレイアウトを、読めるサイズで見せるべきです。

角度と開き具合は控えめに

わずかな傾きは奥行きを与えますが、強い角度は画面を平行四辺形にして可読性を殺します。モックアップが開閉をアニメーションできるなら、ほぼ閉じた状態から開く2秒は動画の導入として有効です。静止画では画面をほぼ垂直に、カメラをほぼ正面に保ってください。画面の片側を1割以上短く見せる遠近は、雰囲気より可読性の損失のほうが大きくなります。

影で接地させ、そこで止める

底面下の柔らかい接地影が、ノート PC を浮かせない要素です。コントラストは低く、本体の近くに。デバイスの下に大きくぼやけた影を敷くのは2013年のテンプレートの視覚的な署名です。背景が暗いなら、上端に沿った細いリムライトのほうが影より接地感を出します。1枚ごとに光を調整するより、ひとつの照明方針をセット全体に通すほうが良い結果になります。