縦型ショートの図解は文字サイズと余白で決まる。スマホで読める図の作り方
縦画面の図解は、デザインより文字サイズと余白が重要です。読める最小サイズの考え方、UIと重ならないレイアウト、色の使い方をチェックリストで紹介します。
縦型ショートの図解は、文字の大きさ、余白、情報量の3つを整えるだけで読みやすさが大きく変わります。スマホで見ると、パソコンで作った図は思った以上に小さく見えるのが原因です。この記事では、図解を作る段階で確認すべき基準を、実際の作業順に紹介します。
まず確認する3つの基準
最初に、完成した図を自分のスマホで再生し、腕を伸ばした程度の距離で読めるかを試してください。電車内や布団の中など、集中していない状態で見られる前提でテストすることがポイントです。
文字の最小サイズについて、決まった数値の正解はありません。ただ、本文の字幕よりも小さい文字が図の中に混ざっているなら、ほぼ読まれないと考えてください。図の中の語句は、見出しレベルの短さにするのが目安です。
- 文章ではなく単語や短い句で書く
- 1枚の図の中の語句は多くても6〜8個程度に抑える
- 図の最小の文字でも、字幕と同程度の大きさを保つ
- 背景と文字の色に十分な差を付ける
UIと重ならない余白の設計
各アプリには、いいねボタンや投稿者名、説明文、字幕のためのスペースなどが画面に重なって表示されます。位置はアプリや端末、更新によって変わるため、固定の数値を覚えるより、画面の端に重要な要素を置かない習慣が有効です。
具体的には、上下と左右に余白を取り、右端の縦並びのボタン付近と下側の説明文付近は図の重要部分を置かないようにします。投稿前に、各アプリのプレビューで被りを確認してください。複数のプラットフォームに出すなら、一番ボタンの多いアプリに合わせると全体が安全です。
セーフゾーンの考え方は各アプリのヘルプで案内されることがあります。最新の情報は公式を確認してください。
情報量を減らす具体的な方法
図が読みにくい理由の多くは、情報を詰め込みすぎていることです。減らすときは、図の目的をもう一度確認します。たとえば「3つのプランの違い」を見せたいなら、比較項目を価格・期間・向く人の3つに限定し、細かい条件は説明欄に回します。
文章を単語に直す練習も効果的です。「成果が出るまでに時間がかかるのでこまめに記録することが大切」は、「記録→振り返り」の矢印で表せます。こうして残った言葉だけを大きく見せれば、図は一気にすっきりします。
色と強調の使い方
色は2〜3色に絞り、背景、基本色、強調色の役割を決めます。強調色は1枚の図で1か所か2か所にとどめると、「ここが大事」という意図が伝わります。赤と緑のように色の違いだけで区別する表現は、見分けにくい人もいるため、形や記号も併用するのが親切です。
アニメーションで要素を順に出す場合も、強調の色は固定します。出るたびに色が変わると、視聴者は意味を探してしまい、話から注意がそれます。
投稿前チェックリスト
最後に次の項目をスマホで確認してください。
- 電車内を想像した距離で、図の語句が読める
- 上下左右の端に大事な要素を置いていない
- 1枚あたり5〜10秒ほど表示される
- 使っている色は3色以内で、強調は1〜2か所
- 図がなくても話の流れが分かる(図は補助)
作成から投稿までの流れの例
実際の手順で見ると、まず台本から図にする箇所を決め、次に枠のサイズを縦長(一般的な縦型動画の比率)に設定したキャンバスを用意します。そこに、語句を単語レベルで置き、矢印や線で関係を示します。
完成した図は、動画編集アプリに取り込み、話のタイミングに合わせて表示時間を決めます。最後に、スマホで通しで再生し、図の語句が読めるか、UIで隠れる箇所がないか、色が見分けにくくないかを確認します。ここで問題が出たら、図に戻って語句を減らします。修正の方向は、基本的に「足す」ではなく「減らす」です。
この流れをテンプレート化しておくと、毎回ゼロから考える必要がなくなります。キャンバスサイズ、フォント、色の3つを固定したひな形を一度作っておけば、次回以降は中身の語句を入れ替えるだけで済み、シリーズの統一感も出ます。
フォントと見た目の統一
フォントは読みやすい太さのものを選び、使うのは1〜2種類にします。装飾の強い書体は、小さな画面で形が崩れて読みにくくなりがちです。また、商用利用できるフォントかどうか、ライセンスを確認してから使いましょう。シリーズ動画で同じフォントと色を使い続けると、スワイプ中でも「あの発信者の動画だ」と気づいてもらいやすくなります。
よくある質問:横長の資料をそのまま使いたい
Q. 既存のスライド資料を流用できませんか。流用は可能ですが、縦長に作り直すのが理想です。やむを得ず横長を使うなら、全体を映さず、一部を拡大して順に見せる方法があります。ただし、拡大しても文字が小さい場合は、語句を打ち直したほうが読みやすくなります。
Q. 動画の背景は白と黒、どちらが良いですか。どちらが優れているとは言えません。昼間の屋外で見る人には明るい背景、夜に見る人には暗い背景が見やすい場合もあります。重要なのは、文字との差がはっきりしていることです。複数の動画で試して、反応を比べてみてください。
実際の修正例(架空)
架空の例で、修正前後を比べます。修正前は、3つのプランを比較する表に、プラン名、価格、期間、対象、解約条件、特典の6項目が並び、1項目に十数文字ずつ入っていました。スマホでは文字が小さく、読み切れません。
修正後は、比較項目を価格、期間、向く人の3つに絞り、各項目を5〜8文字の短い語句にしました。解約条件や特典は説明欄へ移しました。結果として、1枚あたりの表示時間は5秒ほどで済み、見る側が読み取れる情報量に収まります。このように、足りない情報は説明欄や別の動画に回すという発想が、図解を見やすくします。
この記事に関連する機能
字幕生成で読みやすい文字を作る