新R25でブランド戦略を担当しているムロハシと申します。

このnoteは「明日から真似できる“ブランディングを意識した”記事サムネイル画像のデザイン」と題しまして、新R25を通しての、サムネイルのブランディングデザインについて書いています。

まず、デジタルメディアサービスのデザインを大きく分けると以下の2点があるかと思います。

1.【UIデザイン】
アプリやwebサイトの見た目の印象や使いやすさを設計し、同時に情報を整理して開発しやすいデザインを追求する。（アニメーションやインタラクションなどの動きのあるデザインも含む）

2.【グラフィックデザイン】
サービスの世界観からプロモーションにいたるすべてのビジュアル、ロゴなどをつくり、目的に合わせたグラフィックデザインに落とし込む。（モーションデザインやテロップデザインなども含む）

（※もちろんこれだけではないですが）

では、これらのデザインを「ブランディング」というものさしで考えたとき、そのアウトプットがユーザーへ印象を与えるものとして、どういったデザインが必要なのでしょうか。

今回は、「記事サムネイル画像」を約2年間ほぼ毎日デザインし続けた中で、ブランディングを意識したサムネイルデザイン制作においてわかってきた課題や、それを解決させるために実際に活用している3つの方法を書こうと思います。

こんな方にオススメです
・アプリやWEBサイトなど、ITサービスに関わるデザイナー
・これからブランディングデザインを始めようと思っている方
・サービスプロデューサーやディレクター（デザイナーにデザインを依頼する方）
・事業責任者やブランド責任者

記事サムネイル画像とは

通称「記事サムネ」と呼ばれているこの画像は、サービスでメインとして扱われるほか、SNS投稿のog:imageや、Yahoo!ニュースなどといった他社のメディアで掲載されたときにも、キャッチ画像として取り扱われます。

つまりこの画像が、コンテンツの最初の印象を決める「第一印象」であり、「コンテンツの“顔”である」と私は考えています。

初対面の人にお会いしたときの自分の「顔」がどんな顔をしているのか。そう考えると、コンテンツにとっても、メディア全体にとっても、さらにブランディングにとっても、記事サムネは非常に重要なクリエイティブです。

なぜ記事サムネにブランディングが必要なのか

結論から言うと、「統一された印象を残すため」であり、ひいては「サービスのファンをつくっていくため」です。

新R25のコンテンツは、SNS上でのコンテンツ流通力を利用して、「広くコンテンツを届けること」と「リアクションを生み出すこと」を意識しており、そのためにコンテンツひとつひとつの接触数とボイスを重要視しています。

そしてそのコンテンツを、別メディアが取り上げることも多くあります。

このため、新R25に限らずWEB上のコンテンツは、一度見たものがどのメディアのコンテンツだったのか、覚えていない可能性が高いです。

なので、「あの記事みた？」というユーザーの口コミや投稿を「あの“新R25の”記事みた？」に変化させていきたいと考えたとき、他社のどんなメディアで見られたとしても、そのコンテンツは新R25のコンテンツである、といった印象を残す必要があります。

これを実現させていくために、まずひとつひとつの記事サムネのデザインが、サービス全体の印象（ブランド）を担っていることをチーム全体で再認識しなくてはなりません。記事と出会ったその一瞬がブランディングになってるという感覚です。これができるだけでチームのサムネイルに対する熱量が違います。

そして、ユーザーが記事に出会うのは1回だけではありません。別の記事に出会ったときにも、「これは新R25の記事だ」という判断を瞬時に持っていただくことも重要になります。

こういった細かなブランディングを意識し続けることで、

・記事を読んだ後に新R25のサムネが「内容とセット」で印象に残り、
・別の記事に出会ったとき、「あ、新R25の記事だ」という判断となり、
・蓄積された良質な体験が期待値に変化して、ファンになる

この流れをつくり出したいと考えています。

ブランディングを意識したときのサムネイルの課題

課題は以下の3つに集約されるのではないかと考えます。

・インパクトがなければ、人の印象に残らない
・インパクト“だけ”のデザインではブランドがつくれない
・（統一性を重視した）フォーマットデザインだけではインパクトが弱まる

つまり、

・何がなんでもインパクトが必要！
・でもインパクトを重視しすぎると、サービスとしての印象（ブランディング）がバラバラになってしまう。。
・結局インパクトとブランディングの両立ってどうするの？？

という課題です。

サムネイルでは必ずと言っていいほど、インパクトが求められます。SNSのフィード上で、人の目を止めるためには当然のことだと思います。

しかし、インパクトだけではブランドがつくれません。

ここで言っているブランドとは「サービスに対する共通の印象」のことを指しています。「同じ印象を与えつつ、インパクトも与え続ける」そういったデザインがこれからのデジタルメディアのサムネイルに求められているのではないか、新R25ではその部分を意識したサムネイルづくりをしています。

以下は、最近の新R25での記事です。

これらのサムネイルデザインは、一見バラバラのように思えるかもしれませんが、以下の考え方によってデザインしています。

サムネイル単体で「インパクト」を出し、集合体として「らしさ」にする

ほとんどの方は「記事タイトル」と「記事サムネイル」で、その記事を見るか見ないか判断すると思います。（ニュース性のある記事は別として）

よく言われていることですが、これらの判断は一目見たときのほんの数秒で決まります。

そして見渡す限り、記事メディアにはインパクトを重視したサムネデザインがたくさんあり、どのメディアもインパクトが重要であると理解しているのだと思います。

新R25では、インパクトを重視しつつ、サムネイルを集合させたときの「新R25らしさ」を意識しています。

では、この「集合させたときの“らしさ”」は、どのようにしてつくっているのか。新R25をデザインし続けてきた実例をもとに説明していきます。

ここからは私がデザインしている中でとくに意識していることを、忠実かつ詳細に書いています。すごく悩みましたが、ここから先を有料にさせていただきたいと思います。ボリュームのある記事ですが、損はない内容になっているかと思います。興味のある方はぜひご覧いただければ幸いです。

またこの記事は、文字のカーニングやレイアウトバランスなど、基本的なデザインスキルについては言及しておりません。デザイン基礎スキル、デザイン手法などを求めている場合は、満足いただけない可能性がありますので、ご了承ください。