縦型動画は、横型を切り出すのではなく別物として作った

• 横型を縦に切り出すと、文字が小さすぎて読めない
• 縦は「1画面に1つ」。情報の数を減らす
• 上下に安全余白を取る。アプリのUIが被る

SNS用に縦型を作った。最初は横型から切り出そうとして、作り直すことになった。

切り出しが失敗する理由

横型1920×1080の中央を縦に切ると、1080×1080になる。そこから1080×1920にするには、上下を伸ばすか余白を足すしかない。

結果として画面の半分が余白で、文字は元のまま小さい。スマホで見ると読めない。切り出しは、元の素材が縦向きに作られているときしか成立しない。

縦は「1画面に1つ」

横型では見出しと図を左右に並べられる。縦では並べる余地がない。

• つかみの1文
• 要点を3つ
• どこの発信か

今回はこの3つだけにした。横型に入れていた数字や装飾は全部外した。減らすのではなく、最初から少なく設計するほうが結果的に速い。

最初の1秒で決まる

縦型は指で飛ばされる。つかみの文は開始0.8秒で読める位置に置いた。

ロゴを先に出してから本題に入る構成は、横型では成立するが縦型では致命的だった。名乗っている間に飛ばされる。ロゴは上の帯に小さく置いて、本題と同時に見えるようにした。

上下の安全余白

これを知らずに作ると、投稿してから気づく。アプリの画面には、ユーザー名・説明文・ボタンが重なる。

• 上から120px程度は、戻るボタンなどが来る
• 下から150〜250pxは、説明文やボタンが来る

今回は上を120px、下を190px空けた。大事な文字をこの範囲に置かない。中央寄せにしておけば、多少の違いは吸収できる。

音なしで成立させる

SNSは音を切って見ている人が多い。今回は音を入れず、文字だけで伝わるようにした。

音ありきで作ると、音なしで見た人には何も残らない。音は足すもので、頼るものではないと考えたほうが、どちらの見られ方でも成立する。

同じ中身から両方出す

横型と縦型で中身を別に管理すると、片方だけ古くなる。つかみと要点のデータは共通にして、置き方だけ縦横で変えている。

完全に同じ見た目にはできないが、直すときに1か所で済むのは大きい。文言を直したのに片方が古いまま、という事故が起きない。

文字の大きさの基準

横型と同じ感覚で作ると、縦型では小さすぎる。1080幅に対して、つかみは92px、要点は50pxにした。

• つかみは1行に12文字程度しか入らない
• 要点は1行に20文字程度
• これを超えると折り返して、画面が文字で埋まる

つまり文字数の上限が先に決まる。言いたいことを削るのではなく、入る長さに言い換える。この作業がいちばん時間がかかった。

要点に番号を振る

箇条書きの点ではなく、四角に数字を入れた。

縦型は途中から見る人がいる。番号があると「3つのうち2つ目」と分かるので、全部見ていなくても位置が分かる。点だけだと、あと何個あるのか分からない。

詰まった点

要点を3つ縦に積むつもりが、3つとも同じ位置に重なって出た。並べる用の箱に入れていたのに、1つずつに画面いっぱいの枠が自動で付いていたのが原因だった。

プレビューでは一瞬それらしく見えるので、静止画を1枚書き出して初めて気づいた。重なりは、動いているうちは意外と分からない。

どの比率で書き出すか

縦型は1080×1920で作った。主要なSNSはこの比率を受け付ける。

ただし表示される範囲は場所によって違う。一覧では正方形に切られることがあり、中央の1080×1080に大事なものが入っていないと、一覧で何の動画か分からない。つかみの文を中央寄りに置いたのはこのためだ。

まとめ

縦型は横型の派生ではない。入れる情報の数から決め直す。そのうえで上下の余白を空け、音なしで成立させる。この3つを最初に決めてしまえば、作る時間自体は横型と変わらなかった。