Webデザイナー向け。Blenderではじめる3DCG入門-ビジュアルデザインの表現強化|東京のWEB制作会社・ホームページ制作会社|株式会社GIG

Webデザイナー向け。Blenderではじめる3DCG入門-ビジュアルデザインの表現強化

2021-08-04 制作・開発

はじめまして、こんにちは! GIGデザイナーのおみどです。

普段は、クライアントワークでWebサイト制作をメインで行いながら、弊社の事業の一つである『Workship』のサポートデザインも担当しています。

最近はビジュアルデザインの表現強化に興味があるのですが、3DCGの勉強として『Blender』を使っています。

この記事では、3DCGおよびBlenderの概要と、Blenderで実際に作ったものをご紹介します。3DCGを初めて聞く方も、興味があったけどBlenderに触ったことない方も、この記事を読んで3DCGに興味をもってもらえると嬉しいです。

3DCGについて

3DCGとは

3DCGとは「3次元コンピューターグラフィックス」の略です。「3Dグラフィックス」とも呼ばれています。

主に映画/アニメ/ゲームなどの映像業界や、設計などの建築業界の場で使われています。近年ではWebデザインの世界でも取り入れられてるようになりました。

縦横だけでなく、3Dならではの奥行きの立体感が加わることによって、表現の幅をさらに広げることが可能になります。そして、コンテンツに立体的な情報を持たせることで、ユーザーの興味を惹きやすくなります。

3DCGソフトについて

3DCGの制作ソフトとして代表的なものに、以下のようなものがあります。

・Blender
・Maya
・3DS MAX
・modo
・Shade
・LightWave
・Cinema 4D(C4D)

それぞれのソフトごとに長所/短所があるので、自分が作りたい制作物に合ったソフトを使用するのが良いです。

また、Blender以外のソフトは有料となっており、なかなかのお値段が張るので要確認してください。

Blenderについて

Blenderとは


Blenderはオランダのアムステルダムで生まれたオープンソースのソフトウェアで、完全無料で誰でも使える統合型3DCGソフトです。最新バージョンは2.92が出ています(2020年7月27日現在)

無料とはいえ、有料の他サービスに引けを取らないほど機能が充実しており、近年では人気が上がっています。日本語にも対応しており、Mac/Windows/Linux/その他バージョンのマルチプラットフォームで使用可能です。ここまでの話で、対応が良すぎて少し心配になります。

ちなみにロゴのシンボルマークは「目」をイメージしているらしいです。

導入ハードルが低いので、私はBlenderを選びました。

Blenderでの3DCG制作で注意すること

レンダリングでは計算によってオブジェクトの質感や面の様子を求めるため、PCのハードウェアにかなり負荷がかかってしまいます。お使いのPCスペックによっては、書き出しに時間がかかったり、思うような書き出しができないこともあります。

また突然落ちることがあるので、データ保存は頻繁に行うよう注意してください。

私はぴえん顔を制作してる時、レンダリングを押した瞬間に落ちてリアルぴえんになりました。もうあんな思いはしたくない……し、同じ状況に陥るひとを一人でも減らしたいと心より願っています。

▲(その時作っていたぴえん)

Blenderで3DCG作ってみた(作品例)

それでは、実際に私がつくった作品をいくつか紹介します! いずれもBlenderをはじめて1ヶ月程度の作品になります。

【コンセプト】

 韓国コスメの広告

【大変だったこと】

よりリアルにするため、リップの長さ調整の部分を金具にしました。金属部分は光の入り具合のバランスが難しかったです!

韓国コスメによく見られる、淡い色合いが可愛くて好きです。

【コンセプト】

ゲーム世界の次ステージ

【大変だったこと】

ポリゴン数が増えると処理が重たくなってしまうため、サイズや数を気をつけながら作りました。(最初、ポリゴン数を増やしすぎてBlenderが処理落ちしてしまったため、作り直してます)

多角形から成り立っているため、角ばった硬い印象になりやすいのがポリゴンの難しいところ。必要箇所はサイズを細かくしながら、全体のイメージを調整しました。

次はこのステージに挑戦するぞ!という場面が伝わると嬉しいです。

【コンセプト】

アニメーションっぽい空飛ぶ家

【大変だったこと】

風船がふわふわと浮いている様子を表現するために、何度も微調整を繰り返しました。

おもちゃな印象にするために、メタボール(※)を使ってぷりぷりな雲を作成しています。

なお今回は使用しませでしたが、テクスチャを当てたディスプレイスでの作成もあり、作り方のアプローチが多くて素敵です!

制作時、眠すぎてこのまま会社連れて行ってくれないかなと深夜にもくもく作っていました。

※スライム状に結合・分離できる球体オブジェクト

【コンセプト】

 ドキドキとめぐる胸の中にあるほんとの気持ち

【大変だったこと】

ノードを使ったシェーダーの機能を勉強しようと思い作りました。元々は円だったオブジェクトに陰影計算を与えることで、このような色や柄、質感などを表現できます。複数のプログラムを組み合わせているので、微かな数値調整で結果が大きく変わってしまうこともあり、良いバランスを見つけるのに苦労しました。奥が深いです。

まだまだ粗いので勉強が必要です。

これを作ったときはちょうどバレンタインの時期でしたので、色や角ばった大小の流れる形に、ドキドキして血がめぐるスピード感を見立ててます。その対比として、ハートはつるっとぷっくりさせて、揺るがない気持ちを表しました。

以上、私がBlenderをはじめて1ヶ月程度で制作した3DCGの一部でした。

アニメーションテイストのもの、ローポリでのゲームっぽいもの、リアルな金属感、本当にありそうな化粧品などなど、テイスト問わずさまざまな作品をつくれます。

実際の商品や、仮想空間の街並み、コーポレートロゴなどを3D化して、コンテンツと絡めてWeb上で表現するのも面白そうですよね。

まとめ

3DCGに触れてからは、ふだんの生活で目に入ってきたオブジェクトの光や影の入り方、ちょっとした凹凸、素材や質感など……これまで以上に気になるようになりました。

今回の記事で3DCGに興味をもっていただけたならば、ぜひBlenderからはじめてみてはいかがでしょうか。

筆者は、Blenderの機能をもう少し触ったら、他のソフトも試してみたいと思っています。特にC4Dはモーションに特化していて、UIもわかりやすいと耳にしています。お試しだけでも触れるのが楽しみです。

 今後は実案件での導入事例や、3DCGに関する情報なども紹介できればと思っています。

長くなってしまいましたが、ここまで読んでいただきありがとうございました!

関連記事:Splineを使って3DCGを簡単にWebに取り入れてみよう

なお株式会社GIGは、ナショナルクライアントからスタートアップまで、Webコンサルティング、UI/UXデザイン、システム開発など、DX支援をおこなうデジタルコンサルティング企業です。7,000人以上が登録するデザイナー特化エージェントサービス『クロスデザイナー』や、デザインやリード獲得に強いCMS『LeadGrid』、UXコンサルティングサービス『UX Design Lab』などを展開しています。

デザイン設計やDX支援のご相談はいつでもご連絡ください。デザイナー採用も強化中です!

■株式会社GIG
お仕事のお問い合わせはこちら
会社紹介資料のダウンロードはこちら
採用応募はこちら(GIG採用サイト)
採用応募はこちら(Wantedly)

■Webサイト制作事例
Chatwork - サービスサイト制作 / マーケティング支援
ミクシィ - コーポレートサイト制作 / デザイン・保守運用
SmartNews - サービスサイト制作 / マーケティング支援


話を聞いてみたい方も歓迎です。お気軽にご連絡ください!

GIG BLOG編集部

株式会社GIGのメンバーによって構成される編集部。GIG社員のインタビューや、GIGで行われたイベントのレポート、その他GIGにかかわるさまざまな情報をお届けします。