資料作りのときに使える「iPhoneのモック画面の中にそれっぽくサービスのキャプチャを挿入する」方法

f:id:kocoronoblue:20220210012536p:plain

資料作りに悩むみんな〜〜!



こんにちは。
Bagsy Meという会社を経営しているコイデと申します。
僕は「なんちゃって企画者」としてIT業界で何とか生き延びてきたんですが、そういう「何も持たざるもの」にとって重要なスキルの一つが「それっぽい資料を作れる」ことであります。

どうしようもない人間でも、かっこいい資料を作れるというだけで実は一定の需要があったります。本質かどうかはどうでもいいんです。おれたちはとりあえず生き残らなければならない。生きてゆく力がその手にあることは大切です。



そして告白しちゃいますけど、致命的とも言えますが僕はPhotoshopをまったく使うことができません。まじでわかんないんです。

どう考えても直感的とは思えないツール類やワーディング、膨大すぎる機能ゆえにいくら検索しても適切な手段がわからない、そもそも値段が高すぎるなど、「なんちゃって企画者」にはハードルが高すぎるんです。フォトショは。


しかしそれでもおれたちはそれっぽい資料を作らなければならない。というわけでこれだけ知っておけば資料のクオリティが格段によくなるtipsをお伝えします。まあシリーズ化したいんですけどたぶん今回で終わります。お伝えしたいのは「iPhoneのモック画面の中にキャプチャを挿入して良い感じにする」手法です。まあみんなできると思うんだけど、僕はできなかったので誰かに響け恋の歌。


まずは実例から見て欲しい。
僕の会社のサービス資料のスライドです。

Before

f:id:kocoronoblue:20220210005202p:plain

After

f:id:kocoronoblue:20220210005215p:plain


一目瞭然ですね。
AfterのスライドはiPhoneの画面の中にサービスの画像がキレイに納まっています。
フォトショ使わなくても簡単にできるの。
早く教えてよ〜せんせい〜〜〜義務教育のときに教えてくれよ〜〜。

というわけで惜しみなく公開します。

1.Affinity Designerを購入する

affinity.serif.com

まずはこれを購入しましょう。
PC版だと7000円、iPad版も2700円です。
たったこれだけで、ノンデザイナーにとっては必要十分な機能が提供されています。
たまに安くなったりするみたいですが、別にいいですよねこれくらいの値段。
いま買ったほうがいいです。
アフィリエイトリンクじゃないのでなおさら買った方がいいです。
僕もこの記事書いた後に試用期間が過ぎたので購入しました〜。

2.Apple公式からPSD素材をダウンロードさせていただく

developer.apple.com

公式様がまさかのデザイン素材を提供してくれていました。
まじでジョブズは神だわ。

f:id:kocoronoblue:20220210001656p:plain

iPhone13の素材をダウンロードします。

f:id:kocoronoblue:20220210001847p:plain

ダウンロードした素材はこちらから開けます。
フォトショがインストールされてる端末でファイルを開くとフォトショが立ち上がるけどここは無視しましょう。
ここではファイルは開きません。

3.PSDファイルをAffinity Designer上で開く

Affinity Designerを起動します。
もし下部のような画面(スプラッシュ)が出たら新規ドキュメントじゃなくて「閉じる」を押します。
f:id:kocoronoblue:20220210002356p:plain


次にこんな感じで、さきほどダウンロードしたPSD素材をドラッグ&ドロップします。
f:id:kocoronoblue:20220210003432g:plain

ブログではじめてアニメーション使った〜〜こうやるのか〜〜。
小さくてごめんね。

4.ファイル→配置ではめ込みたい画像を挿入して位置調整

次にはめ込みたい画像をスマホでキャプチャしてPCに送った後にその素材をAffinity Designerで「配置」します。

f:id:kocoronoblue:20220210004152p:plain
わかりやすいわ〜〜〜。

こんな感じで、配置したら青いグリッド線に合わせます。

f:id:kocoronoblue:20220210010244g:plain


5.キャプったレイヤーを「Hardware」の下にドラッグ

仕上げです。
端っこが出ちゃっててかっこ悪いですね。
これはキャプチャした画像が最上部にいるから。
右側にあるレイヤータブ(このツールバーはスタジオっていうらしいです)の、先程挿入したキャプチャ画像を「Hardware」の下にドラッグしてみます。
(ついでに「Status Bar」の右にあるチェックボックスをオフにしましょう)

f:id:kocoronoblue:20220210011030g:plain



すると。。。



f:id:kocoronoblue:20220210011344p:plain
キレイなiPhone画像がきた〜!



以上です。
あとは「ファイル」から書き出せば良い感じになると思います
ぜひ皆さん試してみてください。

あとうちの会社のデジタル整理券「mogily」は、お客さんが長時間並んじゃうイベントの時に、シュッと良い感じに列整理してくれるシステムですので良かったら名前だけでも覚えて帰ってください。

それじゃまた。