情報を削る重要性
こんにちは、フリーランスデザイナーのちふねこです。 今日は、サムネが目立たないときに試したい3つの引き算というテーマでお話ししていきます。
この内容はですね、デザインをやっている時に特に学びたてとか初心者の頃に うっかりハマりがちな落とし穴として、この目立たせようと思うと
思っていろいろ手を加えて工夫をするんですけど、それが裏目に出ちゃうみたいなことが起こるんですよね。
目立たせたくって文字をたくさん加工しするとか、なるべく目立つ色をたくさん使うとか、そういうことをすると逆に目立たなくなっちゃう
みたいな現象があるんですよね。なので今日はそういう いろんな工夫してるのにどうしてもサムネなんか目立たないなっていう時に
ぜひ試していただきたい3つの引き算、何か手を加えるんじゃなくて削っていく方向で 目立たせるための工夫っていうのを3つご紹介していきます。
はじめに3つ言ってしまうと、1つ目情報を削る、2つ目色を削る、3つ目効果を削る、この3つです。
順番にお話ししていきます。まず1つ目の情報を削る、これは サムネに入れている文字を削るみたいなイメージですね。
これをやる理由は それぞれの
大きさの差を つけやすくなるからなんですけど、どういうことかというと情報がたくさんある状態
あれもこれも伝えたい、全部伝えた方がきっとわかりやすいと思って なるべく多くの情報を詰め込みがちになったりするんですけど
そうやってその載せたい情報が増えると それぞれの要素の大きさの差がつけづらくなるんですよね
自分の中では優先順位つけてこれを一番目立たせたいから大きめにしているけれども
やっぱりその限られたスペースの中にたくさん情報を詰め込もうとすると その大きさの差って
どんどんつけづらく、小さくなっちゃうんですよね。差がなくなっちゃう。 多少の大小差はあっても、それってもうほぼないに等しいというか
似たような大きさになっていると そのもうパッと見で
どれが大事とかどれは補足とかがパッと見でわかりにくくなっちゃうので それがサムネが目立たない原因
全体的にぼやっとした、パッと見で情報が伝わりにくいっていうものになったりするんですよね
なのでそういった意味で情報を詰め込みすぎてるなって そのメリハリがなくなってるなって感じるのであれば
思い切って情報を削ってしまって その分一番目立たせたい要素を大きくするとか
文字だけじゃなくてイラストとかでもいいと思うんですけど その何か一つしっかり目立たせるみたいなそういうポイントを作ることで
サムネが他のものと並んだ時にもその目につくポイント よくアイキャッチって
サムネ自体をアイキャッチって言ったりともすると思うんですけど そのサムネの中にもアイキャッチを作るみたいなイメージですね
目立つポイント目に留まるポイントとしてすごく目立つ大きさのものを一つ入れる っていうことができると目立つ
ようになると思うのでその情報を削る その分大きくするみたいなことができるといいかなと思います
色を削るテクニック
続いて2つ目の引き算は色を削る これもさっきと一緒なんですけど
思い切って例えば モノトーン白黒プラス一色だけアクセントカラーで部分的に色をつけるっていうやり方
これ結構その色が引き立つんですよね 他に周りに色がない状態白とか黒っていう無彩色の中に一点だけ赤
よくこう言ってみたいな日本語もありますけど そのぽつんって色がついているだけでそこってすごい際立って目に止まりやすくなるんですよね
なのでその色をたくさんもし使ってるサムネイルとかだったら なるべく色は絞ってしまう
一層一色とかにしちゃった方が目に止まりやすくなるっていうことがあります なのでそのこれも
目立たせるための引き算のアイデアとして色を思い切り削ってしまう でそのさっきのアイキャッチと同じような考え方ですけど
一点だけ目に止まるポイントとして色つけるみたいな そういう使い方もありかなと思います
続いて3つ目の引き算は効果を削る でこの効果って何かというと
文字につけるドロップシャドウ 影だとかあとは色をつける時のグラデーションとか
そういったものを削ってみるっていうのが3つ目ですね これは本当にその目立たせたいがためにこういう影つけたり
縁つけたり ってすることが多いと思うんですけどそれが逆に見づらくなる要因になってるっていうことがあるんですよね
その原因としてはその縁とかシャドウをつけることによって逆にその文字と背景の境界線がわかりづらくなってる
っていう使い方をしちゃってるパターンがあるんですよ どういうことかというとよく私は明度差をつけた方が見やすくなるみたいなお話をするんですけど
この明度差 要はその背景と文字のコントラストをしっかりつけないと文字って見づらいんですよね
でそれ それを見やすくするためのシャドウとかならいいんですけど
その例えば背景が白で文字は赤 赤、この状態ってすごく見やすいんですけど
この赤い文字をさらに目立たせようと思って黒いドロップシャドウ 影を落とすっていうことをすると赤の境界線がぼやけちゃうんですよね
これは何でかというとその赤と黒 赤い文字と黒い影の明度が近いからなんですよ
明度っていうのは色の明るさのことで 白に近い黄色とかは明度が高い色なんですけど
黒に近い濃い色 青とか赤とか緑とかそういう色は明度が暗い色なんですけど
そういった濃い色 暗い色に暗い影を落とすと境界線
なんだろその馴染んじゃう 文字と影が馴染んでしまうので文字が見づらくなっちゃうんですよね
だから 例えば逆で赤い背景に白い文字を使ってるとして
そういう時に白い文字に対して黒い影を落とすとかだといいんですよ
このパターンだと白い文字と赤い背景の境界線を強調する役割としてちゃんと黒い影が働いてくれるんですよ
っていうのもその白い文字と黒い影っていうのにしっかり明度差があるので
その境界線もパキッとするし赤より黒ってより暗い色 明度が低いのでよりその赤と白だけの差よりも
黒が間に入ることでより境界線を強調してくれるっていう意味で こういう使い方だと
目立つんですよね 影を落とすことで文字が目立つっていうことができるんですけど
そういう明度差を意識せずに闇雲にとりあえず文字目立たせたいから影落としとくか みたいな感じで加工とか効果をつけてると
実は見え見づらくなっちゃってるよみたいなパターンがあるのでそういうむやみに
そういう加工をするくらいなら一層削っちゃった方が見やすかったり そういう効果に頼るんじゃなくて明度差で色を見やすい色を検討するみたいな
そういう方向で工夫した方が良かったりするっていうのがこの3点目ですね という感じで今日は
サムネが目立たない時に試したい3つの引き算として情報を削る 色を削る効果を削るっていうこの3つをご紹介しました
菊崎フリーランス講座の毎週火曜日はこんな感じでサクッと学べるデザインのお話をお届けしています デザインをやってる方もそうじゃない方もスキルアップのヒントとして参考になれば幸いです
今日も最後まで聞いてくださりありがとうございます
