- Share On
目次
株式会社デパートの創業10周年を記念して制作されたスペシャルサイトは、フル3Dで実装されとてもユニークなサイトになっています。
3Dの魅力はなんといってもディスプレイの中に奥行きがあり、さらに自分で動かすことができるというエンターテイメント性です。今回のサイトでは、このワクワク感をフルに活かし、さらにAI技術を取り入れ、チャレンジ力＆デザイン力＆技術力の髄を凝らしました！
この記事では、このサイトの3Dデザインの流れを説明いたします。blenderを使ったフル3Dサイトのデザイン制作に興味がありましたらぜひご覧になってください。
3Dサイトは動きも含めて設計する
創業10周年の記念サイト制作にあたり、私たちはこれをチャレンジングでデパートらしいものにすべく、3Dでデパート＝百貨店をモチーフにしたサイトを作成することにしていました。そこでデザインも、3Dのワクワク感や操作性を活かしたユニークなものを提案することにいたしました。
3Dサイトは一般的な平面デザインと違い立体的な視点移動が可能です。
この動きも含めたイメージを具体的に伝えるために、デザイン提案でもアニメーションコンテを作成したり、XDのプロトタイプ機能を使ったアニメーションで説明するように心がけました。
こちらは企画初期に作成したフロア移動＆コンテンツ表示のイメージです。エンジニアチームに実装可否を確認するためにも、ざっくりではありますがフロア移動のアニメーションもつけてイメージをすり合わせています。
blenderモックを作ることでデザインと実装の差異を減らす
実装イメージのすり合わせができた後は、ユーザー視点に立って迷わず楽しめるUIを検討したり、没入感のあるカメラワークを詰めていきます。
同時に、10周年というお祝い感・デパートらしいデジタル技術感・クライアントに寄り添う姿勢や温かみを感じられるトーンを模索しました。
この時期から、平面でデザインをすることの限界を感じ始めました。3Dではカメラの位置によって要素の見え方が変わるため、いくらphotoshopやXDで作業しても実際の見え方とは同じにならない可能性が高いからです。
ちなみに、デザイナーメンバーはほぼ3D初心者でしたが、幸いにもエンジニアには3Dスペシャリストが在籍しています。そこで今回のサイトでは、デザイナーが要素の配置とイメージをエンジニアさんに伝える、実際の3Dモデリングはエンジニアさんに担当していただく、という役割分担をすることにしていました。
そこで、デザインの指示データは平面画像だけではなく、モックレベルのblenderデータも合わせて作成することにしました。あくまでモックレベルなので、初心者でもできる範囲で直方体/円柱/球といったblenderのベーシックなオブジェクトを並べて、配置とサイズ感を伝えることを重視しています。
上記のように、ディティールはほぼ存在しませんが、カメラも設置して実際の見え方を確認しながら要素を並べました。
不慣れなのでスピード重視で作業していたのですが、普段2Dでしかデザインしていないので新たな3Dという表現にウキウキが止まらず、パイプやillustratorで作ったシェイプを読み込む方法も調べて取り入れています。
このblenderモックと合わせて、細かなディティールをphotoshopで平面図に起こし、参考イメージも交えながらエンジニアさんに伝えました。
本来、3Dを作成するには3面図での説明が好ましいと思います。ですが、今回のサイトは5階建ての構成で5フロア＋外観のデザインが必要だったため、作業の簡略化やデザインのしやすさの観点からもblenderモック&平面図での作業で良かったと感じています。
アバター作成は初心者でも使いやすいMagicaVoxelがおすすめ
アバターの作成ではエンジニアさんにMagicaVoxelというツールを紹介していただきました。
このツールを使うと３次元空間上にピクセルをポチポチ打つような感覚で3Dを作成することができます。アバターは数が必要で、3Dツールに慣れていないメンバーでも作れる必要があったためこのシンプルなアプリケーションにはとても助けられました。
最初は四苦八苦しながら簡単な形で練習します。
そして使い方を理解したところで、デパートのメンバーのアバターを作成しました。アバターデザインは統一感を持たせながら、メンバー一人一人の個性も出るようにポチポチ根気強く調整しています。
完成したものはメンバーご本人にもチェックをいただいていますが、嬉しいことにみなさんとても可愛いと好評でした！
3Dは自由度が高いからこそUIの使いやすさが大切
平面デザインと違い、3Dなら360度回転させたりズームして細部まで見ることができます。これはとても自由度が高くできることが増える反面で、ユーザーがどこで何をすべきか迷う可能性が高くなる懸念があります。
そこで、このコンテンツではあえて視点を固定し、フロアをぐるりと見渡すような仕組みにしました。さらに、1フロアにはメインコンテンツは2つ、サブコンテンツ(遊び要素)を1〜2個という縛りをつけ、クリックエリアにはわかりやすいマーカーを設置しています。これによりユーザーはフロア内で迷子になることもなく、コンテンツも余さず拾って楽しむことができます。
画面の下部左右にはフロア移動ができるボタンを設置しました。ボタンはマウスオーバーはもちろんのこと、視点がフロアの左右端まで移動した時にも自動的に伸びてきて存在を主張します。この動きによって、初めてサイトに訪れたユーザーでも次に何をすれば良いのかがわかりやすくなっています。
また、画面の下部中央には現在の視野を表すインジケーターを配置し、視点を動かせる範囲と現在の視野を明確にしました。視点は左右のボタンでも動かせるようになっています。私たちデパートではより良いユーザビリティへの取り組みも行っており、その一環として今回のサイトも多くの人たちに楽しんでいただけるように、画面のドラッグ操作が難しいユーザーでも使いやすいUIを提供しています。
デザイナーとエンジニアが相談しながら作る3Dデザイン
平面的なサイトデザインでは、実装後にデザイン調整を行うことは稀です。ですが、今回のような3Dサイトではデザインで想定しきれていないところが多いため、エンジニアさんに実装いただいたものを元にさらにあれこれ相談させていただきました。
エンジニアさんがデザイン資料を見ながら作ってくださった3Dはとにかく見事で、素晴らしい仕上がりに始終大喜びしながら、細かなところでカラー調整や光量、ディティールの統一感といったデザイナー目線での要望をお伝えしています。
このように、この3Dサイトはメンバーそれぞれの得手不得手を補い協力し合いながら制作されています。
3Dデザインに興味をお持ちのデザイナーの方や、こんなサイトが作りたいとお考えの企業の皆様の参考になれば幸いです。
株式会社デパートの10周年記念サイトは、デザインはもちろん実装面も見どころ満載になっています。スクロールが楽しいヒストリーコンテンツやあなたにぴったりのWeb業種をAIが診断してくれる占いコンテンツなど、ぜひ実際に見て触って遊んでみてください！
Contact
制作のご依頼やサービスに関するお問い合わせ、
まだ案件化していないご相談など、
お気軽にお問い合わせください。
