動画内画像のビフォアーアフターを例にデザインの基礎的な話をします

デザインの基礎を知りたいというリクエストをいただいたので動画内で利用する画像(予定表)を使って説明したいと思います。
初心者さんでも再現性が高くなるよう、段階を追って説明します。

↓こちらが一番最初の状態です。

今回はこのデザインをできるだけ踏襲しつつ、徐々に手を加えていきます。
その過程の考え方を解説しますので参考にしていただけたらと思います!

※画像提供者については最後にご紹介します。

■STEP 1 まずは基礎で奥義の「位置の整理」

まずは地味ですが基本かつ最も重要な部分からです。

●余白の整理
●サイズの整理

これらを整理すると可読性があがります。
+αで読みにくい要素も少しけずりましょう。

↓↓↓修正版がこちら

1.重要な「配信＆動画予定」を大きく
2.ゲームタイトルを大きくして文字の周囲に余白
3.余白は各文字、同程度
4.可読性をさげてる文字の縁は削除
5.予定表と画面の縁の余白の幅を統一

色も書体もベースは踏襲しているのでぱっと見の変化は少ないですが読みやすくなりましたよね。初心者さんでも再現性が高いと思います。

■STEP 2 形になってきたら一度「情報を整理」

STEP1である程度自分の中でイメージが固まりましたら一度、視聴者さんの視点に立ち戻り、この画像を使うシーンを改めて考えます。
おそらく「動画内部で数秒間、表示。モニターはスマホ」でしょう。それならばこうしたほうが親切ですよね。

●数秒で読めないものは削除
●小さい文字は削除
●ロゴを利用してわかりやすく

1.小さい文字は読めないのでカット
2.数秒間で読めない情報もカット
3.文字よりもロゴの方が認識が早いので差し替え
4.「動画」は削除して「配信」に特別感を出す

STEP1との違いは文字を読まなくても良い範囲が増え全体的にシンプルになりました。難しいことはしていないのでこちらも初心者さんが再現性が高いと思います。

■STEP 3 そもそもコレでいいんだっけ？「見直しと調節」

今作っている画像の中で重要な要素、そうでない要素を改めて考えます。
画像の中で最もインパクトが大きいのは左のキャラ「投稿者さんのアイコン」ですが、動画内部でこの画像の重要な仕事は予定を伝える事です。

●重要度の低い要素を小さくする
●重要度の高い要素を大きくする

1.表を大きく
2.キャラアイコンは小さく

重要な要素を見極めるのは意外と難しいですが
デザインソフトの技術が求められる内容ではないので
意識すれば初心者さんも十分、再現性が高いと思います。
コツはある程度出来た!と思ったら「そもそもコレでいいんだっけ？」と考える事です。

■STEP 4 キャラを使えば分かりやすい？「画像化」

「スプラトゥーン」と聞いて思い出すのは「ロゴ<<<<インクリングさん」じゃないでしょうか？ロゴとメインキャラをセットで使うと印象が強く賑やかになるのでとても良いです。

●ロゴとメインキャラで印象を強くする

1.ゲームのメインキャラの(笑顔)を追加
2.各曜日を帯から丸に変更してスペース確保

一気に賑やかになり、見た事があるキャラが追加されたので興味深くなりましたね。
画像点数が増えますが、よくよく見るとSTEP1での「位置の整理」をしつつ画像を並べただけなのでデザインソフトの技術はそれほど求められません。

■オマケ:↑↑ここまで出来れば十分ですが「お化粧」

見栄えをよくする処理です。

1.フリーのテクスチャ追加
2.グラデーション追加
3.「配信＆動画予定」の文頭に吹き出しを配置してアクセント
4.角度をつけてアクセント追加
5.「配信」がわかりやすいよう曜日の位置を変えて右ぞろえ

グラデーションやテクスチャを加えると一気に見栄えするのでとりあえず使うのはNGです。使うなら本当に最後の仕上げの時に。

■オマケ2: 最後は私の好きに遊びます。

吹き出しをよく使う実況者さんなのでコミック調に仕上げました。
世の中にはこういう完成形しか出回っていないので、これを真似したくなりますが重要なのは「STEP1〜4」の考え方「見やすくするにはどうするか？」という部分が重要だと説明するために制作しました。
なのでこれは真似しなくてよいです。

もう一回いいます。

重要なのは「STEP1〜4」の考え方「見やすくするにはどうするか？」という部分です。

1.文字は読みやすいサイズにして
2.余白を均等にとって
3.情報の優先度に合わせてサイズを変え
4.文字はできるだけ画像に置き換えて
5.動画視聴者さんの視聴状況を考える

いかがだったでしょうか？
今回は動画内部で使用する画像を元にデザイン的な基礎のお話をしました。
初心者さんでも出来そうで1つ2つでもやれば確実に見やすくなると思います!

画像提供者 破魔与夢さん

とみざわの３倍の登録者の格上の友人です。
ホラーゲームでパニックを起こし「バカ!!」と叫び続ける様は様式美です。
チャンネルはこちら