Responsive Logos レスポンシブ・ロゴという考え方が面白かった
面白い試みだと思いました。レスポンシブデザインを、ロゴマークにも導入したら、良く見る会社のロゴはこんな風になるんじゃない？という実験サイトです。
Responsive Logos
まずは、こちらのサイトを見てみて下さい。
Responsive Logos
Joe Harrison ジョー・ハリソンさんが作った、実験サイトです。
キャプチャーを貼っておきます。
もしこのブログをスマートフォンやタブレットで読んでくださっているなら、何も変わらないかもしれません。
ですが、PCのブラウザで表示し、ブラウザの幅を縮めてみるとわかります。こんな風に…
デバイスの幅に合わせて、ロゴマークのサイズや要素が省略され、一番狭い幅ではシンプルなマーク部分だけになります。コカ・コーラ、シャネル、ナイキ、バング＆オルフセンのロゴが、面白く変わっていきます。
レスポンシブデザインとは
「レスポンシブデザイン」が何かは、私が語るまでもありませんが、ご存知ない方へ簡単に説明すると、PC、スマホ、タブレットなどの様々な画面の大きさに合わせて表示されるようにしたWebサイトの作り方のことです。
このブログ「忍苦日記」も、レスポンシブデザインになっています。
専門的な解説はこちらをどうぞ。
IT用語辞典 e-Words「レスポンシブWebデザイン」
一昔前は、PC用のWebサイトと別に、ガラケーで見るサイトはガラケーの仕様に合わせて用意をしていました。
スマートフォンやタブレットが出てきて、PCと同じWebサイトは見れますが、小さい画面で拡大して見るなど使い勝手が悪い場合は、やはりそれぞれのサイズで使いやすい、見やすい大きさのサイトを用意します。（スマホ用サイト）
そしてレスポンシブデザインという作り方は、別な物を用意するのではなく、ひとつのWebサイトが、幅が変わったら自動で最適化して表示されるようにしよう、というものです。
横に並んでいる要素が、縦に並び変わっていくようなタイプが多いですよね。どんなレスポンシブデザインサイトがあるか見れる、参考になるサイト
があります。
Responsive Web Design JP
日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
PCで綺麗に見える画質で作ると、スマホでは読み込みが遅くなるなどデメリットもありますし、一長一短かと思いますが、スマホ登場から導入が増えたデザインのやり方です。（この記事を読んで、なるほどそんな視点も…と思いました。年寄りを困らせる「レスポンシブWebデザイン」）
配置する要素もレスポンシブに
先の「Responsive Logos」は、この考え方をロゴマークにも対応させたらこうなる、という面白い実験だと思いました。
紙媒体でのロゴも最適化している
ロゴマークのデザインをすると、その使い方のルールを「VIマニュアル(VI=Visual Identity ビジュアル・アイデンティティ) 」として納めることがあります。
CI（Corporate Identity）と言われる「会社のコンセプトや経営理念などをわかりやすくまとめて、みんなで共有できるようにしよう」という作業の、ビジュアル部分（ロゴマークやロゴタイプ）のマニュアルです。
ネットに公表している企業が沢山あるので、検索すると見ることができます。例えば大阪教育大学さんのVIマニュアルはこんな感じ。
小さく使うとロゴが潰れてしまうので、「これ以下のサイズでは使わないでね」や、潰れを防ぐように隙間を増やした「小さく使う時には、このロゴを使ってね」といったような作業もします。
九州大学さんのVIマニュアルの11ページに、小さく使う場合のロゴと、使い方のサイズ指定がされています。
また、横型のロゴだけだと、例えば縦型の看板に使う時に、小さい表示になってしまうので、縦で使うパターン、横で使うパターンをそれぞれ用意したりもします。
「Responsive Logos」を見た時に、この概念と似てる！と面白く感じました。
Webサイトがスマホやタブレットなど、様々なデバイスで見られるようになった今、会社やブランドを表す家紋としての役割りなロゴマークも、どんな環境でも最良のバランスで表示されるような「レスポンシブ」な考え方が必要になるのかもしれない、と思いました。
他にもハリソンさんは「Responsive Icons レスポンシブ・アイコン」というサイトも作っていて、こちらも面白かったです。
1 thought on “Responsive Logos レスポンシブ・ロゴという考え方が面白かった”