ここまでモックアップ画像を作成する際のポイントと実例について、見てきました。今回は実際にモックアップの作り方について、お話しします。
ここでは私の専門分野のオンライン講座をイメージできるようなモックアップを作りたいと思います。実演付きで解説しますので、初めてモックアップを作る際の参考にしてください。
モックアップを作る手順
それではさっそくモックアップを作っていきましょう。今回のモックアップづくりでは、以下の手順で実演してみたいと思います。
- 素材を選択する
- 写真を挿入する
- 文字を入力する
- ノートパソコンのモックアップを入れる
- スマホのモックアップを入れる
- 書籍のモックアップを入れる
こちらの流れに沿って、どのようにモックアップを作るのか、どこに注意すべきかについて解説します。これまでのレッスン同様、Canvaを使って作成します。一緒に作業するのであれば、前もってCanvaを起動してください。
今回紹介するモックアップづくりの流れは、あくまでも一例です。この流れに従って絶対に作業しなければならない、というわけではありません。以下の流れを参考にして、自分のケースに合わせて調整してください。
素材を選択する
Canvaのトップページにくると、まずサイズを指定します。どのサイズにするか、横長のものであればどのようなものでも構いません。好きなものを選んでください。
今回私はYouTubeサムネイルが横長でいい感じでしたので、こちらを使用したいと思います。YouTubeサムネイルを選択すると、以下のような画面に切り替わります。こちらをベースに、モックアップを作っていきたいと思います。
これまで私の実際に作成したモックアップ画像を見ていただきました。パソコンやスマホなどのデジタルデバイスを並べているようなモックアップがいくつかあったと思います。このようなパソコンのデザインは、Canvaの素材のなかにあります。
画面左端の「素材」を選択すると、さまざまなタイプの素材がその右隣に表示されます。こちらを下にスクロールすると以下のスクショのように、「フレーム」という項目が表示されると思います。フレームの右側に「すべて表示」という項目があるので、こちらをクリックします。
するとさまざまなフレームの種類が表示されます。その中で「デバイス」を選択しましょう。デバイスにはスマホやタブレットのほかに、パソコンのデザインもあります。今回はこちらを使ってみましょう。
写真を挿入する
ここから写真を入れていきたいと思います。今回は以下のスクショの写真を使ってみましょう。
今回は私の写真を使ってみました。私の写真を入れることで、このオンライン講座は誰がやっているのか具体的にイメージできるためです。写真は左端のメニューの「アップロード」から適当なものを選択しましょう。
文字を入力する
続いてパソコンのイラストの画面の上に文字を入れたいと思います。このままでは文字が見にくくなってしまうので、四角の素材で画面をカバーしたいと思います。素材メニューのなかから「図形」の項目のなかに四角がありました。こちらを使ってみたいと思います。
もし四角の素材の色が自分のイメージしたものと異なっていれば、画面上部メニューの左にある丸いアイコンをクリックしましょう。すると画面左側にカラーメニューが表示されるので、そのなかから適当なものを選んでください。
今回私は黒を選択して、ドラッグしパソコンの画面全体をカバーするように調整しました。ただしそのままだと真っ暗になってしまい、先ほどアップロードした私の写真が見えなくなってしまいます。その場合、画面上部のメニューのなかに格子状のアイコンがあるでしょう。こちらは透明度を調整できるアイコンです。
透明度をクリックすると調整バーが表示されます。調整バーを左右に動かして、ちょうどよいところに調整しましょう。四角の素材を画面にカバーして、透明度を調整した結果できあがったのが以下のスクショです。
パソコンの画面部分をカバーしているけれども、透明にすることでうっすら私の画像も見えるようになりましたね。ここまで出来たら、文字を入れていきましょう。
今回はシンプルに「オンライン講座の作り方」というタイトルでいきたいと思います。テキストを選択すると、その右隣にメニューが表示されます。「見出し」を選択して、あとは普通にテキストを作成する感じで「オンライン講座の作り方」と入力してください。
もしかすると、文字の感じが自分のイメージと違うこともあるかもしれません。その場合には、上部メニューの左端の文字が記載されているところをクリックしましょう。すると左側にさまざまなフォントが表示されます。そのなかから好みのものを選択してください。ちなみに私の場合、太字で強調したいと思ったので「ヒラギノ角ゴシック」を選択しました。できあがったのが、以下のスクショです。
これで一つ目のできあがりです。今回のイラストはデスクトップ型のパソコンの画面ですよね。今度が同じような要領で、ノートパソコン型のイラストでモックアップを作っていきたいと思います。
ノートパソコンのモックアップを入れる
前回と同じで、素材メニューのなかから「デバイス」を見つけましょう。するとノートパソコンをイメージしたイラストがいくつか出てくると思います。今回私は、以下のイラストを選択してみました。
上の画像の右下に新しくノートパソコン型のイラストが追加されました。Macのパソコンのような感じで、ちょうどよいと思いました。そのままだとバランスが悪い可能性もあります。その場合には大きさを調整してください。
もしかすると先ほど作成したデスクトップ型のパソコンのイラストを動かさないといけないかもしれません。そのような場合に簡単に一括で移動できるように、グループ化しておくとよいでしょう。
グループ化する方法は簡単です。素材を選択して、「グループ」をクリックするだけです。複数の素材をグループ化するのであれば、Shiftキーを押しながら対象の素材をクリックしてください。
今回位置を動かしてみたところ、新しく作成したノートパソコンが先ほどのデスクトップの下に来てしまいました。その場合にはノートパソコンにカーソルを合わせて、右クリックします。すると「レイヤー」メニューが表示されるので、こちらを選択しましょう。すると右側にさらにメニューが表示されるので、「前面に移動」をクリックするとノートパソコンがデスクトップの上に表示されるはずです。
今度は前と同じように、写真を画面の部分に入れ込みたいと思います。同じようにアップロードから適当なものを選択するだけです。今回は以下のスクショのように、前回とは違った画像を入れてみました。
写真を使用する際には該当する画像をクリックして、ノートパソコンの画面のところまでドラッグしましょう。すると上の画像のようにパソコンの画面内に写真がはめ込まれます。
次も先ほどと同じように、四角の素材を選択して画面の上にカバーします。統一感を出すために前回と同じ黒にし、透明度で調整してうっすら写真が見えるように調整しましょう。
さらに文字を入れるために画面左端のメニューのなかから「テキスト」を選択します。そして見出しを選んで、白い文字で作成しましょう。できあがったのが、以下のスクショです。
同じように「オンライン講座の作り方」とし、フォントも統一感を出すために「ヒラギノ角ゴシック」にしました。前回のデスクトップ型と画面の大きさが異なるので、フォントサイズは前回のものよりもやや小さくした方がよいでしょう。これで2つ目のできあがりです。
スマホのモックアップを入れる
それでは3つ目を入れたいと思います。素材を選ぶ際にはこれまでの方法で引き続き探しても問題ありません。しかしCanvaには素材を検索できる機能があります。こちらを活用しましょう。
今回はスマホを入れたいと思うので、「スマホ」とバーに入力して検索してみます。すると以下のスクショのように画面左側に該当する素材がいろいろと出てきました。
もしかすると検索結果では、自分の意図したフレームが見つからない場合もあります。今回もイメージしたものが見つからなかったので、先ほどの方法で探してみたいと思います。
素材をスクロールすると「モックアップ」という項目がありました。こちらを選択してみたところ「スマートフォン」がありました。このなかから、以下のスクショのイラストを選んでみました。定番のスマホという感じですね。
そしてスマホの画面のなかに先ほどと同じように、写真を入れ込みます。私の場合、たまたまスマホのスクショがありました。これをそのまま持ってこようと思います。
そうしましたら、ほかの2つと同じように四角の素材を持ってきてカバーします。以下のスクショのような感じに仕上げてみてください。
今までと同じ要領で、位置や大きさを調整して、うっすら下の画像が見えるように透明度を調整してください。ただ一点注意が必要なのは、角です。スマホの場合、角が少し丸まっています。四角の素材をそのまま持ってくるだけでは、ぴったりカバーできません。
上の画像の上部メニューに注目してください。フォントタイプを表示している部分の左隣に、直角ターンをした形状のアイコンがあると思います。こちらは角の丸みを調整できるメニューです。こちらをクリックして、角の丸みを調整し、スマホにぴったりフィットさせましょう。
続いて、これまでと同じように文字を入れていきます。キーボードで入力しても構いませんが、これまで作成したものをそのままコピペすると、時間もかなり短縮できます。
以前2つと比較して、スマホの場合画面のサイズが小さいですよね。この画像のサイズに合わせて、文字の大きさも調整しましょう。もしかすると画像のサイズに合わせると文字が小さすぎて、見づらくなってしまうかもしれません。
特に今回の場合、使用している写真にも文字が入っています。すると新しく入れたテキストと相まって、文字が混ざって見にくく感じるかもしれません。その場合には透明度を調整して、後ろの文字を判別しにくくするのも一つの方法です。そしてできあがったのが、以下のスクショです。
書籍のモックアップを入れる
最後に本を入れていきましょう。本のイラストはモックアップのなかから探してみましょう。素材メニューのなかから「モックアップ」を選択すると、「印刷」という項目があるはずです。上部には該当するものはないかもしれません。しかしスクロールすると、下の方に本が出てくると思います。今回私は以下のスクショのようなモックアップを使ってみたいと思います。
どうでしょう？まさに書籍という感じがしませんか？この書籍のモックアップを入れることで、書籍ももらえそうな感じがしますよね。位置や大きさをほかのモックアップとバランスがとれるように調整してください。
次に書籍の表紙部分に写真を入れましょう。書籍の表紙になりそうなものを選択して、アップロードしてください。
これまでデジタルデバイスのモックアップでは四角い素材を持ってきて、透明感を出してその上にテキストを持ってきました。しかしこの書籍のモックアップは文字情報などもすでに入っているので、そのような必要はないでしょう。統一感を出したければ、写真にほかの素材と同じメッセージの入っているものを使うとよいでしょう。
書籍のモックアップも入れて、できあがったのが上のスクショです。いい感じに仕上がったと思います。いろいろなモックアップを入れると、バランスが少しおかしいと感じることもあるかもしれません。その場合に配置や大きさを調整しておきましょう。
今回は背景なしでダウンロードしたいと思います。その場合、右上の「共有」をクリックすると作成したモックアップ画像をダウンロードできます。この時以下のスクショのように、ダウンロードに関するいろいろなメニューが表示されます。そのなかに「背景透過」とい項目があるでしょう。こちらのボックスにチェックを入れて下部の「ダウンロード」をクリックすれば、背景なしのモックアップ画像の作成が可能です。
このように背景抜きのモックアップ画像の方が、LPにも入れ込みやすくなります。背景透過にチェックを入れる点は、最後のダウンロードする際に忘れないようにしましょう。
まとめ
いかがでしたか？今回はオンライン講座をイメージできるようなモックアップ画像の作り方について、お話ししました。
これまでも何度か紹介したように、Canvaには多種多様なテンプレートがあります。オンライン講座用のモックアップ画像にも使えるテンプレートがあるのでこちらを使用すれば、あとは文字を入れたり、大きさやレイアウトを調整するだけで簡単に作成できます。
画像によっては、複数の素材を使用する場合もあるかもしれません。一度に移動したり大きさ変更したりするために、Canvaのグループ化機能を活用するとよいでしょう。LPを作成する際には、視聴者がイメージしやすいようにモックアップ画像をどんどん作ってみてください。