こちらは、Mavs Advent Calendar 2024 18日目の記事です🐺！

🌲🌲🌲

はじめに

こんにちは、遠藤です。

弊社のブログサムネイルは、基本的にブログ記事を書いた人が自主制作をしています。

サムネイルを作った後、必ず社内のデザイナーさんにレビューをいただくのですが、そのレビューが面白いなと思ったので、レビュー込みでどのようにサムネイルができていくかを共有します！！

何かをデザインする時の一つの指標になれば幸いです。

それでは参ります。

一枚目 STUDIOの記事

まずはSTUDIOの記事を書いた際のサムネイルです。レビュー前と完成品を見比べてみましょう！

火を見るよりも明らかですね。

私はこのサムネを作るまで、テンプレを持っていたので、テンプレに沿ってサムネを作成していました。ですが、今回はテンプレとの相性があまり良くないみたいです。

さっそくいただいたレビューを振り返ります。

レビュー

• 背景とロゴのミスマッチ
• ロゴが細いので背景に負けている
• STUDIOの編集画面のようにしてはどうか

なるほど。

たしかに公式のHPも白ベースに黒のロゴだし、ロゴが細いので白背景に黒で「STUDIO」と見えた方が本家のイメージを捉えていそうです。

そう、本家のイメージ、大事。

また、上記の参考画像は四方全てに枠があります。これも取り入れましょう。

というわけで以下のような試作を作りました。

うん、だいぶそれっぽいし見やすいです！！「STUDIO」の文字が目に飛び込んできます。

ですがやや殺風景ですし、左下のスペースも気になります。

そこで、ノート風の背景に付箋をつけてみました。ちなみにどちらもフリー素材です。

少しだけリッチになった気がします！ちなみに枠線のグラデーション感を全体に馴染むよう調整しています。最初のはよくよく見ると四隅の色がくっきり分かれちゃっているので、自然なグラデーションにしています。

また、上下の文字を太字に変更することで、STUDIOのロゴと親和性が生まれて、全体にまとまりが出てきます。

ポイントをまとめます！

• 本家のイメージを大切にする
• 白と黒ではまるっきりイメージが違うので迷ったら両方作る
• グラデーションは丁寧に
• 文字の太さを合わせる

どんどん行きますよ〜！

二枚目 Google認定資格の記事

こちらはGoogle認定資格の記事を書いた際のサムネイルです。レビュー前と完成品を見比べてみます！

こちらはアイデア的に自信作でした！ですがしっかり詰めるポイントがあります。レビューを見てみましょう。

レビュー

• 余白が広すぎるため、まとまりがないように感じる
• モチーフがあるなら徹底的にコピーする

たしかに…本物のGoogleさんはまとまりを感じます。ちなみに文字は黒ではなく、少しグレーっぽい色を使っています。ここも本家に忠実に、です。

ポイントをまとめます！

• 本家のイメージを大切にする（二回目）
• 文字色や余白まで完全にコピーする
• 文字の太さを合わせる

細かな余白でここまで変わるのか！とデザインの奥深さを感じました。

三枚目 STUDIOの記事②

こちらはSTUDIO二つ目の記事です。新旧を比べます！

全然違う！！こちらはたくさんレビューもらったのでさっそく紹介します！

レビュー

• 言いたいことが薄まってる
• アニメーションが動くイメージが持てない
• 連想させるイラストを置きたい
• ロゴは重複させない
• 吹き出しでアクセントをつける
• 文字は一旦シンプルにしてから強調したい部分を付け足していく

ふむ、ここまで言われると心が折れそうになりますが、グッと我慢です。
長男なので（一人っ子）。

それはさておき、なるほど、たしかに試作はぱっと見ても何の記事かよくわからないし、字もぼやけている気がします。

字がぼやけて感じるのは、レビューにもある通りロゴを重複させているから。異なるデザインを並べてしまうと全体に統一感がなくなってしまうんですね。だからなるべくロゴは重複させないと。

また、アニメーション感が伝わらないのは、文字だけだからという気がします。イラストを置きたいというレビューは一目でアニメーション感を伝える工夫なんですね。

そんなわけで途中段階がこちら。

うん、なんだか動きそう！文字もさっきより目に入りやすいです！

ロゴもアイコンだけにしたのでスッキリ感が違いますね。

ですが、この記事で一番伝えたいことがまだぼやけています。なので、レビューの通り、「文字は一旦シンプルにしてから強調したい部分を付け足していく」を実践します！

お〜！Lottieが主軸というのが一発で伝わります！全体的にまとまっているし見やすい！

具体的にはフォントを変更し、色を黒から背景に馴染む色に変更しています（めっちゃ濃い緑）。さらに、目立たせたいLottieは背景色の濃い部分から注色してアクセントにしています。

また、字間を狭くすることで文字がまとまります。間接詞（「で」と「に」）のフォントサイズを小さくすることで文字にリズムが生まれてみやすくなりました！

ですが右上に余白があり淡白に見えてしまいます。

ここで締めの吹き出しです。せっかくイラストを置いたのならばそれを活かすのが定石、とのこと。

そんなわけでこのサムネイルが生まれました！劇的ビフォーアフター！！

ポイントをまとめます！！

• なにを伝えたい記事か考える
• ロゴは重複させない
• アニメーションを連想させるならイラストを置く
• 文字はできるだけシンプルにしてから調整
• 文字は字間や色、サイズで与える印象が変わる
• 間接詞だけ小さな文字にするのは全然あり
• 困ったら吹き出し

たくさん！！でも、この辺を意識すればアニメーション系の記事を書くときなんかはサムネイルが作りやすいかもです！！

四枚目　メニューバーの記事

こちらはメニューバーの記事ですね。今回はその場の思いつきで例のオウムを使ってみました。

では新旧です。

おお、オウム増えとる。

というのもありますが、どこが変わったかわかりますか？さっそくレビューをみましょう。

レビュー

• 吹き出しの形がチープ
• 字体とオウムのミスマッチ

なるほど。確かに吹き出しがありのままの姿すぎました。

なので影をつけます。

おや・・・？となったあなた、デザインセンス抜群かもです。

オウムが増えたところではありません。完成版と違うところ、それは・・・

吹き出しのふち！！！

なるほどなるほど、ただ影をつけるよりも、吹き出しにふちがあった方がより吹き出しを強調できます。吹き出しはよく使うので覚えておきたいテクニックですね。

そして、字体です。オウムは丸っこいのにカクカクのフォントを使っているので、デザインがバラバラになっています。なので、丸めのフォントに変更します。

ちなみに、Figmaでフォントを選ぶときは検索欄に「rounded」と入力すると、丸めのフォントが出てきますよ。

うん、たしかにオウムが喋ってる感がある！

ちなみに、文字にハイライトの線や影をつけようとしたところ、「それはいらないかも」とストップがかかりました。

理由としては、「オウムのチープさをいい感じに残したい」から。

リッチすぎず、チープすぎずを狙ったサムネイルとなりました。ちなみにオウム増やしたのは私のアドリブです。

ポイントです！

• 吹き出しには影やふちで一工夫
• フォントはイラストに合わせる
• チープすぎず、リッチすぎず、イラストの世界観を保つ
• オウムは増やす

ちなみに一番上のメニューバーはスクショでMacから引っ張ってきました。ここは少しだけ褒められたのが嬉しかった記憶です。

さいごに

今回はブログサムネイルの制作過程をデザイナーのレビューと一緒に共有する試みでした！

私自身この記事を書いていて、「あ、そうだった」となることが非常に多いです。私はデザイン系について、出来上がった瞬間会心の出来と誤解してしまうので、一旦時間をおいて再度フラットな視点で完成物を見るよう最近は心がけています。

本当にデザインは奥が深い。

ブログと一緒にサムネイルを作っている皆さん、都度レビューをしてくれるデザイナーさん、いつもありがとうございます。そしてお疲れ様です！！

というわけで、私のアドベントはこれにておしまい。でもマブスのアドベント記事はまだ続くので引き続きお楽しみください。

サムネイル紹介はまたやります、ネタ溜まっているので！乞うご期待！

以上、遠藤でした。

それでは〜！