【マッチョCM】イベントサムネイルのデザインを解説してみた

6月11日に『マッチョCMメイキング 視聴&トークイベント』というイベントをclusterで行うので、そのイベントサムネイルを作りました。

イベントサムネイルは、デザインの仕事とか勉強をしたことが無い人だと正直難しい！てつじんは中学生の頃、美術で1を取ったくらいに苦手です。

初めて作ったclusterのイベントページはこれ。もう素人丸出しです。

そんなてつじんも、1年間でデザインの知識を身につけてとりあえずそれっぽいものを作れるようになりました。それがこれ。

この記事では、今回のイベントページがどんな風にデザインされたかを紹介していきます。

『動画視聴』でテンプレ決め

今回のイベントは「動画を視聴」するということで、それが視覚的にわかるよう目指しました。

そんな訳で初めは「動画を見る=スクリーンもしくはスマホ」というアイデアで写真を埋め込んで作っていたのですが…

どうにもダサい。横長のスクリーンがスペースを取ってしまって、デザインもまとまらない。2日間くらい悩みながら作っていたんですが、どうにもならんと思ってこのアイデアを破棄。

というわけで、色んなデザインのテンプレートがあるCanvaというサイトで色々と探していると…

良さげなテンプレを見つけました。写真のフィルムフレームが入っているので、今回の『動画視聴』というアイデアにも親和性があります。というわけで、これに決定。

ここから写真を埋め込んだり、デザインをいじりました。

色は写真から抜き出し

背景の色は、写真にある桜のピンク色をそのまま使いました。ピンク以外も色々試しましたが、一番しっくりきた&文字の見やすさで決定しました。

ちなみにCanvaには、貼り付けた写真の色がこのようにパレットに表示されるので、結構便利です。

色&フォントのコントラストで情報を分ける

今回は、一つひとつの情報が視覚的に分かれるようにしました。このイベントページには４つの情報が以下のようにあります。

明確に情報を分ける方法として、黒い枠で背景を塗りつぶし、白色の文字を使うという方法を取っています。

それを交互に使用し、視覚的にコントラストを作ることで4つの情報を切り分けました。もしこの切り分けを使わないと…

こんな感じになります。なんか締まらないし、4つの情報同士がくっついている感じがして、見にくいです。

複数の情報が位置的に近い場合、「コントラストを使うと情報を切り分けるのに効果的」とデザインの本に書いてあったので、それに倣いました。

また、4つのフォントを変えることでも「これらの情報は、互いに別のものですよ」ということを強調させてます。

～使ったフォント～
1. けいふぉんと
2. コーポレート・ロゴ丸
3. にくまる
4. Noto Sans Regular

全部右揃えで整列させる

「素人は文章を中央揃えにしがちだが、意図が無い限り左揃えか右揃えにした方が良い。」というアドバイスがデザインの本にあったので、今回はその通りにしました。なので、出演陣の名前以外は全部右揃えです。

ちなみに複数の文を整列させると綺麗に見えるので、Canvaにある『定規』と『ガイド』という機能を使い揃えてあります。下のスクショを見ると、左側と上側に、定規が表示されてますね。

そして画像の右側を見てください。青い線が何本か表示されていますね。これがガイド線で、これを使うと揃えやすくなります。（見えない方は、拡大してみてください）

このガイド線を使って、出演陣の名前以外の文はすべて同じ位置に揃えてあります。一番下のロゴもガイド線を使って合わせました。

ちなみに出演陣の名前も同じ高さになるように、ガイド線を使って揃えてあります。

情報を右側に整理し、目の動線をシンプルに

実は最終的にあのレイアウトに至るまで、ボツになったのが一つあります。それがこれ。

イベントタイトルが真ん中にあるし、文字も大き目になるからいいかなーと初めは思いました。でも、実際にこの画像を見たら、目の動線がこんな感じでゴチャゴチャ動いてしまうことに気づいたんですよね。

正直、こんな風に目がさまようのは良くない。必要な情報が読み取りにくいので、改善する必要があると思いました。

なんでこんなことになるんだろうと考えたら、問題が2つあることに気づきました。

(1) 左の写真二つにも文字があるから、目がそっちに引っ張られる
(2) 真ん中にあるイベントの題名が全体を横断しているので、(1)を助長している

全ての問題は全体を横断するイベントの題名が原因だとわかったので、これを右に寄せました。

すると目の動線が混乱することなく、上から下にスルっと動くようになってくれました。

イベントの題名が若干小さくはなりましたが、これでも十分見えるので良しとしています。

もちろん、文字の無い写真を左側に使うという選択肢もありました。ただ、それだとイベントページのインパクトがなくなるので、今回はこのレイアウトで決定しました。

文字の大きさを変えてインパクトを作る

右上の煽り文句的な部分は、初めはこんな感じでデザインしてました。でも、なんかパンチが足りないなと思ったんですよね。

この煽り文句で強調したかったのは、「マッチョCM撮影の裏」というところなんです。だって、その文字面だけでインパクトあるじゃないですか。

でも、なんかちょっとダラダラと文が続いている感じがあって、「マッチョCM撮影の裏」というキーワードが文章に埋もれてるように思いました。

なので、いっそその部分だけでかくしてしまえばいいと考え、残りは小さくしました。

文字を思い切り大きくすることで「マッチョCM撮影の裏」のインパクトが出て、真っ先に目が行くようになりました。

しかも、残りの部分を思い切り小さくしたおかげで、左側に余白もできてすっきりしたデザインになりました。

余白ができたおかげで、ビデオカメラの絵をうっすらと入れることもできました。これによって、左の二つの写真が「ビデオカメラで撮影されたもの」だと直感的にわかるよう仕向けてあります。

まとめ

こんな感じの要素を考えつつ、出来上がったのがこちらです。再度載せておきます。

そして、これができるまでの要素をもう一度まとめるとこんな感じ。

1. テーマ『動画視聴』でテンプレ決め
2. 色は写真から抜き出して利用
3. 色&フォントのコントラストで情報分け
4. 複数の文章を右揃え&同じ位置に整列
5. 情報の位置を整理し、目の動線をシンプルに
6. 文字の大きさの大小でインパクト作り

もし何か勉強になったことがあれば、次のイベントサムネイルを作るときにでも試してみてください。

興味あれば、6月11日(金)のイベントも遊びに来てね！てつじんでした。