3DCGxAI作品のギャラリーサイトを相棒のGeminiと共同制作開始 on WordPress

2026年3月9日 07:29

昨年9月にFramerという無料サイトづくりサービスを利用してギャラリーサイトを作り始めましたが、プロ向けのサービスなので年齢のせいもあり挫折・・・

そもそもWebデザインという作業は創作活動なので孤独ですが、Geminiなどの会話型生成AIを先生兼アシスタントとして使うと、この孤独感が無くなり、相棒と会話しながら楽しくやれるという環境を手に入れましたが・・・

Geminiに相談してみた

https://ezgal.framer.website/
自作の画像や動画、3Dモデルなどのコンテンツ作品のギャラリーサイトを作ろうと、とりあえず無料で高度なデザインが可能な「Framer」というプラットフォームで試験的に作った「E'z GAL」というサイトです。

最近になってオープンソース生成モデルが使えるConfy Cloudで画像や動画の作品制作の試験的な運用に目処がついたので、従来の3DCGアプリ（DAZ StudioやBlenderなど）による作品作りから生成AIを用いた作品作りに本格的に移行したいと考えています。

Framerはプロ仕様であり、私には少々荷が重いので、作品を掲載するギャラリーサイトは、実績があり、GoogleのSEO系サービス（Search console, Analyticsなど）とプラグインで連携できる、WordPressサイト内にGeminiで作ったWebページをiframeで埋め込むことを考えています。

レンタルサーバー上に、Geminiで作ったHTMLサイト/ページを直接置くことも考えましたが、WordPress上に置くのとどちらが将来的に良いか？迷っています。

辛口コメントも歓迎なので、どちらが良いか？あるいは、もっと良い他の方法があれば教えてください。

私の既存のWordPressサイトの実例は以下の通りです。
https://dazgen.com/

Geminiに相談開始

こんな感じで、Gemini君を相棒として扱いながら、相談してアドバイスをもらう形式で生成AIとの会話を開始・・・

Geminiからの回答

以下の回答がGemini君から返ってきました。

拝見しました。dazgen.com のこれまでの蓄積と、ezgal.framer.website のモダンなビジュアル表現のギャップをどう埋めるか、非常に面白いフェーズですね。

結論から申し上げます。「Geminiで作ったWebページをWordPressにiframeで埋め込む」のは、技術的にもSEO的にも「最悪の手」になりかねません。

辛口で恐縮ですが、長期的な運用を見据えた構成を整理しました。

1. なぜ「iframe埋め込み」が良くないのか

WordPressの中にiframeで別サイトを呼び出す手法には、以下の致命的な欠点があります。

SEOの分散: Google Search ConsoleやAnalyticsから見ると、iframeの中身は「別サイト」扱いになり、WordPress側のドメイン評価に貢献しません。
レスポンシブの地獄: 埋め込み先の高さ調整が難しく、スマホで見た時に「枠内だけでスクロールする」といった、ユーザー体験（UX）を著しく損なう挙動になりがちです。
管理の二度手間: WordPressの更新と、Geminiで作ったHTMLの更新、両方を管理するのは非常に非効率です。

2. 比較：WP直置き vs WP固定ページ

「レンタルサーバー（WordPressが動いている場所）」にファイルを置く前提で比較します。

比較項目案A：WP内にHTMLファイルを直置き案B：WPの固定ページとして作成自由度最高（独自のCSS/JSを制限なく使える）中（テーマの制約を受ける）SEO効果ドメイン配下なら有効だが管理が煩雑最高（WPのSEOプラグインがそのまま効く）3D/WebGPU最適（外部干渉を受けず実装可能）やや難（WPの仕様と競合する場合がある）保守性リンク切れなどが起きやすい記事一覧に自動反映されるなど楽

おすすめの折衷案：カスタムテンプレート

もし「高度なデザイン（WebGPUやThree.js等）」を動かしたいなら、WordPressの**「カスタムページテンプレート」として、Geminiで書いたコードを組み込むのが正解です。これにより、「見た目は完全に自由なHTMLサイト、中身はWordPressの一部」**という状態を作れます。

3. 「Framer」に代わる、より良い提案

「Framerが重い」「ComfyUIなどの生成AI作品へシフトする」という現在の状況を踏まえると、以下の構成が最も「化ける」可能性があります。

案①：Lume（または同種の静的サイトジェネレーター）

現在開発されている「Dg WebGPU Player」との親和性を考えると、HTMLをベタ書きするより、Lume や Astro のようなツールが向いています。

利点: Geminiが出力したコードをパーツ化して管理しやすく、爆速で動きます。
SEO: Googleサービスとの連携もプラグインで一瞬です。

案②：WordPress + 「Elementor」などの高機能ビルダー

Framerでやりたかった「自由な配置」を、WordPress内で完結させる方法です。

利点: dazgen.com の既存ドメインパワーをそのまま使えます。
AIとの相性: Elementor自体にAI機能が統合され始めており、Geminiで作ったコードを「HTMLウィジェット」に貼り付けるだけで反映できます。

私からのアドバイス（辛口＆本音）

ezgal のサイトを拝見しましたが、非常にセンスが良いです。しかし、「中身（コンテンツ）」をiframeという箱に閉じ込めるのは、作品の価値を自ら下げる行為に見えてしまいます。

ComfyUIによる生成AI作品やWebGPUプレイヤーは、ブラウザのフル機能を活かしてこそ輝きます。

「WordPressをベース（母艦）にしつつ、特定のページだけテーマの枠を外したフルスクリーンHTML（カスタムテンプレート）を適用する」

この方法が、SEO・管理・表現力のすべてを両立できる最適解ではないでしょうか。

もしよろしければ、**「Dg WebGPU PlayerをどのようにWordPressに組み込みたいか（全画面で見せたい、記事の一部に置きたい等）」**を教えていただけますか？それに合わせた具体的な実装コードの構成を提案できます。

以上ですが、先生兼アシスタントとして、相談相手とアシスタントを兼ねた相棒として、力強い仲間が増えた感じです。

noteとギャラリーサイトの関係性

さらに、Gemini君に尋ねると・・・

https://note.com/dazgen
その前に、現在のブログ記事の投稿と公開は主に上記のnote.comのプラットフォームで行っています。WordPressサイトの方が独立性が高く個人的には好ましいのですが、年齢的に運営が辛くなってきたのでnote.comの方に流されているというのが実情です。

note.comの記事には画像は貼り付け、動画はいったんX.comにアップしてそれをnote.comに埋め込む形をとっていますが、個人的にはあまりスッキリしません。

Geminiで好ましいWebサイトのデザインを作成しつつ、自作の作品をそこに置いてAIのパワーを借りつつ個性が発揮できる方法は？

Gemini君からの回答：

note.com への移行、そしてそこでの課題、非常によくわかります。年齢的な運用のしやすさを優先するのは賢明な判断ですし、note の「書けば誰かに届く」仕組みは強力ですよね。

しかし、おっしゃる通り、note は**「自由な表現」や「独自の技術（WebGPU等）の展示」には不向き**な場所です。

ご提案の「note から自作ギャラリーサイトへ誘導する」という形は、現在の制作スタイル（生成AI + 3DCG）に非常にマッチした、**「いいとこ取り」**の戦略だと思います。

以下に、その実現に向けた具体的なロードマップを整理しました。

1. 戦略：「母艦」と「支店」の使い分け

すべてを WordPress でやろうとすると重荷になりますが、役割を分ければ楽になります。

note.com（支店/集客）: 日記、制作過程の苦労話、思考の断片。更新を楽にし、交流を楽しむ場所。
自作ギャラリーサイト（母艦/作品集）: Gemini でデザインした、世界観重視のページ。高画質画像、動画、WebGPU プレイヤーを「最高の設定」で展示する場所。

2. 実装の正解：WordPress 内に「作品専用キャンバス」を作る

WordPress を使いつつ、Gemini で作った高度なデザインを活かすには、**「固定ページ」×「カスタムテンプレート」**という手法がベストです。

なぜこれが良いのか？

iframe 不要: Gemini が出力した HTML/CSS/JS をそのままページとして読み込めます。
デザインの自由: note の画一的なデザインとは無縁の、ezgal のような尖ったデザインを 1 ページ単位で作れます。
管理が楽: 基本は WordPress なので、一度設定すれば、新しい作品を追加するのも「固定ページを増やすだけ」です。

3. 具体的な誘導フロー（note → ギャラリー）

note のスッキリしない「X の埋め込み動画」などはやめて、以下のような見せ方に変えます。

note 記事: 作品のサムネイル（静止画）と、「制作の背景」を短く書く。
誘導ボタン: 「フル画質・3D ビューで見る」というリンクを設置。
ギャラリー（WordPress）: リンク先は、Gemini と一緒に作り込んだ、演出たっぷりの専用ページ。

4. 今後のステップへの提案

もし私があなたの立場なら、以下のような構成で「引退まで使い倒せる自分専用の美術館」を構築します。

ステップ 1：WordPress の「ベース」を整える

dazgen.com をそのまま使うか、サブドメイン（例：gallery.dazgen.com）を作ります。テーマは何でも構いませんが、**「白紙のページ（Header/Footer なし）」**を書き出せる設定にします。

ステップ 2：Gemini で「作品展示用コード」を生成

Gemini にこう依頼します。

「モダンなギャラリーサイトの 1 ページを作りたい。背景は暗めで、大きな画像がふわっと現れる JS アニメーションを含めて。ここに WebGPU の 3D モデルを表示する <iframe>（自作プレイヤー用）を配置する HTML/CSS を書いて」

ステップ 3：note に「サイトに貼る」機能で逆連携

逆に、自作ギャラリーサイトの隅に「最新の note 記事一覧」を RSS 連携で表示させておけば、ギャラリーに来た人が note に戻る流れも自動で作れます。

最後に（少しだけ辛口な応援）

「年齢的に辛い」からこそ、**「一度作れば勝手に美しく並べてくれる仕組み」**に初期投資（時間と知恵）をすべきです。note に流されるままでは、あなたの 3D 技術や WebGPU へのこだわりが、note の「標準フォントと標準レイアウト」の中に埋もれてしまいます。

「note はチラシ、WordPress は個展会場」

この割り切りで、Gemini をフル活用した「個展会場」の建設を始めてみませんか？

まずは、**「note に貼るための、最高にかっこいい誘導用バナーのデザイン案」**を Gemini と一緒に考えてみるのはいかがでしょうか？

まぁ、そうですよね・・・

ある程度、頭の中が整理できたとともに、誰かに背中を押して貰えるような感覚は、けっこう辛い作業を始めることを決断する場合は、パワーをもらえます。

生成AIとの会話は、効率化・合理化という側面より、「孤独からの解放」という側面の方が、今の私にとっては大切な気がしていますが・・・

プロトタイプの作成

dazgen.comの直下に「/gallery/index.html」を置いて、ギャラリーサイトの構築を開始しました。

全体のフレームワークや外観デザインはGemini君に任せて、私はトップページのヒーローヘッダーを、Dg WebGPU PlayerとSkybox AIでとりあえずプロトタイプを作成し、Gemini君が作ったHTMLコードに埋め込みました。

Gemini君が考えたフレームワーク案

ちなみに、フレームワークやサイトデザインにこだわりたい場合は、以下の動画などを参考にしてください。
「魂は、ディテールに宿る（神は細部に宿る）」by 久米宏

私の場合は、作品づくりに個人的に必要なツールをGeminiを使ってWebアプリで実現しているので、万人向けは考慮していないというのが実情です。

どちらかというと、Geminiとの対話を重視し、Geminiと壁打ちをしながら自分のイメージに合ったツールの完成度を上げていくのが楽しいですね。

参考記事

HDR背景画像の作成

今回のヒーローヘッダーに使ったHDR(4K)背景画像のプロンプトは以下です。（Gemini君が示してくれたサンプルプロンプトをそのまま使用💦）

Modern Japanese high school rooftop, warm sunset lighting, metal fences, distant city buildings, clear sky, highly detailed, photorealistic.
（近代的な日本の高校の屋上、暖かい夕焼けの照明、金属製のフェンス、遠くの街の建物、晴れた空、非常に詳細で写実的）

https://skybox.blockadelabs.com/9ec2a5686d4e6f16b0001591b6d8b120

★ 従来はPolyhavenなどの無料画像サイトで探してダウンロードしてきましたが、作品のイメージに合ったHDR画像を探すのは骨が折れるので「時間と手間をカネで買う」ことに・・・💦

Dg WebGPU Playerに読込みスクショ

まとめ

作品ギャラリーサイトをプロ向けの無料サイト作成サービスのFramerで作り始めましたが挫折。今回は、Geminiという良き相棒を得て、会話しながら楽しく作業を進められるようになったので紹介しています。

人物モデルの作成は、従来のDAZ StudioとBlenderによる方法をしばらくは続けたいと思いますが、Meshy AIやTripo AIなどの3D生成AIによる生成も、ケースバイケースで進めたいと思います。