Blenderを使用した「GO GX」ウェブサイトの3DCGアニメーション制作過程

GO株式会社さまが推進する脱炭素サービス「GX（グリーントランスフォーメーション）」事業。
neccoでは、GX事業を分かりやすく表現するためのウェブサイト制作、ダウンロード資料制作、実績記事・メディア記事制作をお手伝いしました。

GO株式会社の脱炭素サービスGX（グリーントランスフォーメーション）

アドベントカレンダー3日目はメインビジュアルで使用している、EVが導入されている世界を表現した3DCGアニメーションの制作過程をご紹介します！
モデリングからレンダリングまでBlenderを使用して作成しています。

3DCGアニメーションの制作にいたるまで

制作開始当初は電気をイメージしやすい稲妻や車をメインで使用したメインビジュアル案を作成していました。
GOさまから「抽象度が高いと実際にサービスがあるように見えない」というフィードバックをいただき、
メンバーで話し合い「実際にEVが導入されている世界をつくったほうがいいかも？」という結論にいたります。
ここから3DCGでの街づくりがスタートします！

3DCGラフ案

まずはラフ案の作成から始めます。
GX事業からエネルギーやEV、充電ステーションなどに繋がる様子をイメージできる街をBlenderで作成し、繋がりのイメージや全体のトーンなどをGOさまとすり合わせていきます。

この段階ではロゴとの繋がりしかない状態だったので、「中心（GXロゴ）から電気を共有する見せ方にすると「電気を供給しているイメージ」が強すぎるかも。」というフィードバックをいただきました。

フィードバックを踏まえ、GXロゴからの繋がりに加え、各事業同士の繋がり、そしてそこから更に広がっていく世界を表現していきます。

このラフを作成したあとに改めて、この3DCGで事業内容を伝えられるかを考えました。

• 空想の世界ではあるのでまだ説得力が足りない
• 現実っぽさが足りない
• 普及しているイメージを伝えるためにEV車両を街中に走らせてみてもいいかも！

という話し合いを経て、ラフ案を作成した「事業全体像」に加え、
「EV車両目線の事業が普及した街並み」の2部構成にすることにしました！

アニメーションシナリオ

次に阿部さん夏井さんとアニメーションシナリオを作成していきます。
先程の構成を具体的に絵として落とし込み、ざっくりとしたカメラワークを決めていきました。

後半シーンの3DCGラフ案

アニメーションシナリオが固まったので、後半部分「EV車両目線の事業が普及した街並み」のラフに取り掛かります。
EV車両を俯瞰している目線の街並みを作成していきます。
この段階ではPLATEAU（プラトー）からダウンロードした実在する都市のモデルを使用していました。
PLATEAUとは国土交通省が手動する3D都市モデルのオープンデータ化プロジェクトです。
ラフでは新宿のモデルを使用しました。

PLATEAU [プラトー]

カメラワークイメージ

普段はモデリングの工程が完了したあとにカメラワークを考えることが多いですが、今回はラフの段階でカメラワークを考えていきました。
GXロゴの寄りからカメラを引いて事業の全体像を映し、「GOさまが推進するGX事業」ということが伝わりやすくするカメラワークにしています。

前半シーンの作り込み

前半の街のつくりこみを進めていきます。
EV車は購入したモデルを使用していますが、EV車以外のオブジェクトは1からモデリングをしました。

街のレイアウトはランダムやグリッドなどのパターンも考えてみました。
ランダムだと進める道が限られてしまい、ネットワーク的なイメージとは離れてしまうと考え、様々なルートがあるグリッド案で進めていきます。

充電器はラフの段階から長い間、箱や箱ベースのものでしたが、
ここを作り込むことでぐっと事業の内容が見える3DCGになっていきました。

作り込み過程での気付き

リアルなモデルとデフォルメされたモデルが混在していると、リアルなものに自然と目が行きます。
それを踏まえ事業に関わる重要な部分をリアルに作り込んでいきました。
デフォルメのモデルには、ガラスなどの素材を取り入れ、自然なクリアさを表現しています。

前半シーンのブラッシュアップ

ブラッシュアップを進めていきます。
画像をSlackに貼りレビューしてもらったり、
視点を変え、レンダリングした画像をiPadで眺めつつ調整したい点を書き込んでいき、
またBlenderに戻り調整する作業を繰り返していきました。

後半シーンの作り込み

続いて後半のEV事業が普及した街並みシーンを作り込んでいきます。

ラフの段階で使用していたPLATEAUのモデルは実在する街並みです。
このまま使ってしまうと、現実と違う部分がでてきてしまい混乱させてしまう可能性があります。
そこで後半も実在しない街を作っていくことしました。

作り込みを進めていくうえで、前半のトーンは踏襲しつつも、よりリアルさを出す必要がありました。
リアルな要素として街路樹や街灯の間隔や、道路や中央分離帯の幅、一般的なビルの高さなどを調べつつ1/10のサイズで作っていきました。
同時に充電スポットなど事業のモデルにフォーカスした画角からも絵になるよう、配置を意識して作り込んでいきます。

後半はまっすぐに進んでいく車を追うようなカメラワークにしていたので1本の道沿いにモデルを配置していきました。

完成🎉

後半も完成したタイミングでアニメーションレンダリングします。
ガラスや光源が多かったので一つのシーンに3日くらいかかりました…！
レンダリング中はBlender使えなくなってしまうので次回からはオンラインレンダリングを使うことも検討したいです。
最後にAfter Effectsでカラーグレーディングを行い完成です！

404エラーページは夜バージョンのアニメーション

ウェブサイト内でページが見つからなかった時に表示される、404エラーページには夜バージョンの映像を入れています。
日中とは違う雰囲気でライトが映える3DCGアニメーションになっているのでぜひご覧ください。

3DCGを取り入れるメリット

メインビジュアル用に3DCGアニメーションを作成しましたが、充電器やEV車にフォーカスした画角でも絵になるよう作り込みを進めていったので静止画のパターンも数多く作成することができました。
画角や被写界深度が変わるだけでもイメージが変わるので3DCGの特性を活かすことができたと思います。

GO Chargeへの展開

GO株式会社さまがGX事業の一環として開始した「GO Charge（GOチャージ）」は、電気自動車（EV）の急速充電スポット検索から予約、決済まで完結できるサービスです。

neccoでは、法人向けと個人向け、2つのGO Chargeサービスサイト制作をお手伝いしました。サービス内容や利用方法をわかりやすく伝え、多くの方にご活用いただくための情報設計、ライティング、デザイン、実装、3DCGデザイン・アニメーション制作などを行いました。

GO Charge（法人向け）
GO Charge（個人向け）

GO Charge法人向けと個人向けのメインビジュアルはGO GXの前半シーンのアニメーションを展開したものになっています。

充電中のEV車にフォーカスした法人向けのアニメーションと、充電スポットの検索から充電中の人にフォーカスした個人向けのアニメーションになっています。

法人向け

個人向け

最後に

数秒の短いアニメーションは作成したことがありましたが、今回のようなシナリオがあるアニメーションを作るのは初めてでした。
プレッシャーもありましたが、事業の内容をしっかりと伝えられる3DCGアニメーションになっていると思います。

制作を通してあらためてリアルなものを知っていく大切さを学びました。
デフォルメされたものを作成する場合もリアルを知り、ものに対しての解像度を高めていくことで説得力のある3DCGを作成できると考えています。
今後も3DCGに限らず、イラストやデザインもそれらを意識し良いものを作っていきたいです。

制作実績

neccoでは3DCGの他、GX事業を分かりやすく表現するためのウェブサイト制作、ダウンロード資料制作、実績記事・メディア記事制作、GO Chargeサービスサイト制作をお手伝いしています。制作実績もぜひご覧ください！

GO株式会社の脱炭素サービス「GO GX」サービス・メディアサイト
EV急速充電サービス「GO Charge」サービスサイト

雑誌や書籍にも掲載されました！

GO GXのウェブサイトがネットビジネス情報誌「Web Designing」2024年4月号と「Webサイトの配色見本帳　実例で身につくWeb配色のセオリー」に掲載されました！
多くの素敵なウェブサイトと一緒に掲載していただき、大変光栄です✨️

雑誌掲載のおしらせ | GO GXのウェブサイトが「Web Designing」4月号に掲載されました
GO GXのウェブサイトが書籍『Webサイトの配色見本帳』に掲載されました

CSS Nite「チームでつくるデザイン。neccoの舞台裏」

 6月28日（金）に開催されたCSS Nite「チームでつくるデザイン。neccoの舞台裏」でも3DCG制作についてお話しています！
3DCGのほか、ご依頼の背景からウェブサイト・オウンドメディア・サービス紹介資料の制作過程など盛りだくさんの内容になっています。
イベントページにアーカイブ動画・資料購入のご案内があります。よろしければご覧ください！

明日の「neccoアドベントカレンダー2024」は夏井さんの文章術！！

12月4日のアドベントカレンダーはエディター夏井さんのわかりやすく伝える文章術です✨️
いつも素敵な文章を書く夏井さんの記事、とても楽しみです✨️
この制作過程を書くのに1年くらい経ってしまっていたので記事を読んで勉強しようと思います💪

---

📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

🤝 一緒に働きませんか？

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。

• フロントエンドエンジニア
• アシスタントフロントエンドエンジニア

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。

（2024年11月時点）