responsive-logo2
  • Comments:0

レスポンシブロゴとレスポンシブアイコン

Pocket


前回『レスポンシブロゴ作成のための究極ガイド』の記事でご紹介したレスポンシブロゴ。どんなものか、まだまだイメージしにくいという方のために、とってもわかりやすいサイトをご紹介します!

これからご紹介するサイトはResponsive LogosというサイトでJoe Harrison 氏の実験プロジェクトです。ユーザが認識できるように、ロゴの要素を減らしていったもので自分でレスポンシブロゴを作成する時やロゴの簡略化をするためのヒントになるサイトです。ぜひ御覧ください。

 


 

レスポンシブロゴ

 responsive-logoresponsive-logo2

 

左から右に要素が減ってゆきます。実際のサイトではブラウザを大きくしたり小さくしたりすることで、アイコンが変わります。コカコーラはまず上下の文字が消え、リボンがなくなり、最終的にはCokeの文字に変わりましたね。シャネルも円がなくなり、文字とマークの配列が横並びに変わりCの文字が省略され、最後はマークのみになりました。NIKEはAIRの文字が消え、2番と3番はサイズのみ変わって、最後はスウッシュのみとなりました。他の3点に関しても同様に、文字が省略されたり、逆にマークが省略されたりと要素が減ってスッキリしていますね。これであれば小さくても見えますし、何よりこれだけ削ってもわかるブランド力もさることながら、認知されやすい、覚えられやすい部分を残して削っていっているのでしょうね。とても勉強になりますね。実際にブラウザを伸び縮みさせて確認してみてください。

Responsive Logos

 

 

レスポンシブアイコン

 

responsive-icons

 

responsive-icons2

 

こちらも 同様にJoe Harrison 氏の実験プロジェクトでアイコンバージョンです。アイコンがどんどん簡略化されていく過程がわかりますね。様々な媒体にロゴが使われる今、いろんな状況を想定したロゴづくり、デザインが必要であるということがわかりますね。

 

引用元:Responsive Logos/Joe Harrison

Pocket