• Web

グリー株式会社

制作領域:デザイン|イラスト|動画|フロントエンド

グリー株式会社様の「GREE Tech Conference 2023」のロゴ、LP、SNS用画像、アタック動画を制作いたしました。
今年のテーマは「 Interconnected 」
「異なる専門領域に属するエンジニアたちが共に学び、インスピレーションを得る場。お互いに刺激し合い、相互学習を行うことで、共に成長できる場を提供したい」という想いがあります。
まずはテーマ「 Interconnected 」を元に、ロゴの制作から着手いたしました。

▼ロゴデザイン
社内デザインチームで「 Interconnected 」をそれぞれメンバーでロゴに落とし込み、案だしを行いました。全部で14案のご提案をいたしました。

その中の
【案①】
イラスト:線と丸のモチーフを連ねサークルを作ることで「相互関係」を表現
文字:イラストのモチーフに似たフォントを選定
カラー:グラデーションを使用し境界のない「繋がり」を表現
に決定いただきました。

クライアント様からは
──────────────────────────────────────────────
・大勢の人を巻き込んでいる感を出したく、サークルにどんどん人が集っていく様子がちょっと伝わりにくいので再提案いただきたい
・関連会社のロゴカラーを反映させたものも見てみたい
──────────────────────────────────────────────
といただいたため、さらにブラッシュアップを行いました。

【案①修正案】
・2つのサークルが同じリズム感であるため、3、4つ目のサークルも作りリズムを変え、どんどんとサークルが生まれそうな予感を表現。
・線の太さも中心(スマイル)に行くほど太く、相互の影響を受けている様なグラデーション色の線で表現。
・逆に外側に行くほど細く、相手の影響を受けていない単色の線で表現し、色々な長さが存在することで多様性を表現。
同系色案と関連会社色(レインボー色)案との2案をご提案し、関連会社色(レインボー色)案に決定いたしました。
また、追加素材としてバナーなどで利用するためのサークルが3重のもの、黒色背景でロゴ白抜きのものを制作し納品いたしました。

▼LPデザイン
基本的には2022年度の構成に準じていますが、ロゴの世界観を表現するよう努めました。

<メインビジュアル>
ロゴの中心(スマイル)に集まっていく線達を動きで表現するため、メインビジュアルはロゴを中心に回転するアニメーションにいたしました。またパラパラ感を出すため内側と外側で異なるスピードにしています。
当初動画で実装予定でしたが、画質が荒い、ループがうまく繋がらない等の問題があったため、アニメーション素材の輪を1つ1つSVGで書き出し、個々をCSSで回転させることにより、様々なディスプレイでも問題なく表示されるようにいたしました。

<コンテンツ>
ロゴの特徴でもある「線」を強調させるため、コンテンツを線で囲い、タブUIやリスト等も線ベースのデザインにし、見出しのフォントもロゴと同様のフォント(Beon)を用いることで、世界観を統一させました。

<タイムテーブル>
コンセプトでもある「異なる専門領域に属するエンジニアたち」が掲載されるエリアのため、カラーを多様性を表す虹色にしました。ただし色によっては白文字の視認性が悪くなってしまうため、やや黄色の明るさを落とす調整をしています。

<SNS画像>
登壇者ページをSNSで共有した際に表示されるカードも、LPと同じくロゴの世界観を合わせて虹色の線を使ったデザインにいたしました。

▼アタック動画
決定したロゴをベースに、
「マークが呼びかける」「人が集まってくる」「影響を与え合う」「Interconnectedする」
上記のキーワードが伝わるような、25秒ほどの動画を作成してほしいとのご依頼でしたので、ロゴのモチーフとイベントテーマ「Interconnected」を基に絵コンテのイメージを膨らませていきました。
そうして、ロゴに使用しているマークから連鎖的に広がっていくイメージで絵コンテを作成いたしました。

①絵コンテ_初稿

こちらの絵コンテをクライアント様にご確認いただき、以下のようなフィードバックをいただきました。
──────────────────────────────────────────────
「マークが呼びかける」
「人が集まってくる」
「影響を与え合う」
上記はうまく表現できているが、テーマである「Interconnected」をもっと表現したいため、影響を与え合い相互作用するイメージが欲しい
──────────────────────────────────────────────
これを踏まえ、スマイルの登場シーンをカットし、周囲の円がスマイルの影響によって集まる方向性に修正しました。
具体的には、スマイルが波紋のように拡縮したあと周囲の円が順にスマイルに近づき、同じように波紋のように拡縮して次の円にも同様に広がっていきます。
さらに円の軌跡が徐々に伸び、一緒に回転する色が増えていくようにし、影響を与え合って広がっていくイメージをより感じられるようにいたしました。

②絵コンテ_修正

こちらで大まかな方向性はFIXしたので、続いて清書とアニメーション付けの作業に進行いたしました。
アニメーションを付ける際に注意していたのは、動きが単調にならないようにすることでした。拡縮、集合、回転、軌跡が伸びる、などのアニメーションが連動していくことと、色が混ざり合う回転の速度などを一定ではなく、なめらかな緩急を付けることによって、視覚的に気持ちよく情報が入っていき、スムーズにロゴの登場シーンに繋げるという意図があったためです。
初稿で大まかなOKはいただいたので、最終的に軽微な調整を行いFIXしたのが以下の動画になります。

③最終稿

▼ロゴ展開
最後に、昨年同様、制作したロゴを使用し様々なイベントアイテムへと展開いただきました。

グリー株式会社様「GREE Tech Conference 2023」LP