デザインの4原則で添削｜サムネイルを組み立てなおす

3月に、佐久の巨匠からデザインの4原則を教わりました。
「ノンデザイナーズ・デザインブック」でも紹介されている、有名なアレです。
ウェビナー受講後、近藤は過去に自分がつくった無秩序なサムネイルを、4つの原則にもとづいて組み立てなおしてみました。今回はそのセルフ添削の一部始終を、大量の同じような画像とともにお届けします。

▼今回、セルフ添削するのはこちらのサムネイルです

つっこみどころが満載ですな

- まず、ごちゃごちゃした装飾をよける
- フォントもごちゃついていたので2種類にしぼる
（違いがほとんどない角ゴシックのフォントを、数種類使っていました…）

-　定規で縦と横の中心に線を引いてみる

定規で線を引いたものの、
まず「なにを、どんな目的のために測るのか？」という疑問がでてきます…
中心、フチの余白…それから…？

-　色をいったんグレースケールに
-　文字を左揃えにする
（そろえる線の左側の余白はどのくらいがよいのか…）

無目的に、やたら定規の線を引いています。

-　「なにこれ」の文字サイズを小さくして「勉強会」と幅をそろえる
-　煙のモチーフが飛び出している…！

-　Canvaの素材から選んだ別のイラストを入れてみる
（そもそも、なぜ煙のモチーフなど使ったのか）

-　両端の余白がおなじ幅になるようにイラストを配置

-　背景と文字の配色に迷走。結局、お姉さんの服だけこの色に
-　イラスト下の線が中途半端か…？

-　イラストに線をつけ足して、文字の左端までのばしてみる。なんか変。

-　右端まで線をのばしてみる。
-　文字がゴテゴテしすぎ…？

-　目立たせる要素を入れ替える（そもそも訴求ポイントはこっちか…）
-　ゴテゴテ感は文字の並べ方のせいかも…？

-　文字を横に広げてみる。
読みやすくなったような気がする。

-　文字を下に下げて、上の余白を大きくとってみる。

-　定規の線を消すとこうなりました

正解がわからなくなってきたので、
ここでいったん終了です。

デザインがすっきりした分、
「焼き芋理論」、「なにこれ勉強会」と
言葉のふざけた感じがストレートに目に入る印象です。
（いいのか、悪いのか…）

デザイン畑の独特の考え方

デザインの本を見たり、オンライン講座を視聴したりするなかで、
知っている言葉なのに理解できない場面がよくありました。
その文脈でその言葉が使われているっていうのは、どうも私の知っている意味とは違うようだぞ…？というような場面です。

たとえば巨匠も使っていた「背景をよごす」。
実際にきたなくするわけではなさそうです。
色をぬったり、写真をいれたりしてごまかす、というような意味でしょうか…。

このような言葉の使い方には、前提としてなにやら背景の美学みたいなものがありそうです。

4原則を知ることは、デザイン畑のものの見方を知るヒントになりました。巨匠たちの言葉の意味を探りつつ、今日も整列の線を探しています。

▼今回のサムネイル試行錯誤
今回もサムネイルの作成でずいぶんと悩みました。
その試行錯誤の様子を、失敗作たちとともにお届けします。(また大量の画像がでてきますよ)

なんで70年代風？
さわらびゴシックのタイトルと、図形で作成した「4」w。

だから古いんですよ。昔の教科書か。

4原則を4つの丸で表す、というアイデアにしばられ、
しばらく迷走。。。

教科書感を脱するために、さわらびゴシック→Kosugi 丸ゴシック
え、ちょっと待って余計古いんですけｄ－

とにかくタイトルが固いので、手書き風文字でゆるさをだす。
図形もカチッとしてしまうので、なし。
サブタイ「～組み立てなおす」から連想し、
手書き風のブロックのイラストをいれる。

白黒だとかっこよすぎるので、黄色の背景に。
身近な感じになりました…？
なんかいろいろ中途半端です…。

ストレートにタイトルを真ん中に。
下にブロックをたくさん並べました。
ちょっと待てよ、このフォントはなんかサラッとしていて、記事の感じとちがうな…

うずらフォント→GN－こはるいろサンレイ
細い線→点線
半端な黄色の背景やめる

この記事、というかブログは、
うへへへ面白いなゴリゴリ、と
机に落書きを削りつけるような内容だよなと思い、
それをサムネイルで表現するため、クセと主張が強めのフォントで着地。


記事を書きながら、次こそはまずイメージを固めてからサムネイルをつくりはじめようと心に誓いました。

「なにこれ勉強会」サムネイル編をまたやろうと話しています。
参加者それぞれが調べてきた内容をシェアする、「一品もち寄り」のような勉強会。
誰でも参加できますので、お気軽にどうぞ。