「インパクト」と「メッセージ」を同時に伝える秀逸なロゴのアニメーション20作品まとめ


人々にインパクトを与えるロゴを作るのは骨の折れる作業ですが、さらにそこに「動き」を加えるのは至難の業。しかし、うまくいけば見ている人にメッセージを伝えつつロゴを「魅せる」ことも可能ということで、ニュースサイトのMediumMuzli Design Inspiration上で公開されている秀逸なロゴ20選を公開しています。

Logo Animations — Muzli -Design Inspiration — Medium
https://medium.com/muzli-design-inspiration/logo-animations-9b018e3d76c3

ロゴのアニメーション集は以下から。画像をクリックするとアニメーションが確認できます。

◆01:Google(ロゴマーク元)/Adam Grabowski(作者)
2015年にGoogleが2年ぶりに刷新したロゴデザイン。4つのドットが緩やかに波打っている時は「話を聞ける状態だよ」ということを示すなど、ドットの動きで音声検索の状態を教えてくれます。


◆02:DesignersMXSeth Eckert
自分がデザインした作品を公開したり、求めるデザイナーを探せるウェブサイトDesignersMXのロゴは、勢いがあるポップな動き。


◆03:Motion Authors Animation StudioValentin Kirilov
アニメーション・スタジオのMotion Authorsのロゴは、再生ボタンのアイコンが勢いよく動くアニメーション。


◆04:Muzli Design InspirationReuben Rosh
デザインに関する記事を掲載するMuzli Design Inspirationはロゴの頭文字「M」が朝食になるデザイン。朝食がわりにネタをどうぞ、という意味かも。


◆05:Muzli Design Inspiration/Tony Babel
また、宇宙人に「M」が連れ去られそうになるデザインのロゴもあります。


◆06:Focus LabWilliam Kesling
Focus Labの運営するサービスの1つ500pxは、「500px」の文字が以下のような形に変形。


◆07:IKEANikita Melnikov
いわずと知れたIKEAのロゴのアニメーションもあります。


◆08:コンセプトデザイン/SFCD
「P」の文字が本のように開くコンセプトデザイン。


◆09:Ask Me AnythingDavid Stanfield
ビル・ゲイツCERNも質問に答えた、海外掲示板redditで開催される有名人Q&Aコーナーの「AMA(Ask Me Anything)のロゴのアニメーションはこんな感じ。


◆10:RocketgraphTony Pinkevich
自分が運営するサービスがSNS上でどのように見られているのかを解析してくれるRocketgraphのロゴはその名の通り、ロケットが発射するアニメーションになっています。


◆11:MacawJoe Ski
コードを「書く」ことなく直接「描く」ことでウェブサイトが作れるようになるツール「Macaw」のロゴアニメーション。


◆12:BlendJorge R Canedo Estrada
デザインを愛する人のためのコミュニティ「Blend」のロゴアニメーションはワイングラスが頭文字の「b」に変形します。


◆13:Giphy CitySomething Savage
夜景の中にGiphyのロゴマークが現れるデザイン。色もウェブサイトのテーマカラーと同色でまとめられていて、「City」のイメージもばっちり伝えています。


◆14:Kevin Yang
デザイナーであるKevin Yangさんの名前のロゴ。特徴ある「Y」の文字がアニメーションになっています。


◆15:Craft Fig.buatoom
Craft Fig.のアニメーションは勢いよくロゴの文字が書かれるというシンプルかつ印象的なもの。


◆16:Scout /Dave Chenell
テクノロジーの未来について毎週記事を公開するScoutのロゴアニメーション。「ジャーナリズムとSFを融合したウェブサイト」のテーマ通り、少しSFちっくな雰囲気です。


◆17:Fubiz MediaMattias Peresini
ニュースサイトFubiz Mediaのロゴは文字がヘルメットやコンポなど、さまざなまアイテムに変形していきます。


◆18:Fubiz Media/Mattrunks
上記と同じくFubiz Mediaのアニメーション。「f」を囲む円が美しく揺れ動きます。


◆19:Fubiz Media/Mattrunks
さらに、幾何学模様がまるでディズニーのアニメーションのような動きを見せたり……


◆20:Fubiz Media/Mattrunks
ウォーリーみたいなキャラクターが登場したりしました。

・関連記事
AppleがWindowsのロゴを再デザインしたらこんなことになった - GIGAZINE

文字を入力するだけですぐにそれっぽいデザインのロゴ画像が完成する「Squarespace Logo」 - GIGAZINE

Googleがロゴを一新、こだわり抜いたデザインは何が違うのか? - GIGAZINE

ロゴ作りで大事なのはロゴの見た目にあらず、本当に大切なポイントを解説したムービー「What makes a truly great logo」 - GIGAZINE

無料で1970年代NASAのロゴや出版物のデザイン資料がダウンロード可能に - GIGAZINE

強いロゴを作るために必要不可欠な4つのルール - GIGAZINE

132

in デザイン, Posted by logq_fa