Webデザインにおける3Dイメージ：3つのアプローチ手法

近年、インパクトのあるビジュアルを作成するために、ビデオ、画像、イラスト、WebGLのパワフルなアニメーションなどに3Dイメージを取り入れるのが流行しています。

今回はWebデザインにおける3Dイメージの活用にフォーカスし、そのアプローチについてご紹介します。

3Dイメージの、3つのアプローチ

3Dイメージは、大きくわけて次の3つのアプローチに分類できます。

1. 3Dレンダリングによるアプローチ
   例：2018 by Makemepulse
   
2. イラストによるアプローチ
   例：Tealspace by Chilid
   
3. 実写撮影によるアプローチ
   例：Jacki
   

その他、All Mountain Lookbookのように、複数の3Dイメージが混在することもあります。

以下でそれぞれ解説します。

1. 3Dレンダリング

3Dレンダリングはますます多面的になっており、さまざまな種類のWebサイトで使用されています。

Pixelfordinnerは3Dレンダリングを用いたクラシカルな例の一つです。ここでは、画面上に広がる3Dイメージによって、ファンタジーな世界を演出しています。

▲Pixelfordinner

▲Magic Leap

MakemepulseのMagic Leapと2018は、3Dイメージを採用した現代的な作品です。印象深いシーンの演出のために用いられています。この3Dイメージのアプローチにより、アーティストはイメージ通りの作品を生み出すことができました。

Magic Leapは、ハイテクな印象を与える宇宙風のシーンが特徴的です。Makemepulseのチームによる抽象的なシーンによって、躍動感が生まれています。

この方向性をマスターするには、3Dオブジェクトを詰め込み過ぎないことが重要です。あまりに3Dオブジェクトが多いと、ユーザーに圧迫感を与えてしまう恐れがあります。前提として、Webサイトはすでに人工感に溢れているので、人間的な暖かみのある部分をすべて取り除いてしまわないように心がけてください。

2. イラストによるアプローチ

イラストによるアプローチは、本記事で紹介するアプローチの中で最も古いものです。この手法は、遠近法とさまざまなアングルビューを使用して、3Dイメージを実現しています。

これまでイラストアプローチは、3Dを描く唯一の方法として重用されてきましたが、近年の技術革新のおかげでその状況も変わってきました。以下のTealspace by Chilidが良い例です。

▲Tealspace by Chilid

上のイラストレーションは、一般的でクラシカルな印象を与えます。小さなダイナミックエフェクトは、フロントページに素晴らしい印象を与える、近代的なソリューションを作り出しています。

このアプローチを習得するには、ダイナミックな動きを加えるのを忘れてはなりません。単なる静的なイラストでは、退屈な印象を与えてしまう恐れがあります。

3. 実写撮影によるアプローチ

このアプローチは比較的新しいものですが、有効であることが証明されています。WebGLを使ったより洗練されたトリックも存在しますが、実写撮影のテクニックも十分検討する価値があります。

実写撮影による3Dイメージを生み出すには、以下の2つのアプローチが有効です。

1. プロのカメラマンを起用しアイテムを適切に配置し、Photoshopのような写真編集ソフトウェアを使用し、カスタムコンポジションを作成する
2. リアルなオブジェクトを所持している人気のシーンクリエイターを起用し、3Dイメージの全てを擬似的に作り出す

実写撮影による3Dイメージは、以下のような目標の実現をサポートします。

• ブランドアイデンティティのサポート
• 求められている雰囲気の確立
• メッセージの伝達
• 製品等の宣伝

Obachan、Cortez by Nike、Crux Media等を例にご説明しましょう。

▲Obachan

Obachanは、毎月あなたのもとに日本の製品が入った箱を届けてくれるサービスです。

チームは、ユーザーが期待しているであろうアイテムを表現するため、箱の中に入っている商品が散りばめられた3Dイメージを作成しました。3DシーンはWebサイトを豊かにするだけでなく、ボックスの中身を訪問者に伝える力も持っています。

▲Cortez by Nike

ポラロイド、スケートボード、オーディオテープ、レコード……。Cortez by Nikeは、オンライン上で90年代のパワフルな雰囲気を表現しています。3Dイメージは全体の雰囲気を演出しており、焦点はスニーカーに合わせられています。

▲Crux Media

Crux Mediaは、ナビゲーションに3Dイメージを使用しています。また、業務にまつわるアイテムを載せることで、ビジネスの内容が想像できるようになっています。

アイテム間のバランスやトーンの調和を整えるのは決して簡単ではありません。そこは経験を積むのみです。まずは元の写真が綺麗に撮影されていることが絶対条件。次にPhotoshopで磨きをかけ、完璧な仕上がりを目指しましょう。

おまけ：さまざまな手法を混合したアプローチ

さまざまな手法を組み合わせることは、これまでご紹介してきたソリューションに比べると、より人工的かつ劇的で、かなりのインパクトを与えられます。原則としてデザイナーは、注意深くトリミングした写真を3Dオブジェクトと混ぜるか、その逆を行う必要があります。

▲Collections App

Collections Appのフロントページには、フォトシュートのようなシーンと、3Dレンダリングの調和のとれた組み合わせが見られます。

背景部分は真上から撮影したようなイメージが表示される一方、スマホのモックアップは正面から表示されており、このギャップが素晴らしい効果を生み出しています。

▲All Mountain Lookbook

All Mountain Lookbookは訪問者を感動させ、プロジェクトの背後にあるアイデアを説明することを目的としています。ここで注目したいのが、3Dオブジェクト、写真、絶妙なマウスホバー効果の共生です。まるで雑誌のようなヒーローエリアは、Webサイトの訪問者を感動させる仕上がりとなっています。

本アプローチにおけるポイントは、「やりすぎてはいけない」ということ。必要なメッセージを伝達し、それを構築するための重要な要素を特定する。常に高みを目指すのは素晴らしいことですが、過度に凝りすぎないことは重要です。

まとめ

いかがでしたか？

今回ご紹介したWebデザインにおける3Dイメージのアプローチは、それぞれ長所と短所があり、またそれぞれ優れたスキルとクリエイティビティが必要となります。

しかし、3Dイメージはさまざまなテーマに適用できる非常に便利なものです。ビジネスの雰囲気に合った構成を生み出したり、楽しい雰囲気のシーンを作成したり、またその他の優れたデザインを作り上げることが可能です。

Webデザインにおける3Dイメージは優れた技術の結晶でありながら、普遍的・伝統的であるという、非常にユニークなツールなのです。

（著者：Nataly Birch　翻訳：Ayaka Takei）

こちらもおすすめ！▼