ブログ
ロゴデザインの新しい考え方！「レスポンシブ・ロゴ」とは？
Webサイト作成ではよく聞かれる「レスポンシブ」が、ロゴとどんな関係があるのか…。
今回は、ロゴデザインの新しい考え方「レスポンシブ・ロゴ」について、詳しく解説していきます。
■目次
－そもそも「レスポンシブ」って何？
－レスポンシブ・ロゴとは？
－なぜ、ロゴにも「レスポンシブ」が必要なのか
－「レスポンシブ・ロゴ」の考え方
・シンボルマークありのロゴ
・ロゴタイプのみのロゴ
－ただ組み替え・縮小しているのではない、「レスポンシブ・ロゴ」
そもそも「レスポンシブ」って何？
「レスポンシブ」という言葉は、「聞いたことはあるけど、あまり詳しく知らない」という人は多いのではないでしょうか。
Webサイト作成に直接関わることの少ない人にとっては、あまり馴染みのない言葉かもしれません。
パソコンで閲覧しているWebサイトを、今度はスマートフォンで閲覧してみると、同じWebサイトでも「スマートフォンの画面サイズに合わせたレイアウトに変わっている」ことがあると思います。
これはWebサイトを作る際、パソコンやスマートフォン・タブレットなど、表示する機器の画面サイズに応じて最適な表示に変わるように設定している為です。
このように、機器の画面サイズに合わせて最適な表示に変わるように作られたWebサイトのデザイン手法を「レスポンシブデザイン(またはレスポンシブwebデザイン)」と言います。
「レスポンシブ(responsive)」の単語の意味は、「すぐ反応(応答)する」です。
機器の画面サイズに合わせて、Webサイトが「すぐ反応」して表示(Webサイトのレイアウト)が変わる為、「レスポンシブデザイン」と言われているんですね。
レスポンシブ・ロゴとは？
機器の画面サイズに合わせてWebサイトの表示が変わるのが「レスポンシブデザイン」なら、「レスポンシブ・ロゴ」とは、一体どんなロゴになるのでしょうか？
これは言葉で説明するよりも、実際のロゴで確認する方がわかりやすいかもしれませんね。
こちらはJoe Harrison (ジョー・ハリソン)氏が作ったサイト【Responsive Logo】の画像です。
引用元：Responsive Logo
【Responsive Logo】は、様々な有名企業のロゴを使って“レスポンシブデザインにしてみるとどうなるか”という実験を行ったサイトです。
パソコンのブラウザでこのサイトを表示して、ウィンドウのサイズを縮めてみてください。
ウィンドウのサイズを縮める…つまり、パソコンの画面サイズからスマートフォンやタブレットの画面サイズに縮小されたと仮定して、それに合わせてロゴが変わっていく様子を見ることができます。
「レスポンシブ・ロゴ」とはこのように、表示される画面サイズに応じて数段階に変化するロゴのことを言います。
なぜ、ロゴにも「レスポンシブ」が必要なのか
スマートフォンやタブレットの登場で、Webサイトを「レスポンシブデザイン」にすることは、もはや当たり前になってきましたね。
しかし、ロゴまでも「レスポンシブ」にする必要はあるのでしょうか？
Webサイト上でロゴを表示する際、できるだけロゴは大きく、分かりやすく表示させておきたいですよね。
しかし、スマートフォンやタブレットはパソコンに比べて表示できるスペースが非常に狭い(少ない)ので、あまり大きく表示することはできません。
かといって、スマートフォンやタブレットの画面サイズに合わせて、デザインそのままにロゴを小さく表示してしまうと、今度はロゴが視認しにくくなります。
「レスポンシブ・ロゴ」は、画面サイズが小さくなるにつれてロゴデザインを変化(省略)させることでロゴの視認性を保とうとする、新しいロゴデザインの考え方なのです。
先述したように、「レスポンシブ」というデザインの考え方が登場したのは、スマートフォンやタブレットの存在が大きく影響しています。
こちらの資料をご覧ください。
総務省から発表されている「情報通信機器の保有状況」を表したグラフです。
【主な情報通信機器の保有状況（世帯）】
引用元：総務省 | 令和元年 情報通信機器の保有状況
資料では、2017年の時点でスマートフォン(赤の折れ線)がパソコン(緑の折れ線)の保有率を上回っていますね。
そして、このスマートフォンの保有率の高さは「スマートフォンでWebサイトを閲覧する人の数」にも関係してきます。
すっかり当たり前の光景になっていますが、通勤時間帯、電車やバスの待ち時間や車内でも、みんなスマートフォンを弄っていますよね。
動画やゲームを楽しんでいる人が多いとは思いますが、Webサイトを閲覧している人も、決して少なくはないでしょう。
スマートフォンやタブレットの登場で、いつでもどこでもWebサイトを閲覧できる環境になり、Webサイトはパソコンだけで閲覧するものではなくなったのです。
グラフの傾向から予想できるように、この先もスマートフォンやタブレットの保有率は上がって行くでしょう。
「レスポンシブ・ロゴ」が必須になる日も、そう遠くは無いのかもしれません。
「レスポンシブ・ロゴ」の考え方
ロゴにも「レスポンシブ」な考え方が必要なことは分かってきましたが、一体どのようにロゴを「レスポンシブ」にすれば良いのでしょうか？
先ほどご紹介した実験サイト【Responsive Logo】に掲載されているロゴを参考に考えてみましょう。
シンボルマークありのロゴ
シンボルマークの多くは特徴的なデザインであることが多いので、ロゴが縮小されても「あのロゴだ」というのが分かりやすいですよね。
そのことから、シンボルマークのあるロゴの場合、最小で表示するのはロゴタイプよりもシンボルマークを使った方が良いと言えます。
実験サイトでも、最小サイズにした際、シンボルマークがある企業ロゴはシンボルマークが使われていますね。
その中で面白いのが、「HEINZ(ハインツ)」と「Heineken(ハイネケン)」のロゴです。
「ハインツ」で最後に残っているのは、ロゴデザインの「ラベル」の部分です。
シンボルマークと言うには少し違うのですが、「ハインツと言えば、この形のラベル」というイメージが浸透している為、「ラベル」だけが残っても「ハインツ」と分かるんですね。
もうひとつ、「ハイネケン」の方は「星マーク」のみが残っています。
シンボルマークに星マークを採用している企業は多数あると思いますが、この「星マーク」は「ハイネケン」のものだとすぐに分かります。
これは、「星マーク」と「色」の組み合わせで「ハイネケン」が連想できるからです。
「ハイネケン」と言えば、印象的な「グリーンの瓶に赤い星マーク」。
モノクロの表示で星マークだけ表示されていたら「どこの企業？」となりますが、Webサイトはフルカラーで表示される為、ここまでデザインの要素を削っても「ハイネケンのロゴ」を表現することが出来るのです。
ロゴタイプのみのロゴ
シンボルマークがあるロゴに関しては、シンボルマークの簡略化されたものが最小表示で残っていますが、ロゴタイプのみの「Coca Cola(コカ・コーラ)」はどうでしょうか？
「コカ・コーラ」ロゴは、縮小された際に一度消えた「Coke」(コカ・コーラの別称)が、「Coca Cola」のロゴタイプになって復活しています。
「コカ・コーラ」ロゴの特徴的なロゴタイプと、「Coca Cola」よりも短く表現できる「Coke」という別称を組み合わせて、コンパクトに表現されています。
ところで「Walt Disney(ウォルト・ディズニー)」は、シンボルマークのお城のシルエットは残さずに、ロゴタイプの「D」のみが残っていますね。
最小表示のロゴをお城のシルエットにするより、「D」の一文字にした方がシルエットがシンプルなので、視認性が良くなります。
また、このロゴタイプは多くの人が「ウォルト・ディズニーだ！」とすぐ連想できるくらい特徴的で認知度も高いので、たった一文字しかなくても「ウォルト・ディズニー」を表現するのに全く問題ありません。
「コカ・コーラ」も「ウォルト・ディズニー」も特徴的なロゴタイプの為、少ない文字数で表示することになっても、「コカ・コーラらしさ」「ディズニーらしさ」が表現出来ています。
しかし、ロゴタイプしかないロゴであまり特徴の無いデザインの場合、少ない文字数になると「らしさ」が表現できない可能性が出てきます。
これから「ロゴタイプのみ」のロゴを作成するのであれば、「レスポンシブ・ロゴ」にすることを前提に、特徴的なロゴタイプ(もしくは、文字の一部に装飾があるもの)にしておく方が良いかもしれません。
ただ組み替え・縮小しているのではない、「レスポンシブ・ロゴ」
実験サイト【Responsive Logo】では、表示する画面サイズに応じてロゴデザインの要素が組み替わったり、削られたりしていますが、単に「元のロゴの組み替え・縮小」をしているのではありません。
通常、ロゴは「ある程度縮小しても潰れないデザイン」で作成され、縮小する場合でも「デザインはそのまま」です。
しかし「レスポンシブ・ロゴ」の場合、表示サイズが小さくなるに従って、小さい文字や細い線は「省略」されていきます。
「LACOSTE(ラコステ)」のロゴで、その様子を見てみましょう。
シンボルマークのワニは、元のロゴではウロコや口の赤が表現されています。
しかし、最小表示になると緑一色。ウロコも、口の赤もありません。
ディスプレイでの表示は印刷とは違う為、「レスポンシブ・ロゴ」の場合、ディスプレイで小さく表示する際に綺麗に見えるデザイン(表現)であることが重要になってきます。
「ラコステ」の場合、最小表示でウロコや口の赤を表現しても視認性が良くないので、それらを省略することで、シンボルマークが綺麗に見えるようになっています。
ロゴデザインの、どの要素をどんな風に省略したり削ったりしていくと、視認性が良く、元のロゴらしさを表現できるのか…。
これまでロゴデザインは、“印刷で綺麗に表現できる”ことを念頭に考えられてきましたが、「レスポンシブ・ロゴ」では、”ディスプレイで綺麗に表示できる”ことを念頭に考えていく必要があるのです。
お困りのことがございましたら、お気軽にこちらからお問い合わせください。