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

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

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

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

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

Dropbox - responsive.gif

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

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

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

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

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

1. シンプルなデザイン

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

スライド1.png
Source：Just Creative

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

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

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

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

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

2. 汎用的なデザイン

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

スライド2.png
Source：Just Creative

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

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

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

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

3. 節約的なデザイン

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

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

スライド3.png
Source：Just Creative

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

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