こんにちは。UIデザイナーの楊です。現在はスタジオディテイルズで活動しており、最近は3DCG Designer / Motion grapherとしてブランディングのプロジェクトを担当しました。

https://twitter.com/studiodetails/status/1606108780777070592

今回は、2022年9月16日に発売されたグッドパッチエンジニアによる技術書「デザインエンジニアリングのすすめ」の表紙制作のプロセスについて紹介します。3D表現でビジュアルデザインの可能性を広げることに挑戦したので、3DのCGデザインやモーショングラフィックなどに興味がある方に読んでいただけるとうれしいです！

3Dによるビジュアル表現に挑戦した理由

ビジュアルデザインの表現の幅を広げるためにBlenderを触り始めたころ、Woltやzenlyなど3Dの表現をUIに入れ込むデジタルプロダクトが世の中に増えてきたことに気づきました。

2021年にMicrosoft社が開発したMicrosoft Fluent Emojiという絵文字デザインシステムも、3D表現で作られた1800個以上の絵文字で構成されています。

（画像引用元：https://www.mwinckelmann.com/microsoft-emojis）

その一方、YouTubeやTikTok、Netflixなどコンテンツが中心のサービスにおけるUIは、没入感を高めるためにスタイル要素がどんどん透明になり、すべてのオブジェクトが一つの平面上に存在しているように感じられます。そんななか、3D表現はデジタルプロダクトを差別化するための手段のひとつになり得るのではないかと私は考えています。

これまでは個人でBlenderを触って練習をするのみでしたが、造形の自由さやレンダリングの美しさに感動し、いつかこのツールを使って仕事でもアウトプットがしたいなと思っていたところ、今回機会をもらったので、挑戦してみることにしました！

具体的なデザインプロセス

1.ヒアリング

今回制作するのはエンジニアが寄稿した技術書だったので、エンジニアチームに対して2パターンのアイデアを提案。まずはエンジニアが共感できたり手に取りやすい配色、造形の特徴を掴むために、提示した参考画像から気になったポイントを言語化してもらいました。

パターン1
・エンジニアという職種を代表するようなモチーフを並べて画面に配置する
・特徴：空間のz軸を強調しない、ややフラットな構図

パターン2
・少し抽象的な表現を加え、特定の職種ではなく世界を表現する
・特徴：空間の演出により立体的な表現

＜初回ヒアリングで提示した参考画像のイメージ＞

ヒアリング中にライフスタイルや仕事・ツールにまつわるキーワードを書いてもらったところ、あるメンバーから「デザイナーとエンジニアをつなげる橋」というキーワードが出てきました。グッドパッチのエンジニアらしさもあり惹かれたので、「デザイナーとエンジニアをつなげる橋」をビジュアル全体のコンセプトにしてモデリングの構築を行いました。

＜ヒアリングにはオンラインホワイトボードのStrapを活用！＞

2.ラフ

アイデアを発散しながら、出版社に提出するための草案を描きました。
本の表紙だったので、ラフの段階からタイトルなど必要な要素を踏まえてレイアウトを考えています。

ラフ段階からこまめにSlackでエンジニアチームに共有し、リアルタイムでフィードバックをもらったり、反応をもらえることが制作のモチベーションにもなっていました。

3.モデリング＆ブラッシュアップ

モチーフが確定したら、あとはひたすら制作に没頭します。文字を加えてもレイアウトのバランスが崩れないように工夫しました。

モデリングの制作がだんだん落ち着いたタイミングで、下記2パターンで配色を展開して、社内で投票を行いました。

少し面白かったのは、UIデザイナーに限った投票結果は明らかにWhite.verの支持が多かったのですが、他職種の方を呼び掛け再投票した結果は大逆転で、Blue.verの票数はWhite.verの3倍以上上回る結果となりました。 White.verは全体的に明るい印象で、洗練された清潔感を与えるところはUIデザイナーのメンバーたちに好まれただろうと思いますが、グッドパッチらしさがより伝わることを踏まえてBlue.verの方向性で最終調整を行いました。

そのほか色味、文字組みや光のバランス（特に地面の反射）などは全部Photoshop様に任せて調整しています。細かい部分はかなり丁寧に調整したため、モデリングの制作よりも時間を使いました。

4.完成！

最終的に完成した表紙がこちらです！

表紙もじっくり見ていただきたいですが、内容も有志エンジニアの実践知が詰まっています。ご興味がある方はぜひご覧ください。

https://goodpatch.com/blog/designengineering-book

せっかくなので、Zoom背景やデスクトップにも使えるように展開して社内で共有もしました。

振り返り

出力の初期設定から、細かいところの造形と照明の当て方、そして印刷物における色校まで、色々トライしてみたら、まだまだ技術を磨いていく必要があると思います。そして今回の制作を通して、1つの要素を立体に描くだけではなく、画面の奥に存在するz軸をより意識することができるようになりました。紙媒体のため最終的には平面に着地するような形になりましたが、今後はデジタルの領域において3Dの可能性を探り続けたいと思います。

これから3D表現を勉強してみたいという方は、まずは初心者向けの講座を参考にして簡単なオブジェクト制作から始めてみてはいかがでしょうか。

ちなみに、自分が初めてBlenderで作ってみたものがこちらです。Blenderに挑戦する人が必ず通る道であり、世界一有名な3Dドーナツとも呼ばれています。

当時はこの動画シリーズを参考にしました。みなさんもぜひトライしてみてください🍩

 

Share on

Yang Peiyuan
中国出身、2017年来日。インダストリアルデザイン専攻。2021年、GoodpatchにUI/VDデザイナーとして新卒で入社。辛いものとぼーっとすることが好き。