投稿
3Dホームページが作成できるようになりました｜ポートフォリオサイトを3D化
最近、AIを活用した制作環境を使って、自分のポートフォリオサイトを3D化しました。
3D表現を使ったページと、従来型の一覧ページを組み合わせ、見た目のインパクトと情報の探しやすさを両立する構成にしています。この記事では、3Dホームページ制作に対応できるようになったことと、実際の制作で分かったことを紹介します。
ポートフォリオサイトを3D化しました
今回作ったのは、名古屋を拠点にホームページやLP制作を行う、僕自身のサイトである「IRODORI Creative Lab」のポートフォリオサイトです。
3D空間の中を歩きながら制作実績やサービスを見ていけます。一方で、作品をすぐ探したい人のために通常型の一覧ページも用意しました。
3Dらしい面白さと、サイトとしての分かりやすさを両立することを意識しています。
きっかけはAIの進化と、公開されていた制作情報
以前から3D表現を取り入れたWebサイトには興味がありましたが、自分で作るのは難しいと感じていました。
そんな中、いつも僕が参考にさせていただいている、ぞろ屋さんが最新のGPT-6 Astraを活用して3Dホームページを制作されていることを知り、公開されていたプロンプトや制作情報を参考にさせていただきました。公開情報から学び、自分のサイトへ試していく形です。
AIに相談しながら構成を考え、コードを書き、実際のブラウザで確認する。この流れを繰り返すことで、3Dサイト制作を自分の制作工程として身につけていきました。
実際に3D化してみたら想像以上に大変だった
高い推論設定でクレジット消費が一気に増加
今回の制作では、推奨されていた高い推論である、Ultraの設定で複雑な表現を作り込みました。そのぶん、通常のページ制作よりAIの利用枠を多く使いました。これは僕の環境・設定・制作内容での体験であり、誰が作っても同じ結果になる話ではありません。
完成までに何度も利用上限へ
最初にサイト全体の形が見えるまでに複数回上限へ到達し、回復を待ちながら作業を再開しました。その後も一覧ページのデザインを作り直したため、完成まで実質丸一日規模の作業になりました。
AIなら一瞬で完成するというより、AIが大きな制作作業を進めてくれる一方で、人間が確認し、違和感を伝え、何度も直していく制作でした。
一度完成したのに、一覧ページをさらに作り直した理由
3D空間が完成した時点では見た目の新しさはありました。ただ、初めて訪れた人が「どこに何があるのか」をすぐ理解できるかというと、改善の余地がありました。
そこで、作品を一覧で確認できるページも見直しました。3D空間を楽しみたい人と、実績を効率よく探したい人の両方に対応するためです。
ただ、3Dにすればいいわけではない｜使いやすさとのバランス
- 見た人が何がどこにあるのか分かる
- 操作に迷わない
- 作品を探しやすい
- スマートフォンでも無理なく見られる
- 表示速度や制作コストも現実的である
3D表現は目を引きますが、立体的にすればするほど良いわけではありません。面白さだけでなく、使いやすさまで含めてホームページだと考えています。
完成した3Dポートフォリオはこちら
入口から3D空間へ入り、キーボードの矢印キーやWASD、画面上の操作で移動できます。制作実績やサービス案内を見ながら、気になる場所を選んで進める仕組みです。
3D表示が合わない場合や、目的の情報をすぐ探したい場合は、通常型の一覧ページも利用できます。
今後は3Dホームページ制作にも対応していきます
今回の制作を通じて、通常のホームページだけでなく、3D表現を取り入れたサイトや、ブランド・店舗の世界観を見せるWebサイトにも挑戦できるようになりました。
ただし、どんなサイトでも3Dにすればよいとは考えていません。目的、予算、必要な表現、スマートフォン対応、表示速度、操作性、制作コストを確認したうえで、3Dが合うかどうかから提案します。
通常のホームページだけでなく、3D表現や少し変わった演出を取り入れたサイトもご相談いただけます。
まとめ｜AIで広がったWeb制作の選択肢
今回の3D化は、AIに任せれば自動で完成したという話ではありません。新しい表現を試し、自分のサイトで形にし、うまくいかない部分を修正する。その繰り返しで、制作サービスとして提案できるところまで持っていきました。
「普通のホームページとは少し違うサイトを作りたい」「お店やサービスの世界観を印象に残したい」という方は、3D表現が合うかどうかも含めてご相談ください。