iPhoneのモックアップ素材まとめ|無料で使えるPSD(iPhone6ほか)

素材 & フォント

iPhone6の発売日は9月19日(今日!)とのことですが、事前予約が9月12日からスタートしているので、既に予約して19日を楽しみに待っている方もいるのではないかと思いますが、今回のiPhone 6には、4.7インチのiPhone 6と5.5インチのiPhone 6 Plusという二種類があるとのことで、どちらが人気になっているのか気になるところです。

そんなこんなでiPhone 6発売記念ということで、いろいろなiPhone 6のモックアップ素材をまとめてみました。

 

f:id:lord_cashew:20140914232452j:plain

 

f:id:lord_cashew:20140914232524j:plain

 

f:id:lord_cashew:20140914232857j:plain

 

f:id:lord_cashew:20140914233111j:plain

 

f:id:lord_cashew:20140914233242j:plain

iPhone 6 – Free PSD Mockup : Medialoot

 

f:id:lord_cashew:20140914233327j:plain

 

f:id:lord_cashew:20140914233449j:plain

iPhone 6 Mockup | Tempees.com

 

f:id:lord_cashew:20140914233524j:plain

Dribbble – Iphone 6 plus (free mock-up) by musmodo

 

f:id:lord_cashew:20140914233557j:plain

Dribbble – Iphone 6 (free mock-up) by musmodo

 

f:id:lord_cashew:20140914233641j:plain

Dribbble – iPhone 6 Free angled PSD Mockup by Vladislav Litvin

 

f:id:lord_cashew:20140914233736j:plain

 

f:id:lord_cashew:20140914233815j:plain

 

個人的な感想

iPhone6が発売されるかされないかのタイミングで既にiPhone6のモックアップ素材がいろいろと公開されているのですが、WEB&IT業界の最先端にいる人達の行動の素早さにはホントに感服します。

 

 

そもそもモックアップ素材とは?

モックアップ素材とは、スマートフォンやパソコンの画面に、自分が作ったデザインをはめ込んで“実際の見え方”を再現できる素材のこと。多くはPSD(Photoshop形式)で配布され、用意された画面部分に自分のアプリ画面やWebサイトのスクリーンショットを差し込むだけで、リアルなプレゼン用ビジュアルが完成します。実機で撮影しなくても、それらしい見栄えの画像が手軽に作れるのが魅力です。

モックアップを使うメリット

  • 完成イメージが伝わりやすい:デザインを実機に乗せた状態で見せられるので、クライアントや上司への提案で説得力が増す。
  • 撮影が不要:本物の端末や撮影機材がなくても、プロっぽい写真風のビジュアルを作れる。
  • 使い回せる:一度差し込み方を覚えれば、別のデザインでも同じ素材で量産できる。
  • ポートフォリオ映えする:制作実績の見せ方が一段おしゃれになる。

はめ込みの基本手順

多くのPSDモックアップは「スマートオブジェクト」という仕組みで画面部分が作られており、次の流れで簡単に差し替えできます。

  1. Photoshopなどの対応ソフトでPSDを開く。
  2. 画面部分にあたるスマートオブジェクトのレイヤーをダブルクリックする。
  3. 開いた編集画面に自分のデザイン画像を貼り付けて保存する。
  4. 元のモックアップに戻ると、画面に自分のデザインが反映された状態になる。
  5. 全体をPNGやJPGで書き出して完成。

角度の付いたモックアップでも、スマートオブジェクトを使えばパース(傾き)に自動でなじむように作られているものが多く、難しい変形作業をせずに自然な仕上がりになります。

選び方と使うときの注意点

モックアップは種類が豊富なので、用途に合うものを選ぶと仕上がりが安定します。

  • 角度:正面(フラット)は資料向き、斜め(アングル)は雰囲気重視のビジュアル向き。見せたい印象で選ぶ。
  • 解像度:大きく使うなら高解像度の素材を。粗いと拡大時に画面がぼやける。
  • 画面サイズの一致:差し込むデザインの縦横比がモックアップの画面と合っていると、余白なくきれいに収まる。
  • ライセンス:商用利用やクレジット表記の条件を配布元で確認する。

なお、本記事で紹介しているのは旧機種であるiPhone 6向けの素材です。最新機種のデザインを見せたい場合は、現行モデルに対応したモックアップを探すほうが、より実際の見え方に近づきます。

よくある質問

モックアップを使うのにPhotoshopは必須ですか?

PSD形式の素材はPhotoshopが最も扱いやすいですが、PSDのスマートオブジェクトに対応した他の画像編集ツールでも差し替えできる場合があります。事前に対応状況を確認しておくと安心です。

画面に差し込んだデザインが歪んでしまいます。

差し込む画像の縦横比がモックアップの画面と合っていないと歪みやすくなります。あらかじめ画面サイズに近い比率で書き出しておくと、きれいに収まります。

商用の提案資料に使ってもよいですか?

配布元のライセンス次第です。商用利用可か、クレジット表記が必要かを確認してから利用してください。

まとめ

モックアップ素材を使えば、実機がなくてもデザインの完成イメージをリアルに見せられ、提案やポートフォリオの説得力が大きく高まります。スマートオブジェクトへの差し替えという基本手順を覚えれば、あとは角度・解像度・画面比率・ライセンスを意識して素材を選ぶだけ。最新機種を見せたいときは現行モデル対応の素材を探しつつ、シーンに合ったモックアップを使い分けてみてください。

関連記事

この記事を投稿した人
おしブロ管理人

Web発掘ブロガー。知る人ぞ知る、ちょっと面白くてちょっと便利なWebツール・サービス・レトロデジタルを"発掘"して紹介しています。大手が扱わないニッチな隙間を掘って、「これ面白い!」「やってみたい!」をお届け。

おしブロ管理人をフォローする
素材 & フォント