ブログ

アニメーションの参考に!「モーションロゴ」実例

コラム
2021.05.25
前回の記事では、近年「モーションロゴ」のメリットや、「モーションロゴ」の必要性が高まっている事についてご紹介しました。

 

今回は、「モーションロゴ」の実例と共に、ロゴをどのようにアニメーションさせれば良いのか、参考になるポイントと共にご紹介します。

ぜひ、アニメーションのアイデアのヒントにしてみてください。

 

 

 

「モーションロゴ」実例

ロゴのデザインには、シンボルマーク(図形)のあるロゴと、シンボルマークの無いロゴ(文字のみ=ロゴタイプ)があります。

ロゴの定義

シンボルマークの有無によって「モーションロゴ」の実例をまとめましたので、それぞれでどのようなアニメーションになっているのかについても、注目して見てみてください。

 

 

シンボルマーク無しの「モーションロゴ」

アマゾンジャパン

https://youtu.be/8WV7adXuD6s

引用元:Amazon Japan Official | Amazon 日本ストア CM 「見つけてほしい日本が、あります」

 

大手ECサイトの「Amazon(アマゾン)」の「モーションロゴ」です。

“amazon”の文字の部分はそのままで、“矢印”の部分だけがニッコリと微笑むようなアニメーションをしていますね。

 

「Amazon」ロゴの“矢印”のデザインには、下記の2つの意味が込められています。

 

・アルファベットのaからzまで(a→z)、つまり“何でも揃う”ECサイトである

・買い物をした顧客が満足した笑顔

 

“矢印”は静止状態のロゴでも笑顔に見えていましたが、「モーションロゴ」によって“矢印=笑顔”の印象が一層強くなったように感じられます。

 

アニメーションとしては派手さも無くシンプルなものですが、その分、印象もシンプルになり、記憶に残りやすくなっています。

 

 

 

明治安田生命

https://youtu.be/FLSblXhiRxQ

引用元:公式チャンネル明治安田生命 | CM「新しい寄り添い方」篇

 

生命保険会社「明治安田生命」の「モーションロゴ」です。

 

ロゴの黄色いワンポイント部分は、“お客さまの暮らしをあたたかく照らす「陽光」”(明治安田生命Webサイト 会社概要より)との事。つまり、“太陽”を表しているので、アニメーションで転がす為に丸くしたのではなく、きちんとした理由があって丸い形をしていたのです。

 

こちらのロゴは、帯の中にロゴタイプ(文字ロゴ)があり、アニメーションさせにくそうなデザインをしていますが、黄色いワンポイントの意味(陽光)と形を上手く利用したアニメーションに仕上がっています。

 

 

 

永谷園

https://youtu.be/skw6omI8WLo

引用元:永谷園公式 | 【おいしい保存食】永谷園「災害備蓄用フリーズドライご飯」

 

「お茶づけ海苔」で有名な「永谷園」。この「モーションロゴ」は、テレビCMで見て印象に残っている方が多いのではないでしょうか。

 

“永谷園と言えばお茶漬け”という事をそのままアニメーションにした、コンセプトが非常に分かりやすい「モーションロゴ」です。

 

ロゴに込められたデザイン(企業理念や社風など)をアニメーションとして表現するのではなく、“◯◯(会社)と言えば△△(商品またはサービス)”といった具合に、会社と商品またはサービスなどを結びつけてターゲットやユーザーの印象に残したい場合に、このような「モーションロゴ」にするのも良いでしょう。

 

 

 

シンボルマークありの「モーションロゴ」

エステー

https://youtu.be/yCQkG5zBhNk

引用元:エステー宣伝部ドットコム | 消臭力「CM消臭力」篇 30秒

 

消臭剤や防虫剤などを販売している、日用雑貨メーカーの「エステー」です。

「エステー」のロゴと言えば、可愛らしい“ひよこ”のシンボルマークが印象的ですよね。

 

シンボルマークありのロゴは“シンボルマークをアニメーションさせる”パターンが多く、この「モーションロゴ」もそのパターンになります。

 

勢いよく飛び跳ねて現れる“ひよこ”はつい目で追いかけてしまうので、“エステー=ひよこのシンボルマーク”が印象に残りやすくなっています。

 

「明治安田生命」の「モーションロゴ」でもありましたが、“跳ねる動き”は元気が良く、ポップで明るい印象を与えるアニメーションです。

 

 

 

エイベックス

https://youtu.be/NdmShYgDf4E

引用元:avex | 東方神起 / LIVE TOUR 2019 ~XV~ PREMIUM EDITION SPOT (15sec)

 

音楽事業を中核とするグループ会社「エイベックス」の「モーションロゴ」です。

 

“avex(エイベックス)”の“a”が、手前から奥に下がりながら描かれるアニメーションが印象的ですね。

 

“a”のシンボルマークは“メビウスの輪”をモチーフにデザインされています。(エイベックスWebサイト ニュース2017 プレスリリースより

その為、平面的な帯状から不思議な立体感のある“a”に変化する様は、“メビウスの輪”を連想させるアニメーションとなっています。

 

「シンボルマークが(エステーのような)キャラクターじゃないと、アニメーションさせにくいのでは…」と思われるかもしれませんが、文字のシンボルマークでも、工夫次第で十分印象的なアニメーションにする事ができます。

 

 

 

マツダ

https://youtu.be/x7c4IjNj7lY

引用元:Mazda Official Web | MX-30: HUMAN MODERN(ヒューマンモダン)15秒版

 

自動車メーカーの「マツダ」の「モーションロゴ」で、こちらも文字がシンボルマークになったデザインですね。

 

“輝き”のアニメーションは“綺麗”や“高級感”といった印象に、“起き上がる”や“ふわっと浮かび上がる”といったアニメーションは“かっこいい”や“おしゃれ”といった印象になるので、こちらの「モーションロゴ」からは高級でかっこいい印象を受けます。

 

静止状態のロゴでは単に“立体的なロゴ”といった印象しかありませんでしたが、この「モーションロゴ」は「マツダ」のイメージを格段に高めたように感じられます。

 

 

 

「モーションロゴ」の番外編

東芝

https://youtu.be/lJeRY_y1p1g

引用元:東芝CM公式  | 【TOSHIBA】エレベーター「人とテクノロジー」篇

 

電機メーカー「東芝」の「モーションロゴ」は、これまでご紹介したものとは少し毛色が違うものになっています。

一見「東芝」と関係無さそうな、ロゴにも用いられていない“幾何学形”のデザインがアニメーションに登場していますね。

 

実はこの“幾何学形”は「東芝」のグラフィックモチーフとなっていて、“東芝グループの高度な専門性と技術力に基づく精緻さや正確さ”を表しているとの事。(東芝Webサイト ビジュアルシステムより

 

“幾何学形”は「東芝」のWebサイトを始め様々なツールのデザインに使用されていて、ロゴとは別に“東芝っぽさ”を創り上げる要素となっています。

 

ロゴを「手前から奥に下げる」という最小限のアニメーションにして注目させ、“幾何学形”のアニメーションで「東芝」の“想い”や“姿勢”を表現する…「モーションロゴ」だからこそ伝えられる想いですね。

 

家電メーカーのようにロゴデザインがシンプルで、ロゴ自体にあまり特定の印象を持たせたく無い場合に、「東芝」のような“ロゴ以外の要素(色や形)で表現する”のもひとつの方法です。

 

 

 

ロゴに動きが加わると、何だかおしゃれでかっこよく見えますよね。

ですが、「モーションロゴ」は“とりあえず動かせば良い”というものではありません。

ターゲットやユーザーに与えたい印象とロゴのアニメーション(動きや表現)が合っていないと、“ロゴがただ動いているだけ”になってしまいます。

 

「モーションロゴ」を作る際もロゴを作る時と同じように、“とりあえず”で作ってしまわないようにしましょう。

 

 

「モーションロゴはまだ必要ないけど、ロゴは作ってみたいな…」と、ロゴ作成に興味を持たれましたら、ぜひ【ココロゴ】のWebサイトを覗いてみてください。

ロゴに関するご相談も「お問い合わせ」で受け付けておりますので、お気軽にお問い合わせくださいね。

 

ロゴデザインを依頼   ココロゴが選ばれる理由