デザイン

iPhoneのモックをパワポで超簡単に作る!そして自分好みにカスタマイズしてみる!

iPhoneのアプリや機能を紹介するときに、モックを使えば映りはとてもかっこよくなりますよね。iPhoneのモックはこれまでいろいろなデザイナーの方たちが作成されてきて、いろんな形式で配布されています。

ですが、そういった素材を勝手に使ってもいいのか、自分で作られれば気軽に使えるのに、と思ったことはありませんか?

そんなときに、「あ、パワーポイントなら簡単に作れるかも」と思ったので、今回は作り方を簡単に紹介していきます!

どうやって作る?

パワーポイントの「図形」を駆使して、簡単にモックを作成することができました!実際に作ったモックは上の画像のようなものになります!ちゃんと透過されているので、スクリーンショットと重ねてもスマホっぽく見えます。

実際に、この作ったパワポ製モックを使ってサイト記事にも活用してみました!

記事iPhoneの「メモ」アプリ - 使い方徹底ガイド

こちらではiPhoneの標準アプリである「メモ」アプリの使い方を1から丁寧に説明し、みなさんが「メモ」を最大限使いこなせるようガイドブックを作成しました。「メモ」は非常に多くの機能が搭載されており、と ...

続きを見る

次項で簡単に作り方を説明していきます。

作り方

①まずは図形挿入でiPhoneの大枠を作るため「四角形(角を丸くする)」を使用します。サンプルとして数値を紹介すると、高さ16.96cm、幅8.17cmとなっています。角丸の程度はイイ感じに調整してみてください!線の幅は8.75pt、塗りつぶしは無しとなっています。

②続いて本来カメラなどがついているノッチの部分を作成します。ノッチには2種類の図形の組み合わせで作成します。ひとつは黒色で塗りつぶした四角の角丸、もうひとつは白色(背景と同色)の四角を使います。黒色の四角(角丸)のはみ出た部分を白い四角で隠しているだけです。黒色の四角(角丸)のサイズは高さ1.46cm、幅3.94cmで角の丸みはイイ感じに調整してください!

もうひとつの四角(白色)ははみ出た部分を覆うように配置してください。

③続いて、電源ボタンと音量ボタンを設置します。これによりiPhone感が一気に増します。これも四角(角丸)の丸みを最大限にしたあとボタンサイズに小さくした形で再現しています。電源ボタンのサイズは、高さ1.93cm、幅0.25cm。音量ボタンはそれぞれ同じ大きさで、サイズは高さ1.36cm、0.27cmとしました。

④iPhoneX以降のホームバーを再現します。これは電源ボタンを複製してサイズ変更をするだけです。参考までにサイズは、高さ0.13cm、幅2.83cmで作ってみました。角が丸くないとホームバー感が薄れるので四角(角丸)を使ってみてください。

⑤最後に、四隅にはみ出た時用に隠すための四角を配置します。スクリーンショットは四角い画像のため、大枠の線がそこまでふとくない場合は下画像の右上のようにちょこっと画像がはみでてしまいます。それを隠すために、白色(背景と同色)の四角を仮置きしてはみ出した部分を隠します。下画像では左上にしか設置していませんが、四隅に配置してしまいましょう。また、重ねる順番は調整してみてください!

まとめ

いかがでしたか!それっぽいiPhoneモックが5分で簡単に作ることができたでしょうか!

色を自分好みに変えたり、他図形を組み合わせたりして自分好みにカスタマイズしてみてください!今回は以上!

-デザイン

© 2021 ガジェジー