• 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

日々、クリエイト。

2021年2月18日(木曜日)  (山下 莉穂)

デザイナー初心者向けモックアップ画像の作り方解説




こんにちは。
AliveCastアシスタントクリエイターの山下です。

今回は、Webデザイナー初心者向けにモックアップ画像の作り方を解説していきます。

まず、モックアップとは何ぞや?というところから。

引用:

モックアップ
モックアップとは、実物とほぼ同様に似せて作られた模型のことである。特に携帯電話の見本品を指すことが多い。 - IT用語辞典バイナリ


モックアップ画像は実物のような見た目なので、クライアントへの提案やプレゼンをより伝わりやすく魅力的なものにできます。


この記事では、Web制作会社のホームページでよく見かけるような、下のモックアップ画像の作り方を紹介します。







準備するもの

・モックアップ素材のPSDデータ
こちらからダウンロードできます


・キャプチャ
モックアップ画像上のiMacとiPhoneにはめ込むキャプチャを用意します。
私は以下のツールを使っています。


PCキャプチャ用
FireShot

iPhoneキャプチャ用
WebCollector



では、準備ができたらさっそく作ってみましょう!


作成手順

ダウンロードしたPSDデータを開きます。

1番上にある「Delete Me」レイヤーを削除します。






デバイスたちがあらわれます。






今回、iPadとMacbookは使わないので、レイヤーグループを非表示にします。

また、デバイス下に反転している影も不要であれば、「Reflection」レイヤーグループを非表示にします。

iPhoneを右に移動するには、「Workspace」レイヤーグループの中にある「phone X」レイヤーグループを選択してCtrl + T (自由変形)で動かします。








下準備ができたので、ディスプレイに画像を入れていきます。

「Paste your design here」レイヤーグループの中にある、iMacのウィンドウ部分をダブルクリックします。








新しいタブが開き、空のレイヤーが用意されているので、ファイル>埋め込みを配置から、任意のキャプチャ画像を配置します。








弊社の制作実績サイトのキャプチャを置いてみました。▼








Ctrl + S (Command + S) で保存して最初のタブに戻ると、綺麗に出来上がっています!







同じようにphone Xレイヤーにもキャプチャを配置すれば完成!







まとめ

実際に作ってみると、意外と簡単だったのではないでしょうか。
個人のポートフォリオなどにも使えそうですね!

最近はPhotoshopを使わなくてもドラッグ&ドロップで簡単にモックアップ画像が作れるツールもあるので、今後も色々試してみたいと思います!


AliveCastIPのみ表示されます

OK

管理側

残り

javascript css html VIEW側

php matchルーチン