3DのCGを制作するためのソフトウェアは一般的に値段が高く、数万円から数十万円するものまであります。今回はタイトルにもある通り、Blenderにフォーカスして記事を執筆しております。Blenderは、無料でありながら質の高い3DCGアニメーションをつくることができ、プロの現場でも使われています。以下は代表的な3DCGツールになります。＜ Maya ＞　 ソフトに最初から用意されているアニメーション、エフェクトなどのツールセットが豊富＜ 3DS MAX ＞ プラグインが豊富に用意されているため、プログラミングの知識がなくても容易に機能の拡張を行うことが可能＜ modo ＞ 3DCGコンテンツの作成に関する幅広い機能を揃えている統合型ソフトウェアですが、中でもモデリングの機能が優秀＜ Shade ＞ 建築パース・インテリアデザイン・プロダクトデザインなどに使用されていることが多い＜ Blender ＞　　 無料でモデリングやアニメーション機能を使用できるオープンソースの3D制作ソフトウェア

01. 3DCGツールについて

Blenderとは、3次元のCGを自由に制作できるアプリケーションソフトになります。オープンソースのフリーソフトであるため、ダウンロードすれば誰でも簡単に利用できます。価格が無料なのに、有料ソフトにも劣らない機能を持っていることが、このソフトの特徴です。本格的なCGアニメ制作ソフトとして使用できるため、世界中の多くのユーザーに利用されています。以下のリンクからダウンロードが可能です。<a href="https://www.blender.org/" target="_blank" rel="noopener noreferrer nofollow">https://www.blender.org/</a><h3 style="text-align: start" id="hd13ce9d743">Blenderでできること</h3>Blenderでは、3DC制作に必要なすべての作業をおこなうことが可能です。3DCGの制作過程では、物体の形をつくる「モデリング」や、質感を設定する「マテリアル」、動きをつける「アニメーション」などのさまざまな作業があります。これらの、主な作業を以下に紹介してまいります。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/d0efa2fecaf94866b7f894c47dd9571f/1693549346464-MrbEDIqgTT.png" alt="" width="800" height="450"></figure>先輩デザイナーの「I氏」が作成■ モデリング モデリングとは、立体の形を作る作業のことです。モデリングの手法にはポリゴンの頂点や面を操作して造形する「ポリゴンモデリング」や、粘土でこねるように造形ができる「スカルプトモデリング」などがあります。■ リギング リギング、リグを作成することを示します。リグとは、モデリングした物体を動かす仕組みのことです。作成したモデルにボーンと呼ばれる骨組みをいれることにより、モデルに好きなポーズをとらせることが可能です。■ アニメーション 3Dアニメーションとは、主にポリゴンによって構成された3DCGモデルに動きをつけていく作業です。「⁠物理演算」を使うことで、リアルな水の動きなどを再現することもできます。■ ライティング 3DCGシーンを照らす様々な種類のライトを設定し、最終的な見映えを定める工程になります。CGの空間には本来備わっていない光を入れ込み、3DCGの仕上がりを左右する大切な作業になります。

02. Blenderとは？

<h3 style="text-align: start" id="h04849c4e8c">市場の動きトレンド</h3>3DCGを活用することで、空間の奥行きや立体感の表現が可能となり、独自の演出によって新たなユーザー体験を提供できる点も強みになります。表現や演出が大幅に広がるため、企業の価値観やビジョンなどの世界観を効果的に伝えやすくなるのが大きなメリットになります。以下は、世界最高峰のウェブデザイナー、開発者、制作会社を評価する「Awwwards」に掲載されております3DCGを用いたWebサイトになります。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/e792e756709d42d693de61ea1c96b933/1693543876574-AG6P7Ra2uy.png" alt="" width="800" height="460"></figure><hr><h3 style="text-align: start" id="ha69b57abd6">3DCGを活用したWebサイト</h3>ここでは他社様の事例をピックアップしてご紹介させていただきます。いつも大変参考にさせていただいております。※勝手に掲載させていただき恐縮でございます。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/e859d86cadfb433ba2dce90f7050751e/picture_pc_b9a50effd669daf5848f9a0936297f23.gif" alt="" width="800" height="440"></figure><a href="https://mount.jp/" target="_blank" rel="noopener noreferrer nofollow">mount inc</a> 様 ＜ すべてのお母さんに、ありがとう。＞ 2022年の母の日に合わせて公開された、POLAの特設ページ。サイト内はスクロールに連動してシーンが次々に切り替わっていきます。花が開くモーションを始めとし、優しい動きと鮮やかなモーションでサイト全体が彩られております。<a href="https://www.pola.co.jp/special/o/wecaremore/mothersday/" target="_blank" rel="noopener noreferrer nofollow">https://www.pola.co.jp/special/o/wecaremore/mothersday/</a><hr><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/a0eedc934010403bb7c78505d2fc80c9/picture_pc_df171cc2ed2f79d007d74392e116de8b.gif" alt="" width="800" height="440"></figure><a href="https://t.co/1h1ZpbIzKv" target="_blank" rel="noopener noreferrer nofollow">STUDIO DETAILS Inc.</a> 様＜ RCIエージェンシー ＞ RCIエージェンシーは「クライアントの重要課題の解決と、IT業界の多重請け構造の根絶」をミッションに掲げるITコンサルティング会社です。<a href="https://rci-a.com/" target="_blank" rel="noopener noreferrer nofollow">https://rci-a.com/</a><hr><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/220b28149bf141e581a51fd3d34dfb05/picture_pc_52b6632321707c1e4316ade1062fda43.gif" alt="" width="1280" height="704"></figure><a href="https://garden-eight.com/ja/" target="_blank" rel="noopener noreferrer nofollow">株式会社ガーデンエイト</a> 様＜ Garden Eight ＞ 東京・浅草橋にて、ビジュアルデザインならびにWeb開発を手がける、「Garden Eight（株式会社ガーデンエイト）」のコーポレートサイトです。<a href="https://garden-eight.com/ja/" target="_blank" rel="noopener noreferrer nofollow">https://garden-eight.com/ja/</a>

03. 3DCGを活用した事例

<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/d320a17bfd0343cd8573fb2755a41220/1693393181727-OWij2J9Tjw.png" alt="" width="800" height="450"></figure>WARP こちらの画像は弊社のプロジェクトの一環（アニメーション領域）で制作したWARPの3Dロゴになります。このプロジェクトは技術投資の一環で2023年からスタートしました。WARPとは、MARPの裏サイトとしてアニメーションの共通言語をつくる・知識が蓄積されるWebデザインのアニメーションサイトで、岩松さん（<a href="https://twitter.com/IwamatsuShota" target="_blank" rel="noopener noreferrer nofollow">@IwamatsuShota</a>）のディレクションで進んで参りました。このプロジェクトの一環で3DCGツール「blender」の技術習得を行い、Webサイトで具現化しております。僕はロゴデザイン、Webデザインの領域で参画させていただきました！具体的なプロジェクト内容は下記の記事にまとめられておりますので、ご高覧いただけますと幸いです<a href="https://www.m-hand.co.jp/design/11905/" target="_blank" rel="noopener noreferrer nofollow">MARPとWARP</a> <hr>以下の画像は、ロゴ作成工程の一部をまとめたものになります。さまざまなコミュニケーションを経て形になっております..。次の項目では、形に至るまでの各工程（モデリングからアニメーションまで）の詳細をご紹介させていただきます。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/6873e661988d401f968ad6829d2a6c9a/1693555203487-8cryRcy1wZ.png" alt="" width="800" height="902"></figure>ロゴ作成工程の一部<h3 style="text-align: start" id="h2a12c95414">モデリングについて </h3><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/c18730f5d9154bcf92458739bf6adc59/1693393746059-jRwgdD139b.png" alt="" width="800" height="475"></figure>形状については、MARPのロゴのアウトラインをベースとしてモデリングを進めました。また、アルファベットひとつひとつに、質量感や、重力の概念を持たせて、柔らかさや、固さなどの表現を意識しました。<h3 style="text-align: start" id="h9464554908">質感について</h3><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/7dcfb28a2e0b4b87a24efa068c7ebd93/1693475194299-bHdXKUnW9L.png" alt="" width="800" height="630"></figure>Blenderのオブジェクトには、その質感を表す「マテリアル」が設定できます。マテリアルには反射や屈折、発光などが設定できますが、より細かく調整できるようにした機能、「マテリアルノード」を使用しております。各アルファベットの質感については、以下のイメージで進めました。 — W　ナイロンのような、やわらかくてマットでハリのある質感 A　惑星のような、線のうねりを付与 R　膜の中の構造が透けてみえ、中の球体は質量の違いを見せる P　ろうそくのような質感、溶ける質感を付与マテリアルの付与、モデリングは先輩デザイナーのI氏にもプロジェクトに参加いただきご協力いただきました。大変勉強になり..ご協力なしではこの形にたどり着けませんでした。Aは最初透明でしたが「岩松さんが課題感がぬぐえず、どうしても変更したい…」とのことで3人でMTGを重ね、新しいAが爆誕しました！完成したロゴを元にアニメーション制作を進めました。<blockquote class="twitter-tweet" data-dnt="true" align="center">WARPの開発環境において、ロゴの『A』に課題感があり..ねちっこく『A』と向き合い続けた結果..新しい奇跡の『A』が爆誕した..☺️ <a href="https://t.co/y1y1ons0NI">https://t.co/y1y1ons0NI</a> <a href="https://t.co/iPPmP2tmAb">pic.twitter.com/iPPmP2tmAb</a>— 岩松翔太｜M-HAND, Inc. (@IwamatsuShota) <a href="https://twitter.com/IwamatsuShota/status/1644284938664173570?ref_src=twsrc%5Etfw">April 7, 2023</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<h3 style="text-align: start" id="h03bb6b0ede">アニメーションについて</h3><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/661ba4cebe224049890a1323cdebf8d1/picture_pc_5ef7930155039bece39d648d7f555031.gif" alt="" width="800" height="440"></figure>アルファベットひとつひとつに固有の動きの付与を行いました。アニメーションを付ける上で、一番難しいと感じたのが「R」の球体の動きです。自然な動きを再現する為に、何度もスピード感や、タイミングを調整し、今のアニメーションに着地しました。<h3 style="text-align: start" id="h922edff87b">実装</h3><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/1f37ef84a3e34207888a493caed8cbc6/1693476532635-ysGRvXyqPG.png" alt="" width="800" height="455"></figure>※WARPは社内サイトで運用しておりますデザインに3Dロゴを挿入した際の見え方に注意し、再度色味の調整を加えて、完成に至りました。実装フェーズではエンジニアさんとコミュニケーションを重ね、データ形式などを調整しました。また、MARPのロゴが反転して、3Dに切り替わるというローディングの演出も実装されています。

04. エムハンドの具体的な取り組み

Blenderの学習を進める際に、参考にしたサイトをご紹介いたします。これらのサイトは、Blenderに関する情報が豊富で、初心者から上級者まで幅広いレベルのユーザーに価値のあるコンテンツが提供されています。是非、参考にしてみてください。<figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/359eec7fa09d49eda16cb6457d5fac62/1693555830829-FdPxPjA7TB.png" alt="" width="599" height="368"></figure>＜ The_Movie ＞ Blenderのアドオンやチュートリアル情報がまとめられています。<a href="https://twitter.com/The1Movie?t=bJU62V1LN-WGERj3yC69yg&amp;s=09">https://twitter.com/The1Movie?t=bJU62V1LN-WGERj3yC69yg&amp;s=09</a> <hr><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/a4a0f07bbf814a9bb43045b42d108915/1693555732211-J56PYeGpUL.png" alt="" width="800" height="498"></figure>＜ M design ＞ 操作やモデリング手法を、分かりやすく動画で説明されています。<a href="https://www.youtube.com/channel/UC43rvZEhtRwf19ZRApwbtvg">https://www.youtube.com/channel/UC43rvZEhtRwf19ZRApwbtvg</a> <hr><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/16334624e3984accabc04c2f42122e37/1693555772669-DTJ5B2eGtq.png" alt="" width="800" height="500"></figure>＜ Yuki’s blender school ＞ モデリングからマテリアルの作成方法、ライティングやカメラ設定まで詳しく説明されています。<a href="https://www.youtube.com/@yuki_blender">https://www.youtube.com/@yuki_blender</a>

05. 学習の参考にしたサイトなど

ツールの使用方法の理解から始まりましたので、最初は何度もつまづいてしまいました..。blenderの経験者である、先輩デザイナーに助けていただいたり自主学習を進めることによって、少しづつ理解が広がり、自分の思い通りの表現が出来るようになりました。また、3DCGを扱うことができれば、サイト制作を3次元の視点で見ることができ、制作の幅が広がると感じております。冒頭に述べた通り、サービスに落とし込むまでには至っていないのが現状ですが、学習した情報を蓄積、社内で共有することによって僕自身が起点（できることを増やす）となっていきたいです。技術習得者が増えることによって、プロジェクトや案件の対応幅が広がり組織の強みに変換することを目標にし、技術的な壁をクリアしていきたいと考えております。最後までお読みいただきありがとうございました。writer – 宮崎大吾　<a href="https://twitter.com/Daigo_Miyazaki" target="_blank" rel="noopener noreferrer nofollow">@Daigo_Miyazaki</a>

WebデザイナーのBlender入門

01. 3DCGツールについて

02. Blenderとは？

03. 3DCGを活用した事例

04. エムハンドの具体的な取り組み

05. 学習の参考にしたサイトなど

06. まとめ

Related Blogs

デザインで意識することについて

レスポンシブデザインとリキッドデザイン？それぞれの特徴とメリット、デメリット！

描画モードが乗算のオブジェクトをデザイン通りにスライスするPhotoshopテクニック

「ホームページ」と「トップページ」表現としてより正しいのはどっち？