今回は、スマホ画像をイメージできるモックアップの作り方を実演付きでお話ししたいと思います。スマホのモックアップ画像をLPなどに盛り込むことは、今後ますます重要になります。なぜなら、今では大半の方がスマホでインターネットを見ているためです。
総務省の調査によると、すべての世代でインターネット利用ツールでスマホが最も多いという結果が出ました。13～59歳の世代に限ってみると、スマホ利用が80％を超えているほどです。オンライン講座を提供する場合、スマホを見てレッスンを受講する方も少なくないでしょう。そのような方がイメージできるように、スマホのモックアップをLPに反映させることは大変重要です。
スマホ画像のモックアップを作る手順
それではさっそく、スマホ画像のモックアップづくりを実演してみたいと思います。今回は以下の流れで進めていきます。
- スマホに入れ込む画像を選択する
- スマホのモックアップを選択する
- ダウンロードする
あくまでも今回の手順は一例です。モックアップの作り方次第では順番が変わったり、特定の工程が不要だったりするかもしれません。ここでは「こんな風にスマホのモックアップは作るのだな」と参考にしていただければ幸いです。
スマホに入れ込む画像を選択する
まずはCanvaを立ち上げて、適当に画像サイズを選びましょう。すると以下のスクショのように、白紙の状態の画面が表示されるはずです。
この白紙部分に、まずはスマホの画像に入れ込む素材を選択しましょう。私の場合以下のように、すでにそのまま利用できるスクリーンショットの素材がありました。そこでこちらをそのまま使用したいと思います。
皆さんもアップロードで保存しているもので利用できそうなものはないか、探してみてください。もしなければ、新しく作成してアップロードメニューの上部にある「ファイルをアップロード」ボタンから該当するデータをアップロードしてください。
スマホのモックアップを選択する
素材を選んだところで、先ほどのスクショの上部をご覧ください。いろいろなメニューがあって、左端に「編集」ボタンがあるでしょう。こちらをクリックすると、以下のスクショのように左側に関連するメニューがいろいろと表示されます。
このメニューを下にスクロールしていくと、上のスクショのちょうどカーソルが指し示しているところに「Mockups」があります。こちらをクリックします。
すると左側のメニューがMockupsのものに切り替わります。メニューをスクロールしていくと、上のスクショのカーソルの指し示している部分に「スマートフォン」という項目がありますね。この右隣にある「すべて表示」をクリックすると、該当する素材の一覧が表示されます。
正面を向いているものだけでなく、横向きや背景画像のあるものなどいろいろな素材が表示されると思います。誰かの会話のなかにスマホが入っているような構図のものもありますよね。その中で自分のLPにマッチするものを選びましょう。ちなみに私は以下のスクショの素材を選びました。
LPに使用する場合には、今回私が選んだもののようにスマホ単独のものが使いやすいと思います。そしてCanvaのすごいところは、上のスクショのように素材を選択すると先ほどのスクリーンショットを反映したものが自動的にできあがってしまう点です。
つまり自分でいちいち編集しなくてもよいわけです。本当に簡単にスマホ用のモックアップができてしまうので、びっくりするでしょう。
ダウンロードする
できあがったら、あとはダウンロードするだけです。右上にある「共有」ボタンをクリックすると、以下のスクショのようにメニューが表示されます。
あとは「ダウンロード」ボタンをクリックすると、自動的にお手持ちのデバイスにダウンロードされます。もし複数のページを保存している場合には、該当するページを選択しましょう。
上のスクショのメニューのなかに、「背景透過」という項目がありますよね。スマホ用のモックアップを作る際には、背景透過の部分にチェックを入れるのも忘れないようにしましょう。背景をなくした方が、LPページにモックアップを入れ込みやすくなるためです。これでスマホ用のモックアップは完成です。
まとめ
いかがでしたか？今回はスマホ用のモックアップの作り方について、お話ししました。Canvaを利用すれば、簡単に作ることができましたよね。
スマホの画面に入れる写真などを選択して、スマホをイメージできるモックアップを選択すれば、画面のなかに自動的に写真を入れ込めます。いちいちこちらが操作する必要がないので、初心者でも簡単に作成できます。
今回私は、長方形のサイズのものでモックアップ画像を作成しました。しかし皆さんは正方形のもので作成した方がよいかもしれません。これまで紹介したスクショ画像をご覧いただければお分かりですが、結構余白ができてしまうためです。
今回紹介した手順を参考にして、皆さんもスマホ用のモックアップ画像を作ってみましょう。