デバイスフレームの活用
読了 5分 ＋ 実践 15分
対象読者: デザイン提案資料を作る方、ポートフォリオにモックアップを追加したい方
前提知識: 特になし
デザインをそのまま見せるより、実際のデバイスに表示されている状態で見せるほうが、完成イメージが格段に伝わりやすくなります。AIにデバイスフレームを生成させることで、プレゼンや提案資料に使えるリアルなモックアップを作れます。
3種類のデバイスフレーム
Section titled “3種類のデバイスフレーム”デスクトップ／ブラウザフレーム
Section titled “デスクトップ／ブラウザフレーム”macOSスタイルのブラウザウィンドウに収めます。Webアプリやランディングページの表示に最適です。
ランディングページを、左上に macOS スタイルのトラフィックライトボタン
（赤・黄・緑）を持つモダンなブラウザウィンドウ内に表示してください。ポイント：URLバーに実際のドメインを入力しておくと、よりリアルに見えます。
URLバーに「https://yourproduct.com」と表示し、ブラウザの
タブにはファビコンとページタイトルを入れてください。iPhoneフレーム
Section titled “iPhoneフレーム”モバイルアプリやレスポンシブデザインの確認に使います。
フィットネストラッカーのモバイルアプリ画面をデザインし、
ダイナミックアイランド付きのモダンな iPhone フレームに収めてください。機種を明示するとより精度が上がります：
iPhone 16 Pro のフレームに収めてください。
ステータスバーには現実的な時刻（9:41）とバッテリーアイコンを表示します。iPadフレーム
Section titled “iPadフレーム”タブレット向けUIや横画面レイアウトの確認に使います。
ダッシュボードのタブレット版を iPad Pro フレームに収めてください。
薄いベゼルと角丸を再現した形で。フレームをリアルに見せる4つのコツ
Section titled “フレームをリアルに見せる4つのコツ”1. デバイスの機種を具体的に指定する
Section titled “1. デバイスの機種を具体的に指定する”「スマートフォンのフレームで」より「iPhone 16 Pro のフレームで」のほうが精度が上がります。
iPhone 16 Pro のフレームを使ってください。2. 環境要素を追加してコンテキストを出す
Section titled “2. 環境要素を追加してコンテキストを出す”デバイスが置かれている場所・状況を加えると、よりリアルな雰囲気になります。
ブラウザフレームの背景にデスクトップの壁紙を追加してください。iPhone を木製のデスクの上に置き、柔らかい照明が当たっているシーンで表示してください。3. 角度と影でリアルなモックアップを作る
Section titled “3. 角度と影でリアルなモックアップを作る”平面に置いたデバイスより、わずかに傾けたほうが立体感が出ます。
iPad を 15度の角度でわずかに傾け、下に柔らかな影を落とした状態で表示してください。4. 複数デバイスを並べてレスポンシブを見せる
Section titled “4. 複数デバイスを並べてレスポンシブを見せる”デスクトップ・タブレット・モバイルの3つを並べると、レスポンシブ対応を一目で伝えられます。
同じデザインをデスクトップ（ブラウザフレーム）・タブレット（iPad）・
スマートフォン（iPhone）の3デバイスに並べて表示してください。
それぞれにレスポンシブデザインが適用された状態で。 クイズ