最近、CSSを使ってアートワークをまるまるデザインしたり、あるいはより面白くしたりする試みがちらほら見られます。 例えば、ポピュラーなキャラクターをよりパンチのあるものにするのに、デザイナーが一役買っていたりするのです。
同様に、CSS、さらにはJSやSVGが投入されて作成された非常に面白いロゴも見られます。 それらは合わさることで、他のフォーマットではありえないほどの柔軟性をもつという利点があります。
本記事では、そのようなロゴを10例ご紹介します。 オリジナルのものもあれば、有名ブランドのものもありますが、いずれもCSS、JavaScript、SVGのコンボで構築されています。
（イメージをクリックすればCodePenが見られます）
１．花火アニメーション
このanime.jsロゴアニメーションは、CSSと（もちろん）JSの組み合わせを使用して、カラフルでダイナミックなアニメーションロゴを作成しています。 クールなイントロアニメーションだけでなく、ロゴがクリックされるたびに花火が打ち上がるようになっています。 どこか中毒性さえ感じらます。
２．容易なスケーリング
ロゴにCSSを使用することで得られる利点の一つに、SVGファイルのように、あらゆるサイズに合わせた拡大縮小が簡単にできるという点があげられます。 上のShop Talkのロゴの例では、CSSを使用した場合のピクセル単位のスケーリングの卓越性が、PNGとの比較で示されています。
３．手書き
手書きというにはこの例はもう少しですが、それでも美しいです。 ロゴのスクリプトテキストが、画面全体に手書きされているかのように表示されています。 シンプルですが効果的です。
４．オープンとクローズ
ロゴの白色が多色の背景に映えています。ただこのロゴの真価は、それに組み込まれている再生/逆再生機能にあります。「プレイ」を押すと滑らかなアニメーションでロゴが表示され、「リバース」で逆再生されます。 これは、たとえば、要素の終了を示す場合などに便利でしょう。
５．ピュア・クローム
CSSのみと単一のHTML要素で仕上げられているChromeロゴの忠実な再現です。 これは、シームレスな外観と複雑な形状を作成するということにかんして、CSSでどのくらいのことが達成できるかを実際に示してくれているものといえます。 回転ホバー効果も素敵です。
６．スポットライト
このペンのいずれかのロゴにカーソルを合わせると、カーソルのすぐ上の領域に「スポットライト」効果が与えられます。 この効果によってクールさが増し、相互作用が促されています。
７．ユニークな描画効果
この例は複数段階のレベルにおいて優れています。 第一に、テクニカルドローイングのような下書きからロゴが完成されるまでのプロセスを見せるアニメーションは、見て楽しいです。 第二に、微妙にアニメーション化されたグラデーションの背景は、シーン全体をとてもうまく補完しています。
８．有名ブランドの再現
純粋なCSSで再現された有名なブランドロゴのコレクションです。 驚くべきことに、いずれも200行ちょっとのCSSで構築されており、オリジナルのほぼ正確な再現に見えます。
９．最小限かつ面白いもの
さて、最小限ということと面白みがあるということは、通常一緒に考えられません。 しかし、この場合は違います。 この単純なロゴは、バックグラウンドでアニメーションブロックの虹を使用することで、もともとかなりプレーンなロゴに個性を加えてます。
１０．物語を伝える（繊細さを欠かずに）
アニメーションはロゴの大きな流行の一つですが、時には行きすぎがあります。 この例を魅力的にしているのは、本が開かれるアニメーションが、「行きすぎ」なしにブランドの紹介になっているということです。
ロゴはもっと楽しめる
ながらく、ロゴはほとんど静的なリソースと考えられてきました。 しかし、CSS、JavaScript、SVGの機能を組み合わせることで、ロゴはインタラクティビティを追加できる機会になります。 ロゴに関わることは、ブランドと関わることと等しいですから 、ロゴをインタラクティヴなものにすることは、サイトにもう1つ機能を追加するというだけでなく、ブランド認知度向上を向上させる絶好の手にもなるのです。
※本記事は、10 Incredible Logos Built With CSS, JS & SVGを翻訳・再構成したものです。
関連記事
おすすめ新着記事
おすすめタグ