レスポンシブ ロゴ(responsive logo)

responsive logo

Advertisement

最近よく聞くようになりましたね。
レスポンシブデザイン同様、サイズに合わせて変わりますが、ロゴは視認性の問題から、その体形を変えていきます。
シンプルになる、というのが一番わかり易いと思います。

VIなどの過程でロゴのパターンを用意している事も多いと思いますが、その場合は規定に沿って変形させるべきでしょう。

大体は大きな順から

フルサイズ用に細かい部分まで作られたロゴデザイン

一部の要素を簡素化、あるいはサイズダウンやタイポグラフィの省略

モチーフとタイポグラフィを横並びに

モチーフ部分のみになり更に簡素化
といったパターンが多いと思います。

無い場合は、このサイトではレスポンシブロゴのサンプルを見る事が出来るので参考にしてみてはいかがでしょうか
ブラウザ幅を変えて確認してみてください。
Responsive-Logos

responsivelogos.co.uk
http://www.responsivelogos.co.uk/

適用方法についてはこちらの記事にはCSS/JSによるCODEPENサンプルもあります。

The ultimate guide for building truly responsive logos | DesignHooks
http://designhooks.com/the-ultimate-guide-for-building-responsive-logos/

See the Pen Responsive Logo – NOAA by designhooks (@designhooks) on CodePen.

1321321o

ひとこと

実際はレスポンシブデザイン適用時、レイアウトと共にロゴの配置を変えていくので単体ではあまり活躍しないかもしれませんが、手法の1つとして考えておくと良いかもしれませんね。一度設置してしまえば管理も楽になるかもしれません。