【デザイン制作手順大公開SP】noteのサムネイルってどうやってつくられてるの？その疑問を我々がお答えします！
こんにちは。
IS factory note編集部の山口です。
現在広報チームではnoteをはじめ、インサイドセールスのお役立ち情報としてオウンドメディア（IS factory magazine）の運営をしております。
記事執筆と並行してサムネイルデザインも作っており、これまで数え切れないほどのデザインをつくってきました。そこで今回、広報チームでどんなデザイン制作手順を踏んでいるのか、皆さんにもご紹介できたらと思っています。
最近はメディアの運営を任される広報さんたちも増えており、デザイン未経験でサムネイルやバナーデザインを担当される方も増えてきました。私もその内のひとりで、デザインに関しては全くの未経験で入社しています。
そんな私でも、書籍を読んだりYouTubeを見て勉強したり、メンバーにフィードバックしてもらいデザインに触れていくうちにイメージを言語化できるようになりました。過去の自分と比較しても、圧倒的にデザインスキルが磨かれたと思っています。
未経験者でも、デザインの意図を知れば良いデザインを創り出せるようになるので、ぜひこの記事を読んで「デザインの捉え方」や「作り方」を参考にしていただけると嬉しいです。
サムネイルデザインの作り方
前置きが長くなってしまいましたが、私たち広報チームではデザイン完成まで一定のフローを設けております。
デザイン制作フロー
①デザイン計画
②リサーチ
③制作
④フィードバック
⑤修正
①デザイン計画
いざサムネイルを作ろうとなっても、作りたいイメージがなければそれをデザインに落とし込むことは出来ません。広報チームでは、デザインの完成イメージをより明確に近づけるため、デザイン設計シートから書き進めるようにしています。
正直、デザインをつくるうえでこの工程が一番大切です。
ここでは、「デザインを届けたい相手」を想像して書き進めていきます。
①誰に
②何を
③どう届けたい
これらを明確にすることで、自然とペルソナを意識して制作に取り組めるようになります。
その次に必要なのが「キーワード」。デザインをつくるうえで欠かせない要素のひとつです。
今回の記事を例にすると、以下のようなワードが考えられます。
【キーワード例】
・クリエイティブ
・ペイント
・絵の具
・カラフル
・明るい
・描く etc…
ここでは想像力が発揮されます。アイディアを出すのが苦手という方は、マジカルバナナを思い出してみてください。
マジカルバナナ
A「バナナと言ったら黄色♪」
B「黄色と言ったらレモン♪♪」
C「レモンと言ったら酸っぱい♪♪♪」
といったように、頭の中でキーワードを連想させることで、関連するワードが浮かび上がるようになります。
それでもまだ自分には難しいと思う方は「○○○（キーワード） 関連語」とネットで調べると、キーワードに関連した単語が表示されるので、出てきたワードを埋めていくのも良いでしょう。
キーワードを埋められたら次は世界観です。世界観はデザインをパッと見てどう印象付けたいかを指します。
例えば、社長にこれからの展望についてインタビューした記事であれば「ビジネス感のあるきっちりした印象のサムネイル」になりますし、社内イベントの様子を記事にする場合は「イベントの楽しさが伝わる明るくポップなサムネイル」がイメージされるでしょう。
タイトルと記事の内容に対してサムネイルデザインとの差異がないようにすることが大切です。たまにYouTubeなどで「サムネ詐欺」や「タイトル詐欺」という言葉を目にすることがありますが、読者が読む前に想像できるのはタイトルとサムネイルだけです。
ここから導き出せる情報との差異が生まれてしまうと、読者が抱く「想像との違和感」が生じ、結果的に期待を裏切る記事が生まれてしまいます。
読者をがっかりさせないためにも、タイトルと記事にマッチしたサムネイルを考えることが大切です。
キーワードを埋めたら「優先順位」を決めていきます。伝えたい情報が明確でないと、サムネイルを見た方にも伝わりません。
この画像2つを見比べてみてください。
下線を入れる
あなたが「強調されたデザイン」を選ぶなら、①と②のどちらに視線がいきますか？
これはデザインの4原則のひとつで「対比」と呼ばれる技法になるのですが、強調したい部分を大きくしたり、目立たせることで届けたい情報がダイレクトに伝わるようになります。
このように優先順位をつけておくことで、「どこを一番に目立たせたいか」を意識してメリハリのあるデザインが作れるようになります。対比はどのデザインにも適応させる必要はなく、全体的なイメージを調和させたデザインを作りたい場合はあえて対比をつくらないケースもあります。
優先順位が決まったところで、リサーチ業務に移っていきます。
②デザインリサーチ
デザインをリサーチする中で注意すべきポイントは、「デザインのどこを参考にするかはっきりさせておくこと」です。
リサーチする時に、何となく探して流し見してしまった経験はありませんか？せっかくデザイン設計シートを使ってイメージを膨らませたのに、デザインを眺めているだけでは良いデザインは思い浮かびません。
デザインの何を参考にしたいか、例えば社内イベントをテーマとした場合、「大人数がパーティーしている写真をメインとしたデザイン」や「実際に社内イベントを行っている企業のnoteサムネイル」を参考にするだけでも検索軸が絞られ、自分のイメージに近いデザインを見つけ出すことができます。
具体的なイメージよりも、雰囲気などの抽象的な世界観をリサーチする場合は、ギャラリーサイトを活用するものおすすめです。今回はこの記事を読んでくださった皆様だけに、私が参考にしているサイトをご紹介したいと思います！
Pinterest（ピンタレスト）
デザインに携わったことのない方でも、知っている方が多いのではないでしょうか。
ネット上にある画像が集まっているので、デザインのアイディアが欲しい！という時に便利です。気に入った画像は保存できるので、いつでも見返すことができます。
BANNER LIBRARY
名前の通り、バナー特化のギャラリーサイトで、バナーのサイズやメディア媒体からも検索できるのが特徴です。
細かくカテゴリ分けされているので、イメージに近いデザインを探すことができます。
SAMUNE
目の惹くサムネイルを集めたサイトで、「カテゴリー」や「テイスト」、「色」から検索できるのが魅力的です。
YouTubeのサムネイルなので、画像をクリックするとYouTube動画にそのまま飛ぶようになっています。トレンド感のある新しいデザインを知りたい！という方はぜひ参考にしてみてください。
③制作
リサーチを終えたところでようやく制作に移っていきます。こうしてデザインの過程を文字に起こすと完成までの道のりは長く、書いてる本人も疲れてきました(笑)
（皆さんも休みながら読み進めてくださいね！）
＊＊＊
制作までの工程ですが、広報チームでは制作～完成までのレールはあえて敷いていません。なぜなら制作工程こそが最も個の力を出せるからです。
レイアウトから入るも良し、素材を入れてから周りに装飾を加えるのも良し、タイトルから埋めていくのも良しと、何でもOKにしています。あえてレールを引かないことで、デザインのフィードバックをする時に個々の作り方を参考にできるからです。
私の場合はタイトルを直置きで入れてから、強調したい部分をまとめて最後にレイアウトや周りの装飾を決めています。メンバーによってはモチーフになる素材をたくさん集めてそこから必要な画像を選択し、形にしていく人もいます。その過程こそがデザインの面白さでもあるのです。
ちなみに、今回のサムネイルは下記の手順で作りました！
①タイトルを直置きする
②タイトルの字体を変更し、強調したいワードを大きくしてメリハリをつける。袋文字のエフェクトを追加してよりポップな印象に
③カラフルさを色で表現する
④デザインのイメージに合う素材を追加し、周りに装飾を付ける
⑤白抜きエフェクトを加えて「デザイン制作手順」のワードを際立たせる
⑥イメージに合った背景を追加
⑦不要な素材を削除する
⑧線の色や素材の色を変更し、空白を埋めるように同色の素材を追加して統一感を出す
⑨素材の目の色をフォントと同じ色に合わせ、デザインのモチーフである「筆」を盛り込んで完成！
こうして見ると、ひとつのサムネイルに対して何工程も挟んでいることが分かるかと思います。
各要素にもきちんと意味があるので、noteのサムネイルだけでなく、ポスターやチラシなど何気ないデザインにも目を向けてみてください。日頃から「デザインの見る目」を鍛えておくことで表現の仕方を学ぶことができ、自身のデザインに活かせるようになります。
デザインが完成したらデザインの基準となるチェックリストの項目を見て、色のトーンやレイアウト、素材の大きさや調和できているかの最終チェックを挟みます。
④フィードバック
広報チームでは、デザインが完成したらチームメンバー全員にフィードバックをしてもらう時間を取っています。
完成したデザインを伝える際、「○○○のイメージで作りました」と見せるのもいいですが、それだけでは初めてサムネイルを見た人に伝わりません。そこで登場するのが最初に記入したデザイン設計シートです。
設計シートではイメージをそのまま言語化しているので、デザインの目的やターゲット層を定義付けするのにとても便利です。デザインの意図を知ってもらうためにも、設計シートの情報を先に共有しておきます。
ここで情報を残しておくことで、目的に沿ったデザインが落とし込まれているかを判断できるようになります。デザインの基準が双方明確でないと、結果的に自分好みのデザインに偏ってしまい、それを理由付けできる根拠も曖昧になってしまいます。
良質なデザインの基準を設けるためにも、同じベクトルで話を進めていかなければいけません。会話の方向性にズレが生じると「どんなイメージでこのデザインを考えてたんだっけ？」と振出しに戻りかねないので、コンセプトをすり合わせるのにも設計シートは有効です。
そのほかにも、私たち広報チームではフィードバックをする際ひとつだけ気をつけていることがあるのですが、それは「修正を強制しない」ということです。
デザインに正解はなく、A案とB案のデザインを100人が見たとしても、100人中100人が同じ回答になる可能性は極めて低いです。仮に私が意見を述べたとしても、それが決して正しいとは限らない。なので、修正を強制するのではなく、あくまで一個人の意見として話すようにしています。
「修正＝指示」と捉えてしまうと、その人好みのデザインを作ろうとするあまり、個性が失われてしまいます。チームで仕事をする方やデザイナーと協力しながら仕事を進めている方は、「伝え方」を意識して取り組んでみてください。
⑤修正
フィードバックをもらったら最後に修正作業をしていきます。
修正作業をする時はその場ですぐに直すことも大切ですが、期日に余裕がある場合は一晩寝かして改めて見直してみることをおすすめします。時間を置くことで俯瞰して見られるようになり、周りの装飾やフォント、配置などに気づきを得られることがあるからです。
実際に私が今回制作したサムネイルも、一晩置いて考え直したときに「もう少しデザインの要素を取り入れられないか」と新たな案が思い浮かび、デザイン制作シートのキーワードに入れていた「筆」の素材を追加することにしました。
デザインと向き合うことも大切ですが、時には休憩時間に外に出て気分を変えてみるのも良いでしょう。自然と触れ合うだけでも、そこから思いもよらないデザイン案が浮かび上がります。
おわりに
最後までお読みいただきありがとうございました。
改めて、今回のサムネイルデザイン制作手順のまとめです。
デザインは想像（イメージ）を膨らませ、それをどれだけ追求できるかが大切です。正解がないからこそ面白くて奥深いもの。
こうしてアウトプットできるようになったのも、未経験から始めた私にとっては少しの成長なのかなと思っております。同じようにデザインに悩まれている方や、デザインチームを立ち上げる方の参考になれたらと思っているので、またいつでも読み返していただけると嬉しいです。
この記事の感想や「デザインについてこういうことが知りたい！」などありましたら、いつでもコメントお待ちしております！
ではまた次回の記事でお会いしましょう～！！
