プログラミング

プログラミング

【インタラクティブ】CSS、JS、SVGで構築された存在感のあるロゴ10選!

5,404 views

読了時間 : 約3分0秒

最近、CSSを使ってアートワークをまるまるデザインしたり、あるいはより面白くしたりする試みがちらほら見られます。 例えば、ポピュラーなキャラクターをよりパンチのあるものにするのに、デザイナーが一役買っていたりするのです。
同様に、CSS、さらにはJSやSVGが投入されて作成された非常に面白いロゴも見られます。 それらは合わさることで、他のフォーマットではありえないほどの柔軟性をもつという利点があります。
本記事では、そのようなロゴを10例ご紹介します。 オリジナルのものもあれば、有名ブランドのものもありますが、いずれもCSS、JavaScript、SVGのコンボで構築されています。

(イメージをクリックすればCodePenが見られます)

 

 

1.花火アニメーション

このanime.jsロゴアニメーションは、CSSと(もちろん)JSの組み合わせを使用して、カラフルでダイナミックなアニメーションロゴを作成しています。 クールなイントロアニメーションだけでなく、ロゴがクリックされるたびに花火が打ち上がるようになっています。 どこか中毒性さえ感じらます。

 

2.容易なスケーリング

ロゴにCSSを使用することで得られる利点の一つに、SVGファイルのように、あらゆるサイズに合わせた拡大縮小が簡単にできるという点があげられます。 上のShop Talkのロゴの例では、CSSを使用した場合のピクセル単位のスケーリングの卓越性が、PNGとの比較で示されています。

 

 

3.手書き

手書きというにはこの例はもう少しですが、それでも美しいです。 ロゴのスクリプトテキストが、画面全体に手書きされているかのように表示されています。 シンプルですが効果的です。

 

 

4.オープンとクローズ

ロゴの白色が多色の背景に映えています。ただこのロゴの真価は、それに組み込まれている再生/逆再生機能にあります。「プレイ」を押すと滑らかなアニメーションでロゴが表示され、「リバース」で逆再生されます。 これは、たとえば、要素の終了を示す場合などに便利でしょう。

 

 

5.ピュア・クローム

CSSのみと単一のHTML要素で仕上げられているChromeロゴの忠実な再現です。 これは、シームレスな外観と複雑な形状を作成するということにかんして、CSSでどのくらいのことが達成できるかを実際に示してくれているものといえます。 回転ホバー効果も素敵です。

 

 

6.スポットライト

このペンのいずれかのロゴにカーソルを合わせると、カーソルのすぐ上の領域に「スポットライト」効果が与えられます。 この効果によってクールさが増し、相互作用が促されています。

 

 

7.ユニークな描画効果

この例は複数段階のレベルにおいて優れています。 第一に、テクニカルドローイングのような下書きからロゴが完成されるまでのプロセスを見せるアニメーションは、見て楽しいです。 第二に、微妙にアニメーション化されたグラデーションの背景は、シーン全体をとてもうまく補完しています。

 

 

8.有名ブランドの再現

純粋なCSSで再現された有名なブランドロゴのコレクションです。 驚くべきことに、いずれも200行ちょっとのCSSで構築されており、オリジナルのほぼ正確な再現に見えます。

 

 

9.最小限かつ面白いもの

さて、最小限ということと面白みがあるということは、通常一緒に考えられません。 しかし、この場合は違います。 この単純なロゴは、バックグラウンドでアニメーションブロックの虹を使用することで、もともとかなりプレーンなロゴに個性を加えてます。

 

 

10.物語を伝える(繊細さを欠かずに)

アニメーションはロゴの大きな流行の一つですが、時には行きすぎがあります。 この例を魅力的にしているのは、本が開かれるアニメーションが、「行きすぎ」なしにブランドの紹介になっているということです。

 

 

ロゴはもっと楽しめる

 

ながらく、ロゴはほとんど静的なリソースと考えられてきました。 しかし、CSS、JavaScript、SVGの機能を組み合わせることで、ロゴはインタラクティビティを追加できる機会になります。 ロゴに関わることは、ブランドと関わることと等しいですから 、ロゴをインタラクティヴなものにすることは、サイトにもう1つ機能を追加するというだけでなく、ブランド認知度向上を向上させる絶好の手にもなるのです。

 

 

※本記事は、10 Incredible Logos Built With CSS, JS & SVGを翻訳・再構成したものです。

 

 

関連記事

 

【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:1000円分
※さらにメルペイスマート払で2000円分ポイント!
 友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

期間中の金・土限定でd払い利用で最大20%のdポイント還元中!
■エントリー期間:2020/2/29(土)23:59 まで
■キャンペーン期間:2020/2/24/(月)23:59 まで

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

以下のリンクから『プロモーション コードを追加する』で「JP20gd6nv7」を入れてください。初回利用が2000円オフになります!
※プロモコードは日本国内でのみ利用可能

 

2000円オフで登録» »当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber

Uber

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ