最近ではあたりまえのようによく耳にするようになったレスポンシブデザイン。モバイルフレンドリーの導入によって、レスポンシブデザインを検討される方もますます増えているのではないでしょうか？ 今回は『The ultimate guide for building truly responsive logos』よりレスポンシブロゴデザインのお話です。
レスポンシブロゴとは？
レスポンシブWEBデザイン同様に画面のサイズに対応して表示されますが、ロゴは視認性の問題から、その体形を変えていきます。画面のサイズに合わせて、ロゴマークのサイズや要素が省略されシンプルになっていきます。
ロゴマークのデザインでは、その使い方のルールやブランディングの表現規則としての「VIマニュアル(VI=Visual Identity ビジュアル・アイデンティティ) 」として納めることがあります。
VIマニュアルの中で複数パターンのロゴを用意している事も多いと思いますので、その場合は規定に沿って変形させるようにしましょう。
レスポンシブロゴ作成のためのガイド
１，VIマニュアル・スタイルガイドの規定に従って下さい。
よく設計されたアイデンティティは、多くの場合、利用可能な異なるロゴのバリエーションを持っています。縦組み、横組み、マークなし、ロゴタイプのみなどいずれにしても、代替のロゴの変化は、多くの場合、スタイルガイドやブランディングのガイドライン文書（VIマニュアル）で提示して概説されています。最高の特定サイズの制約内でロゴを提示する方法のルールについては、これらのガイドラインを見てください。
例：ペンシルベニア大学
そのロゴスタイルガイドは、具体的により小さな領域で使用することができる大学のロゴの代替形式を提供しました。ロゴの小さなバージョンは、単純にロゴを削除したとマークはシールドの高さに一致するように拡大しました。これらの各オプションが320PXワイド小さな画面上に凝縮ヘッダにどのように見えるかを見てみると、小さい形式（下）の方が、より読みやすく、見やすいことは明らかです。
２，詳細なデザインを減らし、簡略化する。
複雑なディテールのロゴとマークはまれではありますが、あなたのロゴが細かく詳細なデザインの場合、そのロゴを最適化しデザインの細かさを減少させることで、小さいサイズの時のあなたのロゴの読みやすさを向上させることができます。
例：アルジェントワイン
アルジェントのロゴスタイルガイドは、サイズの異なる様々なロゴの素敵なイラストを持っています。ロゴは小さなサイズのために、デザインの細かさのレベルが徐々に低下しています。
３，スタック＆水平技術
これはおそらく、様々なサイズのロゴを適応させるための最も使用されると、単純な技術の一つです。
例：ケースメイト
マークが後方右側に移動し、縦組みから横組へ、最小サイズのロゴは「CASE・MATE」のタイプロゴが消えマークのみになります。
４，デザインの減算
様々な状況においてロゴを使用した際に小さくても視認性に優れたロゴとするために、解像度が小さくなった際に読めなくなるであろうデザインを削除することができます。この方法は、読みやすさとブランド認知を維持します。
例：NOAA
米国海洋大気庁（NOAA）のロゴは、グラフィカルエンブレムの周りにテキストが散りばめられていますが、小さいサイズのために、デザインを減算することでブランド認知度が維持されます。
まとめ
より読みやすく、認識のしやすいロゴ作成には、様々な状況を考慮しサイズ、媒体なども含め考えなければなりませんね。フラットデザインがトレンドとなっている背景には、視認性を考慮した企業が増えている現状が表れているのかもしれませんね。
原文：The ultimate guide for building truly responsive logos/by-DesignHooks , viget/by-Jeremy Frank
