今回は実際にモックアップの事例をいくつか見ていきたいと思います。前回の講座で、最初にモックアップを制作する際にはほかの誰かのものを参考にするとよいと紹介しました。そこでここでは実際に私が過去、作成したモックアップをいくつか見ていきましょう。
以下で紹介するモックアップの実例のなかに、参考になりそうなものがあるかもしれません。そのようなものが見つかったら、今後実際にモックアップを作成する際にどんどん取り入れていってください。
視聴者のイメージを膨らませる
まずは上のスクショです。本が表示されていますね。ただこの本、実際にあるものを写真に撮ったものではありません。あくまでもモックアップとして作成しました。
左側に表示されている本に注目してください。私が作成したのは、この本の表紙の部分です。表紙しか作成していませんが、モックアップを作ることによって実際の本のように見せられます。
今度は右側の部分を見てください。「サービスが売れる！モックアップの作り方」というタイトルの下に、先ほど紹介した本のモックアップが載っているでしょう。このようにただPDFを貼り付けるのではなく、本のモックアップを掲示することで実際に本が受け取れるイメージになります。
実際には電子のPDFファイルでダウンロードするので、実物の本は受け取れません。しかしこのように本のイメージを盛り込み実物があるように提示してあげると、「私も受け取ってみたい！」と視聴者に思わせることができます。
続いて、実際に私がLPでモックアップをどのように使っているか、紹介します。上のスクショをご覧ください。こちらは私が実際に稼働させているLPです。リードマグネットの作り方に関するPDFを配布しているという内容のページです。e-Bookですね。
実際に配布しているのはe-Bookですが、このように本をイメージした画像を見せることで「何か読み物をプレゼントしているのかな？」と視聴者を思わせることができます。
立体感を出してあたかもあるようにイメージする
上の画像は先ほど紹介したスクショをスクロールすると表示される内容です。リードマグネットの作り方の中身がどのようになっているか、モックアップを作成してみました。イメージできるようにわかりやすく表示しています。
モックアップのところをよく見てほしいのですが、影をつけてみました。影をつけることで、より立体的なイメージに仕上がります。これを見た人は、実際にこれを手に取れるような感じになります。このように本を実際に手に取ることができるようなイメージをモックアップで膨らませられるわけです。
このようにただ単にe-Bookがもらえるよりも、このような画像があると「こういったチェックリストが手に入る」と見ている方がイメージできます。具体的にイメージできると、価値のあるものと理解してもらえるため、受け取ってもらえる確率も高まります。
視聴者がシミュレーションできるようなモックアップ
こちらも私が作成したものです。これは実際のオンライン講座に関する説明をしているページです。画面左側にパソコンやスマホ、タブレットのモックアップが表示されていますね。
このようなモックアップを掲載することで、実際にこのオンライン講座に申し込んで受講した場合、このような感じで学習するのだなと見ている人がイメージできます。またいろいろなデバイスのモックアップを提示することで、パソコンだけでなくスマホやタブレットでも視聴できるのかなというシミュレーションができます。
もう一つ別のものを見ていきましょう。こちらも先ほどと同じようなLPです。画面左側を見ると、こちらもパソコンとスマホ、タブレットのモックアップが表示されていますね。
こちらも同じように、パソコンだけでなくスマホやタブレットでも表示できるんだと見ている方に思ってもらえるためにこのようなモックアップを作ってみました。
配布するものを掲載する
こちらのLPも、実際に購入するとこのようなものが得られますよとイメージできるモックアップの実例です。「感動レベルのオンライン講座の作り方」と表示されているパソコンのモックアップの裏側に、ファイルが何枚か表示されていますね。
このファイルは実際に受け取れるものです。さすがにここまで細かくチェックする人は、そこまで多くないかもしれません。しかしPDFやテンプレートなどを表示することで、価値あるものが受け取れると見ている人は思っていただけるかもしれません。そのために、ここでもモックアップを活用しています。
上のスクショは、先ほど紹介した画面を下にスクロールすると表示されるものです。先ほどの画面と比較して、法則など詳しく表示しているバージョンです。このようにモックアップだけでなく、文字と組み合わせて伝えることもできます。
まとめ
いかがでしたか？今回はモックアップの実例について、いくつか紹介しました。
いきなりモックアップを作成するといわれても、どうすればよいかわからないかもしれません。その場合にここで紹介したような既存のモックアップを参考にしてみるとよいでしょう。
モックアップを作りたいと思ったら、LPやSNSでモックアップを使っているものはないかチェックしてみましょう。すると「こういったモックアップの使い方があるんだな」と新たな発見ができるかもしれません。モックアップを初めて作成する際には、いろいろなほかのモックアップを見るところから始めてみましょう。