まいけるのVookスクール（モーショングラフィックスコース）体験記 Vol. 5：新章“モーションロゴ”の元素材を作る、グラフィックデザインが楽しい

皆さんこんにちは！
Vook編集部のまいけるです。

Vookスクール「モーショングラフィックコース」体験記第5弾。
インフォグラフィックスを学んだ第2章が終わり、第3章へ。今回は、これから学習していく“モーションロゴ”について初心者なりに思ったことを書いてみます。

モーションロゴって何ぞや

亀ペースで第3章に突入したわけですが、この章では汎用性のある”モーションロゴ”をメインに学んでいくとのこと。

モーションロゴとは？
文字通り、動く文字という意味でしょうが、ふわっとしたイメージしか沸かなかったので勉強のためにちょっと調べてみました。

こちらの記事が分かりやすかったです。
モーションロゴ｜アニメーションで企業コンセプトを伝える by SEVEN DEX
https://sevendex.com/post/846/

記事にも書かれている任天堂のCMが昔から大好きです。新しいゲーム機の発売に合わせて流れるCMが、毎度シンプルなのに機械の特徴の表現がわかりやすくてカッコ良くて、見れば見るほど欲しくなるという。

世代的には、タッチパネルをちょんっと突っつくアクションをグラフィックスで表現したDSのCMがすごく好きで、小学生ながらPCで検索して見漁っていた記憶があります。

ロゴって意識せずとも意外と脳内に勝手に刷り込まれているので、配色やフォントだけで〇〇の店のやつだ！　と大体わかりますが、それにモーションが付くことによって、より印象深く何年経ってもこうして頭の中に残るものになっているのかも。

動かす前に、グラフィックデザインを学ぶ

なんか語ってしまいましたが、カリキュラムに戻ります。

まずはモーションさせるためのロゴをデザインしないと何も始まりません。
動かす素材となるグラフィックデザインを学んでいきます。

そこで、カリキュラムで用意されたテキスト素材がこちら。

この素材を元に、文字の大きさや配色、並べ方をアレンジして全体のデザインを作っていきます。

1作目は、直感でこんな感じにしてみました。

学校だから、とっつき易いデザインが良いかなと思い、四角よりは易しさを感じる（？）円形に並べてみました。

メンターさんからは「なかなかアグレッシブなデザインですね」と恐らく悪くはない評価をいただきましたが、やはり再提出！

さらに“良い”ものにするには、基本的にこの観点でデザインすべきとのこと。
①一般的なセオリー
②意味合い
③読みやすさ・面白み

アドバイスを元にブラッシュアップしていきます。

まずは、こういった上下や左右で対になるレイアウトの場合は「線対象になる」ということが重要なため、ガイドラインを作って合わせてみましょう、と下記のようにガイドラインを用意していただきました。

揃えたつもりでしたが、こうして見ると微妙にズレている。詰めの甘さが出ている。

次は、この文章の中で特に強調したい部分、優先順位を意識して見直していきます。
「映像学校」という物理的なサービスを強調するなら？
「才能と出会う」という事象にフォーカスするなら？
1文全体で意味を成しているとしても、あえて優先順位を付けると見え方が変わってくるとのこと。

アドバイスを元に、ガイドラインを作って正しい円形にして、強調したい部分を選んでみました。
そして再提出したのがこちら。

この文章の中では、ただの学校ではなく“映像”の学校という部分に強調の優先順位を付けるべきかなと考え、文字をより大きく。また、1番目立つド真ん中に「と」が配置されていた点も優先順位の観点で見ると微妙だったので修正しました。
微妙な違いではありますが、美しくメリハリが出せたかと思います。

最後に、再提出に対するメンターさんからのメッセージを。
デザインやモーションは、正解の無いものだからこそ、場合によっては個性や特徴に繋がります。いくつか候補を作ったり試行錯誤が必須になり、途中まで作って別案に移ったりもよくあることなので、レイアウトする対象や目的に合わせて柔軟に考えていきましょう！

はい！

次回は、この文章をひと文字ひと文字に分けてモーションを付けていきます。
果てしない作業ですが、がんばります。