お見積もり
伝わるプレゼンスライド
デザインサンプル100
新サービス!
オリジナルテンプレート
・PPTセミナー
Journal
コラム
2020.12.11
スライド制作テクニック プレゼンのノウハウ

勝手に検証! スマホで見やすいプレゼン動画を作ってみた

勝手に検証! スマホで見やすいプレゼン動画を作ってみた

good presen!が、プレゼンテーションや情報伝達について気になることを勝手に調べて検証していく、「勝手に検証!」シリーズ。 今回は、PCでのプレゼンテーションではなく、「スマートフォン(スマホ)」に注目。横型と縦型で人の視線の動きはどう変わるのか、レイアウトのコツはあるのか、配色はどうすれば良いのかなどなど、PC(横)型のプレゼンスライドとスマホ(縦)型のプレゼンスライドの違いを検証するべく、スマホ型プレゼン動画を作ってみました。

目次
  1. スマホでの情報閲覧率の上昇
  2. 1|GOTOトラベルキャンペーンでやってみた
  3. 2|画面比率の違い
  4. 3|画面サイズの違い
  5. 4|ターゲットの違い
  6. ターゲットに合わせた仕様で効果的なプレゼンテーションを


スマホでの情報閲覧率の上昇

プレゼン動画をご覧いただく前に、そもそもなぜスマホでプレゼンテーション?という点についてご説明します。総務省が毎年発表している「情報通信白書」の『インターネット利用端末の種類』に関する調査によれば、2015年はスマホ利用率54.3%、PC利用率56.8%でしたが、2019年はスマホ利用率63.3%、PC利用率50.4%。わずか4年でスマホの数値がPCの数値を上回っていますし、スマホ利用率は約10%もアップしています。また、2017年の調査では、20、30代の90%以上がスマホをインターネット接続端末として利用していて、次に利用割合の高いPCよりも20%程度高い結果となっています。 最近では動画広告も、横型だけでなく縦型のものをよく見かけます。2018年の調査(モバーシャル株式会社)によれば、20代の約4割が横型の動画を見る際もスマホの向きを縦のままにしているそうです。縦型のコンテンツを発信することで、スマホユーザーが画面の向きを変える手間を省くことができますし、横型のコンテンツを縦向きのまま見るときよりも分かりやすく訴求することができます。
広告はもちろん、広告以外の情報発信についてもスマホ型プレゼンを上手く活用することで情報伝達の効果がよりアップするのではないでしょうか。若者のスマホ利用率が高いという点から、例えば、学校であれば学生募集(募集要項や入試制度について)、企業であれば転職活動者向けの会社紹介など。スマホ型プレゼンの活用で、若者世代への情報伝達の可能性を広げていけると考えられます。

1|GOTOトラベルキャンペーンでやってみた

good presen!では、これまでパワーポイントで800件以上のスライド制作をしてきましたが、そのほとんどが横型でした。今回スマホ型プレゼンテーションを検証するにあたり、多くの方が見聞きしたことがある可能性の高い、「GOTOトラベルキャンペーン」を題材に、GOTOトラベルキャンペーンとは何か?を3分でプレゼンしてみることに。
どのくらいお得に旅行できる?日帰り旅行もOK?地域共通クーポンって何?など、気になる内容をスマホで分かりやすく解説しました。
なお、本動画はキャンペーンのPRを目的としておりません。スマホでのより良いプレゼンを検証することを目的に、題材のポイントを整理し、見やすいデザインとして作成しております。

まずはご覧ください。ぜひ、スマートフォンで。


PC型とスマホ型では何がどう違うのでしょうか。比較しながら検証していきます。

2|画面比率の違い

まず、PCとスマホでは画面比率が違います。
PCでのプレゼンスライドは16:9または4:3の横型が一般的ですが、スマホは縦型です。
パワーポイントでスマホ型プレゼンスライドや動画を作る場合、まず「ユーザー設定のスライドサイズ」で縦型のスライドサイズに設定します。
パワポでスライドサイズの変更ができることを知っている方は多いと思いますが、縦型はあまり見慣れないのではないでしょうか。
実は下の2つ、面積自体は同じですが、全く違う印象を受けると思います。

①PCは左右、スマホは上下でレイアウト

画面比率が違うと画面上のレイアウトが変わります。
例えば、地域共通クーポンについて、紙と電子の2種類があることを解説するスライドの場合、PCでは左右に配置するイラストを、スマホでは上下に配置しました。

では、3つのオブジェクトを配置したい場合はどうでしょうか。
こちらのスライドは、予約方法の例を3つ紹介しています。PCでは横並びに入りますが、スマホでは横並びや縦一列にすると一つひとつのイラストが小さくなってしまうため、上下に分けて配置しました。今回は、〇の例が2つ、×の例が1つだったので、上を〇の例、下を×の例とすることで視覚的にも捉えやすくなりました。3つ以上のオブジェクトの場合、縦型レイアウトは難しく感じるかもしれませんが、工夫することで見やすくなります。

②テキストはコンパクトに。長くなる場合は見やすい工夫を

また、テキストの入れ方も変わります。
プレゼンスライドを作成する際は、「読ませる」のではなく「見せる」スライドにするため、情報量、文字数が多くならないような工夫が必要ですが、スマホの場合は、スライドの横の長さがPCの半分しかないため、PCよりも一層、キーワード化の意識が重要です。タイトルなどは一行が望ましいですが、どうしても2行になってしまう場合は、より目立たせたいワードのフォントサイズを大きくする、太文字にする、色を変える、などの工夫をするとわかりやすくなります。
例えば、先ほどの予約方法解説のスライド。PCでは「GOTOトラベル対象商品を事前予約」が一行で入りますが、スマホだと2行になってしまうので、目立たせたい「事前予約」のサイズを大きくしています。

③グラフは画面比率に合わせて見せ方を変える

スライドにグラフを用いる場合は、PCとスマホでどのように変化させるべきでしょうか。
例えば、お得内容を棒グラフ形式で伝えるスライドの場合、PCでは、横型に合わせて横グラフにするのが良いでしょう。

しかし、縦型のスマホ画面にこのグラフを横のままレイアウトすると、グラフ全体が小さくて見づらいですし、左下に無駄な余白ができ、バランスが悪くなってしまいます。グラフを縦にすることで、画面を効果的に使うことができます。

さらに、今回は動画なのでアニメーションをつけたのですが、スマホ型の動画と横型の動画では、視線の動きも異なることがわかりました。

次のサンプルを再生してご覧ください。

【横グラフ】

【縦グラフ】


PC(横画面)の場合は視線が左から右へと動きますが、スマホ(縦画面)の場合は視線が上から下へと移動しようとします。そのため、横グラフのアニメーションのように左右の動きが多いと、視線は下に行きたいのに横の動きを求められるため、ストレスがかかる感覚はないでしょうか。一方、縦グラフの場合ははじめにグレーのバーが下から上に伸び、そのあと上から下へピンクのバーが降りてくるという動きなので、普段から見慣れているスマホの上下スクロールの動きに近く、ストレスなく見ることが可能です。今回は、旅行代金総額100%から支払い額が65%へ下がる(数字が減る)ということを直感的に理解してもらうためにも、縦グラフが有効だったと考えられます。しかし、必ずしも縦画面=縦グラフ、横画面=横グラフにすれば良いわけではなく、扱うグラフによって最適な形を追求していくのが良さそうです。

3|画面サイズの違い

当たり前ですが、PCとスマホでは画面のサイズ自体も異なります。PC、スマホそれぞれの大きさによりますが、一般的なスマホ画面はノートPC画面の約1/6程度です。そのため、普段のプレゼンスライドを作る感覚でスライドをデザインしてしまうと、スマホでは見づらくなってしまう可能性があります。

①フォントサイズは少しでも差をつけると効果的

スマホ画面は小さいため、通常のプレゼンスライドと比較して大きなフォントを使いにくいと思います。縦長の特性もあり、フォントサイズの大きいテキストはすぐに横いっぱいになってしまいます。よって、フォントサイズに差をつけること自体が難しいと考えられます。しかし、画面が小さいからこそ、フォントサイズを少し変えるだけでスライドの情報に優先度をつけることが可能です。
例えば、地域共通クーポンの使用可能期間を解説するスライドの場合。左右どちらの方が情報が入ってきやすいでしょうか。左はスライド上のテキストが全て同じフォントサイズです。アニメーションで順番に出てくるとしても、テキストにメリハリがなく情報がなんとなく流れてしまいそうです。一方、動画に採用した右のスライドは、しっかり伝えたい「当日」「宿泊日の翌日まで」を一番大きく、重要度の低い12月の「12」はスライドの中で一番小さく、日付の方が重要なので日付を「12」より少し大きくしてあります。サイズの差自体は微々たるものですが、全て同じフォントサイズのスライドと比較することでその効果が分かるのではないでしょうか。

②アイコンやイラストを使って余白をキープ

画面が小さいので、ごちゃついた印象にならないようスライド一枚一枚の余白の確保も重要です。今回はスライド全体をすっきり見せるため、着色なしの線画イラストを用いました。
例えば、地域共通クーポンがどこで使えるかを伝えたい場合、普段のプレゼンスライドでは、場所をイメ―ジしやすくするため写真素材などを用いることが多いです。しかしスマホ画面の場合、左のスライドを見て分かる通り、画像を6枚配置すると余白がなくなり全体的に重くベタっとした印象になってしまいます。また、画面が小さいため写真に何が写っているのか瞬時に判断することができませんし、色が多く見づらい印象です。一方動画に採用した右のスライドは、アイコン仕立てのイラスト+テキストの表現ですぐに理解することができます。

③色数は極力少なく、シンプルに。スマホだからこそできる細かい配色に注目

プレゼンスライドの色数については、基本は3色、多くても4色に絞るなどのルールが一般的になってきたように思います。スマホプレゼンの場合は画面が小さいため、色数が増えないよう一層気をつける必要があります。今回のスライドでは、GOTOトラベルのイメージカラーであるブルーを基調とし、差し色としてピンクを用いました。お得内容を伝えるスライドのみ、「旅行代金割引」と「地域共通クーポン」の違いを立たせるため一色追加しています。逆に特段目立たせたいポイントがないスライドは、無理に差し色を使わずシンプルに表現しています。

PCとスマホの差としては、スマホの方が解像度が高く、キレイに見えるという点があります。そのため、PCのプレゼンスライドよりも微妙なニュアンスの配色が可能となりました。今回、メインはブルーとしていますが、よく見ると濃いブルーと薄いブルーを使用していることが分かります。例えば、お得内容のスライドは、「旅行代金総額100%」というテキストと総額部分を示す枠線に薄いブルーを使っています。ここを濃いブルーにしてしまうとピンクやオレンジのお得内容よりも目立ってしまう可能性がありますが、薄いブルーにすることで”きちんと目に入るけど目立ちすぎない表現”が可能になりました。
また、スマホ画面の閲覧はPC画面やスクリーンのプレゼンテーションよりも圧倒的に目に近いため、目に優しい背景色にすることも重要です。真っ白の背景を使うと眩しくなってしまうため、今回は、全体の明るく楽しいイメージにも合うクリーム色を選択しました。

4|ターゲットの違い

今回のターゲットはスマホユーザーということで、若者や情報感度の高い人を想定しました。また、通常のプレゼンテーションはビジネスシーンや講演会など固いシーンが多いですが、今回はスマホで見るプレゼンなので、気軽に楽しく見てもらえるよう工夫しました。

①若者のトレンドを意識したトンマナ

プレゼンテーションを作る上で、内容はもちろんですがスライドのデザインも重要です。本動画では若者が興味を持ちやすいよう、いまどきの線画風イラストやポップで親しみやすい配色を意識しました。また、導入部分は楽しい旅行のイメージがわきやすいように日本の観光名所や美しい景色などの写真を用い、写真上のテキストは文字だけだとあまり目立たず味気ないので、読みやすくかわいらしいデザインにしています。後半の「ケース別に見てみよう!」では、ケースの詳細を説明するのではなく、イラストをメインに、どのくらいお得になるかのみ数字で表現することでワクワク感を醸成しました。

②飽きないつくり

プレゼンスライドを作るにあたり、聞き手が途中で飽きてしまわないようにアニメーションや効果音などを使う場合があります。スマホの場合は、画面が小さいので画面の外に意識がいきやすかったり、画面を見ていたとしても閲覧中に各種SNSなどの通知が来たり、集中し続けてもらうのは通常のプレゼンテーションよりも困難かもしれません。
今回、トータル3分のプレゼン動画を最後まで見てもらえるよう、以下の点を工夫しました。

  • イラストやテキストが短調に見えない様、動きを持たせて楽しい説明画面にする
  • スマホライクな画面切り替え(下から上へ)
  • 前半と後半(「ケース別に見てみよう!」以降)の差別化
    (BGMの変更&画面切り替えの向きを「下から上へ」から「右から左へ」に変更、ケース別部分は枠で囲むなど)

もしよろしければ、もう一度動画を見て確認してみてください。

ターゲットに合わせた仕様で効果的なプレゼンテーションを

スマホ型プレゼンテーション、いかがでしたでしょうか。PC横型とスマホ縦型、スライドの面積が同じでも、画面比率、画面サイズ、ターゲットが異なると、作成のポイントも大きく変わることが分かりました。今まで横型が当たり前だったプレゼンテーションも、スマホ型で作ってみることで届けたい相手に届くかもしれません。
good presen!ではパワーポイントでプレゼンスライドや動画を作成しています。今回のスマホプレゼンもパワーポイントで作りましたが、情報の更新や修正が簡単にできるので非常に便利です。スマホ型プレゼンを作ってみたいという方はぜひお気軽にご相談ください。

Related Article 関連記事

2023.11.24 スライド制作テクニックスライド制作テク…スライド制作… 脳科学に基づいたスライド診断! よくあるNGポイントと改善例を解説
2023.06.23 プレゼンのノウハウプレゼンのノウハウプレゼンのノ… 【サンプル動画付】スマホ閲覧でもわかりやすい!パワーポイントで大学の学生募集動画を作成してみた
2022.10.31 スライド制作テクニックスライド制作テク…スライド制作… すぐに使える!パワーポイントの背景を編集する方法と効果的な背景の色
2022.10.19 スライド制作テクニックスライド制作テク…スライド制作… もう悩まない!パワーポイントに最適なフォントと選び方のコツとは