こんにちは、デザイナーのMです。

モックアップは直訳すると「模型、試作」という意味です。
主に、商品や製品の最終デザインのイメージを掴むための具体的なサンプルとして作成します。

クライアントに対して、製品リリース前に完成イメージを視覚的に分かりやすく伝えるためによく活用されます。

　

たとえば…

　

スマートフォンページのデザインの動画モックアップなら、こんな感じ。

スマホ画像に動画を埋め込むことで、動きのイメージを具体的に確認することが出来ますね。

完成イメージは静止画で作成されることも多いですが、このように動画を使って作成すると、口頭だけではなかなか説明しづらい「アニメーション」を具体的に示すことが出来るので、チーム内のイメージを統一させたい時に役立ちます。

　

Photoshopで素材を作っているとき、こういった短尺の簡単な動画モックアップの書き出しであれば、他ツールを経由せずにPhotoshop内でまとめてやってしまいたい…そう思ったことはありませんか？

今回は、そういった方向けの作業手順の備忘録記事になります。よければ参考にして頂けますと嬉しいです！

それでは、さっそく見ていきましょう。

　

※記事は2024年10月現在の内容になります。

　

❶ 動画を用意する

今回の記事では、Windows PCで画面録画した短尺のmp4動画をPhotoshopで画像内に埋め込み、動画モックアップとしてGIFで書き出す・・・といった場合を想定した手順説明を行います。

なお、Windows10以降は標準機能でパソコンの操作画面を録画することが出来るようになっています。
新しいアプリを改めてインストールする必要はなく、

キーボードの［Windows］＋［G］キーで呼び出せる「ゲームバー（正式名：Xbox Game Bar）」や「Snipping Tool」などを使って手軽に行うことができます。

　

❷ Photoshopで動画を埋め込むための画像を用意する

例としてこちらのパソコンの画像を用意しました。このモニター部分に動画がはめ込まれるイメージで作成していきます。

　

❸長方形ツールで、動画を埋め込みたい画面と同じ大きさの図形を作成する

長方形ツールで動画をはめ込む用の図形を作成したあと、図形のレイヤーを右クリックし、「スマートオブジェクトに変換」をクリックします。

　

❹スマートオブジェクトに動画を配置する

スマートオブジェクトに変換した図形をダブルクリックすると、スマートオブジェクト編集用のアートボードが新窓で立ち上がります。

ツールバー[ ファイル ]から「埋め込みを配置」をクリックし、❶で用意した埋め込み用のmp4動画を呼び出し、設置します。

　

画面に合わせて動画のタテヨコを調整したのちに、ツールバー[ ウインドウ ]から「タイムライン」を選択。タイムライン窓を開きます。

動画を埋め込むだけでは動画としての機能を持たせることが出来ないため、タイムライン窓の中央にある「ビデオタイムラインを作成」をクリックしてタイムラインを呼び出しておきます。

　

埋め込んだ動画のタイムラインと長方形のタイムラインの長さを揃えたら、[ ctrl ]キー+[ S ]キー、もしくは「変更を保存しますか？」ポップアップでアートボードを保存して、閉じます。

　

❺タイムラインの長さを揃える

パソコン画像のアートボードに戻ると、スマートオブジェクトに動画が埋め込まれています。

このアートボードでもツールバー[ ウインドウ ] から「タイムライン」を選択してください。
タイムライン窓を確認すると、動画を埋め込んだスマートオブジェクトのタイムラインとパソコン画像のタイムラインの長さに差があることが分かると思います。

このままでは書き出したときに動画と素材の表示時間に差がついてしまうので、タイムラインの右端をクリック＆ドラッグして伸ばし、表示時間を揃えておきます。

　

❻書き出しを行う

最後に、拡張子「GIF」で書き出します。
ツールバー[ ファイル ] → 「書き出し」 → 「WEB用に保存(従来)」と進みます。

　

GIFは容量が嵩むので、「カラー」「劣化」あたりを上手く調整することで、データを軽くすることをおすすめします。

カラー
GIFは最大256色のカラーで表現されるので、減色するとその分軽くなります。
ただ、やりすぎは画像が荒れてムラになるので注意。

劣化
その名の通り、GIFを劣化させる機能です。
10～20程度の劣化であればそこまで荒れも目立たないので、おすすめの調整箇所です。

　

調整後、書き出し先を決め、保存をクリックします。

　

完成です！😄

　

mp4データとして書き出す場合

GIFではなくmp4データとして保存したい場合は、ツールバー[ ファイル ]から「書き出し」→「ビデオをレンダリング」にて書き出し（レンダリング）を行ってください。

　

　

いかがでしたでしょうか？
使いどころが限定されるハウツーではありますが、画面録画したものを動画モックアップとしてPhotoshopでサッと書き出せるようになっておくと、意外と便利だったりします。
状況に応じて、是非一度使ってみてください！

　

大阪を拠点にWeb制作、アプリ・システム開発を行っている株式会社MIXでは、デザイン×テクノロジー×マーケティングにより、お客様の様々な課題にお応えすることが可能です。
地域密着型の制作会社として、Webデザインやアプリ開発、システム開発、チラシデザイン、キャラクターデザインなどの幅広い制作経験がございます。ホームページの立ち上げまたはリニューアルをご検討中の方や、便利なアプリケーションやシステムが欲しいとお考えの方は、是非一度お気軽にご相談ください。お打ち合わせは対面・非対面の両方に対応可能です。

株式会社MIXへのお仕事のご相談・ご依頼はこちらから
https://mixltd.jp/contact/