次世代のロゴデザインに欠かせない！レスポンシブロゴの基本

レスポンシブデザインがWebに旋風を巻き起こしてから10年が経過し、今ではWebサイトの標準となっています。モバイル端末による閲覧は今や全トラフィックの3/4を超え、ブラウジング自体のトラフィックも全体的に増加したことで、従来のWebサイト設計に大きな ユーザビリティ の問題を引き起こすようになりました。

その中で注目を集めているのが、レスポンシブロゴと呼ばれる新しいロゴの考え方です。

今回は、次世代のロゴデザインに欠かせないレスポンシブロゴの基本についてご紹介します。

表示サイズに関する ユーザー の要求に応えるために、ロゴについて再考することは非常に重要です。
　　

次世代のロゴデザインに欠かせない！レスポンシブロゴの基本

レスポンシブロゴ（Responsive Logos）とは、様々な画面サイズに合わせて数段階に変化するロゴのことを指します。これまでは、スマートフォンや タブレット 、デスクトップなどの多様な表示サイズに関して ユーザー の要求に応えるために、デバイスごとにロゴを変えるという発想はほとんど考えられませんでした。

一方、昨今ではロゴ自体を簡素化して洗練されたバージョンに時間をかけてリニューアルする企業も増えており、レスポンシブロゴを採用するケースも増えています。

レスポンシブロゴを作ってしまえば、Web上だけではなく、名刺や出版物などあらゆる印刷物においても、適切なサイズでブランドを体現することができます。幾つものバージョンのロゴを作るのは骨の折れる作業かと思うかもしれませんが、レスポンシブロゴは結果的に総合的なブランドイメージの確立に一役買ってくれることでしょう。

それでは、レスポンシブロゴを作成する上で気を付けなければならない点はどこにあるのでしょうか。

以下に、特筆すべき3つの点を挙げていきます。
　　

1. シンプルなデザイン

何よりも重要なことは、こうした概念が活きてくるのに、シンプルかつ洗練されたロゴが必要条件となるということです。言い換えれば、CGなどを使った複雑なロゴよりも塗りの少ないわかりやすいロゴのほうが、どのようなサイズであったとしてもそのブランドを体現することができます。

Source：Just Creative

こうしたデザインの前提として、ロゴをシンプルなものに変える作業を長期間かけて行った企業もあります。

例えば、マスターカードは赤と黄色の円を部分的に重ねた上に、大胆に文字を乗せたロゴを使用していました。しかし、現在ではフラットな円の下に丸みを帯びた文字を置くだけのシンプルなロゴに変更しました。

幾何学的なロゴマークだけでもブランドを体現することができれば、レスポンシブロゴを作成しやすくなります。

「Less is more.（少ないことで多くを体得できる）」という言葉は、ロゴデザインの世界にも当てはまります。最近ではハフィントンポストやYouTubeが李ブランドを行いましたが、あらゆるロゴはよりシンプルな方へとシフトしています。

参考：
フォントがリブランディングに結びつく？YouTubeやHuffPostのロゴに見るフォントとブランドの話｜ferret
　　

2. 汎用的なデザイン

レスポンシブロゴはデバイスの大きさによってロゴ自身の大きさも変化しますが、その時に重要なのが「大きくても小さくても、そのブランドだと認知できるか」という点です。

Source：Just Creative

具体的な例を確認するのが1番わかりやすいでしょう。

例えば、「Walt Disney」のロゴは非常に有名ですが、一方でサイズを縮小したよりシンプルなブランド名である「Disney」であっても「Walt Disney」のことであることが認識できます。Disneyの「D」だけを採っても、タイポグラフィが独特なので「Walt Disney」のことであることが理解できます。

Google のロゴマークも同じです。 Google を短縮したシンプルな「G」は、オリジナルロゴの短縮バージョンであることは、誰にでも理解できます。

このように、汎用的なデザインであれば、たとえ大きかろうが小さかろうが、そのブランドを簡単に認知することにつながります。複雑にするとかえってロゴを全体的に認識しないとわかりにくいですが、汎用性に気を付けてデザインをすればどのようなサイズでもデザインすることができます。
　　

3. 節約的なデザイン

デザイナーの予想とは裏腹に、小さくて細かな変化がブランドイメージを毀損してしまうのは少ないようです。むしろ、ブランドを作り上げるのは、全体的で大雑把なイメージであることが多いのです。

レスポンシブロゴを作成する時に、デザインの物理的な制約によって何かを取り除かなければいけない場合があります。そうした場合にも対応できるようなデザインにすれば、全く問題ありません。

Source：Just Creative

例えば、HubSpotのホーム ページ では幅狭な ブラウザ で確認するとワードマークと呼ばれる文字が消え、ロゴマークだけが残ります。同様に、ドミノピザも幅狭な ブラウザ で確認するとサイコロの部分だけが残ります。

このように、物理的に何かを省略しなければならない場合にも、「最低限このマークがあればブランドとして認知される」という最大公約数的で節約的なデザインを採用するのは、レスポンシブロゴを考える上で重要でしょう。
　　

まとめ

物理的な画面設計における可変的なデザインに関しては、これまでもたくさんのデザイナーが取り組んできました。しかし、ロゴそのものを変化させて表示させてみるというレスポンシブロゴの考え方は、2017年頃にようやく定着したといっていいでしょう。

既存のロゴをレスポンシブロゴに対応させるには、今あるものを変化させるよりも、ゼロベースでリブランドを考えていったほうがいい場合もあります。

これからの幅広いチャネルでの マーケティング 戦略を考える上で、試しにレスポンシブロゴを作ってみるのはいかがでしょうか。