本記事は、10月29日〜30日にかけて開催した「CyberAgent Developer Conference 2024」において発表した「若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 | CADC 2024」に対して、社内の生成AI議事録ツール「コエログ」を活用して書き起こし、登壇者本人が監修役として加筆修正しました。
原 佑一 (Ameba Brand Center アートディレクター)
2021年新卒入社。アートディレクターとして、20周年を迎えたAmebaのブランドアップデートを担当。プロダクトデザイナーとして、Amebaブログの新機能のUIデザインやUX改善・Spindleの拡張も担う。CADCでは、2023はアートディレクター、2024はクリエイティブディレクターとして牽引しました。
西山 弥亜 (株式会社CyberE アートディレクター)
2020年新卒入社。NFTプロジェクト「IROIRO」のプロデュースや、eスポーツイベント「RAGE VALORANT 2024 feat.VSPO!」などにて、ビジネス職と兼任でクリエイティブディレクションを担当。
米田 航 (ABEMA Creative Center アートディレクター)
CADC2024 Day2をご覧の皆様、こんにちは。このセッションではオープニングセッションとして、「若手デザイナーチームが手がけるCADC2024 クリエイティブディレクションの全貌」というテーマで、クリエイティブ制作の裏側を余すことなくお届けいたします。
CADCは、社内から集まった有志が技術力を結集し、私たち自身で制作を手がけるプロジェクトです。それではまず、今年のCADC2024で使用されたすべてのクリエイティブをご覧ください。
こちらが、今年のキービジュアルとモーショングラフィックです。
キーグラフィックを使ってロゴも制作しました。
今年のカンファレンスのコピーは「Expanding Inspiration」です。
開催にあたってコンセプトやセッション情報がわかる特設サイトも制作しています。
今年のCADCでは4つのセッションステージも用意しました。
これらすべてクリエイティブチームが監修しています。60を超えるセッションのサムネイルも全て制作しています。
これらのすべてのクリエイティブは、若手デザイナーチームが中心となって制作を進めました。本セッションでは、その制作プロセスを余すことなくご紹介します。
自己紹介が遅れましたが、私はCADC2024のクリエイティブディレクターを担当しております、原佑一と申します。普段はAmebaでブランドのアートディレクションやAmebaブログアプリのデザインを担当しています。CADCには昨年から携わっております。
昨年は2日目のアートディレクションを担当しましたが、今年は2DAYS一体となり、初めて全体のクリエイティブディレクターというポジションに挑戦しました。これから、クリエイティブディレクションにおいて特にこだわったポイントを4つのセクションに分けてお話ししていきます。
コンセプトから一環してアウトプットする体制
まず最初に、「コンセプトから一貫してアウトプットする体制」についてお話しします。運営チームは総勢35名で構成されています。クリエイティブチームは、そのすべてのチームと密接に関わりながら、それぞれのアウトプットに責任を持つ体制を築いています。
クリエイティブチームは12名のメンバーで構成されています。その中で、クリエイティブの中核を担う「コンセプト設計」から「キービジュアル制作」を担当するブランドチームが先導しました。このブランドチームは4名で構成されており、それぞれの部署でアートワークを担当している入社5年目以内の若手クリエイターが揃っています。
ブランドチームは、コンセプトを設計した後、それぞれのメンバーが各アウトプットに加わり、一貫してコンセプトを体現できるようなクリエイティブを目指しました。続いて、「みんなで共通して目指せるゴールを言葉で決める」というポイントについてお話しします。
みんなで共通して目指せるゴールを「言葉」で決める
今年のサイバーエージェントの技術カンファレンスのテーマは「AI活用のその先」でした。このテーマに対し、ブランドチームで案を出し合い、技術役員とも議論を重ねました。こちらは打ち合わせ中に実際に描かれた図ですが、この議論の中で「これまでのプロセスは2次元、そしてこれからのプロセスは3次元」というキーワードが抽出されました。
そこで、このようなテーマを最終的に決定しました。このテーマがすべてのクリエイティブの起点となり、まずはチーム全員が同じ方向を向いて進めるための基盤として設定しました。
ここで意識したのは、この段階で表現を限定的にしすぎないことです。そのため、コピーライクな具体的なフレーズにせず、大まかで柔軟な言葉にとどめておきました。
絵と言葉の掛け合わせでテーマを体現する
ではここから、実際のアウトプット制作についてお話しします。先ほど決定したテーマを軸に据え、これを具体的なアウトプットへと落とし込んでいきます。
意識したのは、アウトプットをあくまでセットとして捉え、コンセプトを体現することです。コピーやビジュアルのどちらか一方だけで考えてしまうと、十分に良い決定ができないと判断しました。そこで、ブランドチームが言葉とビジュアルをセットで持ち寄り、議論を重ねました。さらに、コピーについては弊社のコピーライターとも共同で意見を出し合いながら開発を進めました。
議論を重ねて細部までこだわったコピーがこちらです。技術をリードする弊社としての立ち位置や社内の技術者が自分ごとにできる言葉を意識しました。
ビジュアルは、コピーとの掛け合わせによってコンセプトを体現することを目指し、技術を感じさせる2つのコンセプトをもとに設計しました。さらに、2Daysのビジュアルは同じグラフィックを使用しつつ、色の含有量を調整することで差別化を図りました。
社内のアセットを活用して最速で最高のアウトプットに
最後に、アウトプットを展開する際には、社内のアセットをフル活用し、最速で最高のクオリティを目指しました。特設サイトは、Amebaのデザインシステムである**Spindle**に基づいて構築しています。また、Figmaファイルを公開しておりますので、「CADC2024 Figma」で検索していただければご覧いただけます。
60を超えるセッションのサムネイルは、Figmaを活用して効率的にリサイズまで行いました。このように、本カンファレンスのクリエイティブは、私たち自身の技術力を駆使して作り上げています。この後は、キービジュアルとステージデザインについて、それぞれを担当したアートディレクターが詳しくご紹介します。それではまず、キービジュアルを担当した米田のセッションをご覧ください。
キービジュアルについて
ABEMA CREATIVE CENTERの米田と申します。ここからは、「Expanding Inspiration」というコンセプトをもとに、どのようにアウトプットを形にしていったのかをご説明します。
冒頭で原からも説明がありましたが、今回のコンセプトは「Expanding Inspiration」に決定しました。このコンセプトには、AIが社会にインストールされ、これまでの常識が変化していく中で、AIを活用してインスピレーションを広げていくという思いが込められています。
私は今回、アートディレクターとして「Expanding Inspiration」というワードから着想を得て、このコンセプトに基づいた最適な表現方法を模索しました。CADCのクリエイティブでは、キービジュアルやロゴ、オープニング映像など、多岐にわたる展開物が求められます。そのすべてを通じて、今回のコンセプトが一貫して表現されていることを重視しながら進めました。
最初に着手したのは、キービジュアルとロゴです。その制作にあたり、チームメンバーとともに考えたポイントは、デザインそのものから「拡張」を感じられるグラフィックを作ることでした。
「拡張」というテーマは、もともと2次元だったものを3次元に変えていくことや、平面的だったものが奥行きを持った表現へと進化していくことを意味すると考えました。こうしたイメージをビジュアルに落とし込むことで、コンセプトを体現できるのではないかと考え、このワードをヒントにクリエイティブ制作を進めました。議論を重ねた結果、ひとつのオブジェクトが完成しました。
もともとは、多様性を表現したグラデーションの平面的な円がありました。それが重なり合うことで、2次元のデザインが3次元的に見えるようになるという点を、今回のクリエイティブを展開する上で重要なポイントとし、このオブジェクトを基軸に展開していきたいと考えました。しかし、単に平面的なものを重ねただけでは意味がありません。その重なりを整えることで、AIが広がり、拡張していくというコンセプトを表現するだけでなく、人間がしっかりと形を整え、秩序をもたらしていくという要素も表現したいと考えました。
こうして決定したオブジェクトをもとに、次はそれをロゴへと展開しました。このロゴも先ほどのオブジェクトの表現を取り入れ、コンセプトを視覚的に伝えるデザインに仕上げています。
こちらのロゴも、円が重なり合うことで構成されています。もともと平面だったものが重なり合うことで立体的に見えるようなデザインに仕上げています。この構成により、拡張性や進化を視覚的に表現しました。
今回のCADCは2022年、2023年に続き、2024年を迎えました。これまでのロゴデザインはどちらかというと平面的なものでしたが、今回は内容的にもAIを活用した新しいイメージを与えたいと考え、CADC自体のシンボルを立体的なデザインにすることで、さらに新しさを印象づけられるように制作しました。
このロゴについては、当初サイバーエージェントカラーだけを用いる案も検討しました。しかし、新しい様々な要素が混ざり合って生まれるというコンセプトを伝えたいという考えから、ロゴにはサイバーエージェントのカラー以外にもピンクや青といった色を取り入れる方向になりました。
その後、多くの検証を重ねた結果、今回のロゴデザインが完成しました。
このロゴの色の割合にもかなりこだわりました。最初は赤系や青系の色を多めに取り入れていましたが、全体を通してパッと見たときに、このカンファレンスがサイバーエージェントによるものであることをしっかりと伝える必要がありました。そのため、サイバーエージェントを象徴する緑の印象を残しつつも、部分的に青や赤を取り入れる形でバランスを調整しました。この色の割合についても何度も検証を重ね、最終的に現在のロゴが完成しました。
そして、これらの要素を組み合わせて完成したキービジュアルがこちらです。
先ほどお話ししたオブジェクトやロゴをしっかりと組み合わせ、全体を通して「拡張」や「前進」を感じられるようなビジュアルに仕上げました。今回のビジュアルでは、質感にも大いにこだわりました。AIと聞くと、最先端のデジタル的な表現を思い浮かべる方が多いと思いますが、今回私たちはそのデジタル的な側面を表現しつつも、AIによって世界が広がり、選択肢が増える中で、それを人間が適切に活用することの重要性も伝えたいと考えました。そのため、デジタル的な要素に加え、あえてアナログ的な表現も取り入れています。例えば、微妙なノイズ感や手触りを感じさせる質感を意識的に残すことで、デジタルとアナログが共存するバランスを調整しながら表現しました。
キービジュアルが完成した後は、それを動画のサムネイルにも展開しました。冒頭でお話ししたように、オブジェクトを1つ決めていたことで、サムネイルのように大量生産が必要なアウトプットも、オブジェクトの色を変えたり配置を調整したりするだけでスピーディーに展開することが可能になりました。キービジュアルの世界観をしっかりと保ちながらも、登壇者が円の空間に立っているような演出を加え、思わず動画を見たくなるようなワクワク感を表現することを意識して制作しました。
次に、オープニングとサウンドについて説明いたします。CADCでは動画配信の冒頭にオープニング動画を制作していますが、今回はキービジュアルがどのように動くのかという視点からディレクションを行いました。
今回のモーション制作においても、キービジュアルと同様に「質感」にこだわることが重要なポイントだと考えていました。この制作では、3D CGを専門とする制作会社さんと協力し、まず質感の認識をお互いにしっかりと共有するところからスタートしました。具体的には、モーションを作る前にワンカットを試作してもらい、今回のスライドに表示されているようなシーンをもとに質感を確認しました。特に、キービジュアルで表現したノイズ感や手触り感をモーションでもしっかりと再現することを意識し、このカットを基準として制作を進めました。
質感の共有が終わった後は、いよいよモーション制作のフェーズに入りました。私自身がグラフィック出身ということもあり、実際にモーションを考える際には「こういうカットがあったらいいな」と思うシーンをまず1枚ずつ丁寧に作り込みました。それをもとに制作会社の方々と打ち合わせを重ね、具体的な動きに落とし込む形で進めていきました。動かし方やつなぎ方については、理想とする参考動画を提示しながらディレクションを行いましたが、特に「このカットだけは絶対に欲しい」というような展開上必要不可欠なカットについては、事前にしっかりと作り込んで明確に伝えることを心がけていました。
こちらは、そのコンテの一部になりますが、先ほどお話ししたように、自分たちが欲しいカットを明確に示しつつ、全体の流れがしっかりと理解できるようにコンテを制作しました。このコンテを基に、モーション制作を進めてもらっています。非常に細かい部分ではありますが、例えば音に合わせて色を変えてほしい箇所や、特定の瞬間に見え方や視点の切り替えを行ってほしいなど、細部まで具体的に指示を明記しました。これにより、納得のいく仕上がりを目指し、細かな要素も妥協せずに進めました。
こちらは、モーション制作の途中段階での動画を比較したものです。
最初のモーションでは、筒がまっすぐシンプルに動くという表現でした。しかし、チームで話し合った結果、「もっと動きがあったほうが見ていて面白いのではないか」という意見が出ました。また、この動画のカットは視点切り替えの場面でもあり、特に重要なカットのひとつでした。そのため、視聴者がワクワクできるような動きを意識し、直線的な表現を見直しました。具体的には、筒や円そのものが動きながら、カメラも同時に動いていくダイナミックなモーションに変更しました。制作会社の方々と密にやりとりを行いながら、この重要なカットをより魅力的に仕上げることを目指しました。
こちらのカットですが、オープニング動画の最後にロゴが登場するシーンです。このロゴは、円が重なり合って形成されていくというコンセプトがもともと共有されており、動きの方向性についてもチーム内で共通認識がありました。しかし、実際に制作してもらった際に、「筒の印象が強くなりすぎている」「全体をパッと見たときに緑の筒が目立ちすぎる」といったフィードバックがありました。そのため、円の重なりの幅や配置バランスを何度も調整してもらい、最終的には一目でロゴが美しく形成される様子が伝わる方法を選択しました。こうした試行錯誤を経て、ロゴのコンセプトと美しさが最大限に引き立つ仕上がりを目指しました。
オープニング動画において、モーションも非常に重要ですが、同時にサウンドも欠かせない要素だと考えています。今回は、以前からお願いしたいと思っていた、特徴的な音を作るサウンドクリエイターの方に制作を依頼しました。モーションに関しては、具体的なグラフィック表現を明確に示しながらディレクションを行いましたが、サウンドに関しては、そのクリエイターの方が持つ素晴らしい個性や特徴を最大限に活かしたかったため、言葉でのディレクションを心がけました。
最初の打ち合わせでは、「共存共栄」「拡張」「創造」といったキーワードをお伝えし、動画の構成がある程度決まっていることを共有しつつ、自由に制作していただくスタイルを採用しました。その結果、チームとしても非常に納得のいくサウンドが完成したと思っています。サウンドにはAIが生成されている様子を感じられる効果音が随所に散りばめられており、モーションとも非常に相性が良く仕上がったと感じています。
ここまで、キービジュアルとオープニング動画の制作過程について説明させていただきました。それでは最後に、完成したオープニング動画をご覧ください。
ステージについて
こんにちは。CyberEでアートディレクターを務めております西山です。セッションで使用するステージは、カンファレンスの世界観を視覚的に表現するものであり、最も重要な要素の一つです。ここからは、このステージデザインについてお話しさせていただきます。今回のステージも、CADCのコンセプトである「Expanding Inspiration」を体現することを目指して制作されました。
今回のキービジュアルでこだわった質感を、ステージ上の立体物でどのように再現するかに注力しました。筒状の円が拡張している様子を、アルミのバルブを使用して表現しました。このバルブにスプレーで色を吹き付けることで、細かい質感やニュアンスを再現し、キービジュアルの世界観を忠実に体現しました。
塗装に関しても、全体的にグラデーションがかかった部分を再現しました。スプレー特有のふわっとした質感を残しつつも、曖昧な印象にならないよう、色の境界線は直線的に仕上げました。キービジュアルにできるだけ近づけるために、細部のディティールにまで徹底的にこだわって制作を進めました。
今回のCADCでは、DAY1とDAY2それぞれのイメージカラーを色の含有量で表現することを目指しました。このステージを構成する各パーツは、コンセプトカラーごとに独立して制作されており、それらがすべて組み合わさることで、一つの大きなオブジェクトとして完成しています。一見すると単純な形状に見えるそれぞれのバルブですが、一本一本の太さやうねり具合が少し違うだけでも、全体の印象に大きな影響を与えます。そのため、制作会社の方々と現場で細かく検証を重ね、角度やレイアウト、配置を丁寧に調整しながら仕上げていきました。
続いて、ライティングについてご紹介します。
今ご覧いただいているライティングは、Day2の「Next Session」の際の見え方です。そして、こちらがDay1の「Expert Session」のライティングです。「Expert Session」では、このような雰囲気でお届けしました。照明を活用しながら、全体の色味や影の効果を調整し、各セッションごとに異なる印象を演出しています。
これらのステージ造作を通じて、私たちが持つ無限の可能性や、新たなインスピレーションへの拡張を感じていただけたら幸いです。