"新規のプロジェクトに臨む際には新しい挑戦を必ず設定する"
以前プロダクションでCGディレクターをされていたころから越田スタイルとして伺っていました。

自らの会社を設立しこれまでの業務にくわえ、まったく違う業務もこなし、さらに新たな領域にも挑戦するということは
キャリアにおいて、それまでの集大成であり壮大な試みにもなると思うので スタジオポメロは実験・研究のためのフィールドのような場所なのだろうと捉えていました。

そういった言葉から得たインスピレーションや20年にわたる付き合いから感じている人柄から湧き上がったイメージをデザインのコンセプトとしよう。 それが実験用の研究施設。ラボです。アニメで扱うことの多いSF作品に出てくるようなスタイルがいい。

さらに"Pomelo"という社名との相性もよくストーリーを作りやすいのです。

FirstViewはラボ内部で、Pomelab(ポメラボ)です。
また、中心にはメインのオブジェクトとして開発中(という体)の宇宙船"烈津號"的な球体SFメカを配しました。
PomeRobot(ポメロボ)です。

Patec側でも触発され新しい試みをしようと考え これらのラボを含め多くの画像を生成AIで制作することにしました。

あくまで個人的な考えではありますが、、、 映像やデザインのようなクリエイティブ制作を業としている会社のサイトの場合に既存のストックフォトサービスの素材を利用するのはかなり抵抗があります。
オリジナリティを求める仕事を提供してもらえるのか？という不安を抱かせる可能性を考えてしまうからです。

生成AIであればバリエーションの限界がなく、作成者のプロンプトによるクリエイティビティも担保できるのでとてもよいですね。

aboutページ用の3D出力のCIに関してはイメージも制作手法も固まっていたので 生成AIを使用していませんがその他の画像は全て生成AIでコンセプトに則って出力しました。

これら全てサービス/エンジンにはAdobe Firefly2.0を使用しています。

Xd

ワイヤーフレーム・デザインカンプの中間ぐらいのラフデザインをザクっと作成し、コンテンツの取捨選択やバランスを確認しレイアウトを決定していきます。
Xdで作成したラフデザイン

先方に間違いなく意図を伝えることを念頭にいれ簡素すぎず、しかし作りすぎてイメージが固まりすぎない程度にデザインします。
というのも個人的にはギミックやアニメーションはひらめきによるところが大きく、さらにいえばその瞬間はレイアウトなどデザイン作業時よりも コーディングで少しずつコンテンツを実装し、サイト構築していく中でということが多いので チェック用のデザインにはそれらのための弾力を持たせておきたいという感じです。

また全体のデザインを調整するなかで必要な新規コンセプトイメージも並行して生成していきます。

Firefly 2 (画像生成AI)

Adobe CCに契約していれば使用できると思います。(無料でもつかえるのかもしれませんが詳細不明)
他のエンジンはStableDiffusionしか使用したことはありませんがざっくりとできることは一緒だと思います

ちなみにPomerobotは
元々頭の中では現在のようなポメロ(柑橘:文旦)型メカをイメージが出来ていたのですがAIで生成する際のプロンプトがまずかったのか、思ったようにいかず 前掲のラフデザインの巨大なポメロの果実が配置されていました。
そのままチェックを受けた際に爬虫類的な質感が気になるとのことで、 改めてPomerobot単体を、当初考えていた通りになるようプロンプトの調整を重ね納得できる今の形に至りました。

また、アニメCGが主業務の会社なためトゥーン調のデザインを一枚使用していましたがPomerobotのSFイメージが確定した段階で
全体の統一感から逸脱している感じがあり、同時に先方からも同様の感想があったため再度生成することにしました。
その際、FireflyにはUpdateが行われており、サンプル画像を与えることで生成画像をコントロール可能な機能が追加され
コンセプトイメージから一歩進んだ、最終イメージにより近い生成画像を得られるようになりました。
主にはBlenderやC4Dを使用しプリミティブでねらったレイアウトをつくることで下絵とし プロンプトを与えて画像を生成しました。
プリミティブで作成したレイアウトサンプル Fireflyで生成されたイメージ

Photoshop & AfterEffects

Fireflyで生成した画像をPhotoshopの新機能の生成塗りつぶしなども使用し修正・仕上げました。
BGのベースにするイメージ 周囲に合わせてPSの生成塗りつぶしで作成したイメージ 合成したBGイメージ


素材完パケした画像はAfterEffectsでトリミング・グレーディングしていきます。
Fireflyで生成されたイメージ AEでのグレーディングとトリミング後

テキストエディタはChatGPTを実装しているCursorEditorです。 バンドラーはwebpack5を使用しスクリプトはTypeScriptにしました。
TSで書くの初めてですしJSとは違い型定義がマストなため高いハードルでしたがCursorを使用することで つまづきつつもJSに戻ることなく進めることができました。 優秀なAIによるアシストは初学者にとってはかなり心強いものであり さらにいうと、学習効果も高いと個人的には感じました。

ナビやフッターなど全ページ共通の要素はphpでまとめることにしました。 ポメロwebローンチ当初はレンタルサーバーの仕様などが不明だったのでjsで同様のことをしていましたが、どうにも表示ディレイが気になっており 本サイトで実績のあるphpでの共有化に変更にしました。メールフォームもphpベースのTransmitMailですので スティミュラスイメージのコーポレートサイト制作時と同様に 全体の主だった開発まではwebpackサーバーで、それ以降はphpのビルトインサーバーで進めることにしました。

The Pomerobot in The Pomelab

Fireflyで生成した画像は3DモデルにマッピングするためPSを使用し前景:Pomerobot、背景:Pomelabとして分離しました。 分離後の背景は穴があいてしまい、カメラ画角を変更するとバレてしまうため 周囲とマッチするよう生成塗りつぶししておきます。
その後AEにてグレーディングし、 Cinema4Dでカメラプロジェクションしつつ必要最低限のオブジェクトを造形し そのままUVを展開し再度テクスチャとして使用するため画像を調整しThree.jsで扱える3Dファイルとして出力しました。

Three.jsで3Dモデルを単純にローディングするのはこれまでにやってみたことがあったため問題なくできました。 ただしFBXでテクスチャをインクルードした型式だと、UVと不整合が発生し上手くいかないため UVありテクスチャなしFBXモデルと、別途テクスチャ画像としてファイルを用意することで解決しました。 ローカルサーバーと自社のテストサーバー環境では、、、

本番サーバーへの実装時になんと未知のエラーが発生し3Dモデルがロードされませんでした。 three.jsのバージョンを複数入れ替えてテストしてみましたがダメ。 webとの親和性が高そうなGltfにすべきかと考えましたが、fbxと持っている関数などに かなり相違があるため一旦ペンディングし、ダメ元でOBJでのテストをしてみました。なんとこれにて無事解決できました。 サーバーの仕様で挙動やエラーの有無が変わってくるというのはなかなか対応に骨が折れます。