デザイナー（3D制作含む）兼フロントエンドエンジニアのH.Sです。 弊社では、デザインから実装、イラスト、3Dまで、領域をまたぎながら色々な役割を担当しています。
あるWebプロジェクトでは、主に「3Dクリエイティブ」「実装」「レスポンシブにおけるデザイン補完」を担いました。その兼任した視点から、制作の裏側で行った小さな工夫をピックアップして書いてみます。
デバイスを行き来する環境と、繰り返される調整作業
本プロジェクトでは、Webサイトのメインビジュアル等に使用する3D画像の制作と、ノーコードWeb制作プラットフォーム「Studio」を用いたフロントエンド実装の両方を担当しました。 私は普段Macbook Proを使用していますが、3D制作では快適に操作するためにはスペックが厳しいため、3D制作（Blender）はWindowsPCで、Web実装（Studio）はMacbook Proで行うという、2台のPCをまたいで進めることにしました。 「3Dの角度を少し変える」という微調整だけでも、再レンダリング→Figmaに配置→別のPCで見た目を確認→書き出して実装に反映...という長い手順を踏むことになります。
この物理的なデバイスの移動と反復作業のループは、どうしても作業のリズムや集中力を途切れさせてしまう原因になっていました。
自動化への工夫と、明確なルール化
この状況を打破し、実装に割く時間を確保するために、いくつかのアプローチを取り入れました。
Photoshop「アクション機能」で、レンダリング後の画像調整時間を削減
レンダリング後の色味調整（明るさや彩度など）と書き出し作業において、修正のたびに繰り返される同じ作業を短縮できないかと試みました。そこでPhotoshopのアクション機能を組み、画像補正から書き出しサイズ用のトリミングまでフローを自動化しました。 これにより、これまで画像1枚の修正にかかっていた約10分という時間を大幅に効率化し、最終的なWeb用表示に向けた微調整はデザイナーさんにお願いしつつ、1枚あたり約1分での対応が可能になりました。
Studioのホバー表現をコード実装へ統一し、デザインの整合性と保守性を両立
Studioは非常に便利ですが、標準機能だけでは届かない細かなインタラクションやスタイリングの調整には、普段からカスタムコード（新しいタブで開く）を活用しています。ただ、これまでの経験上「基本はStudioで設定し、ホバー時のアイコン色変更など難しい部分だけコードを書く」というハイブリッドな使い方をすると、後から管理が複雑になりがちでした。
そこで今回は、「ホバー表現はすべてカスタムコードで実装する」と事前にルール化することで、Studioの機能とコードがごちゃ混ぜになるのを防ぎ、スッキリと整合性を保ちながら迷わず実装を進めることができました。
デザイナーの意図に寄り添う、実装フェーズでの補完
また、実装フェーズにおいて特に意識したのは「ブレイクポイント間の補完」です。 すべてのウィンドウサイズに対してデザインカンプを用意してもらうのは非現実的です。そこで、
- スマートフォン（〜480px）
- タブレット（481px〜990px）
- PC（991px〜1365px）
- ワイドデスクトップ（1366px〜）
と変化する中で、「このデザインなら、どう見せるのが最適か」というUI/UXの視点やデザイン的な美しさを保つことを心がけました。少しでもデザインの意図に寄り添えるよう、カンプのない領域のレイアウトを実装側で最適化していきました。
スプーンのエンジニアメンバーは皆UI/UXへの関心がとても深く、私自身がデザイナーとしてプロジェクトに入る際も、実装側から意図を汲み取って補完してもらい、何度も助けられてきました。今回は自分が実装に回ったことで、改めてそのありがたみを実感しつつ、少しでもデザイナーさんの意図に寄り添い、デザイン的な美しさを保つことを心がけました。
次なる課題と、これからも続く試行錯誤
こうしたワークフローの改善によって、各ビジュアルのブラッシュアップに余裕を持って時間を充てることができました。無事にデザイナーさんの美しいデザインの中に3D画像を落とし込み、メインビジュアルとして機能させられたことにホッとしています。
3D制作とフロントエンド実装という2つの領域を横断したことで、デバイス間の壁やワークフローの課題など、実際に手を動かしてみないと分からない多くの気づきがありました。
今回は色味の調整などでPhotoshopなど他のアプリケーションを経由したり、デザイナーさんに最終調整をお願いする場面がありました。今後はBlender内での表現力や調整精度を高め、他ソフトを経由するステップを減らすことで、よりシームレスで質の高いアウトプットを目指していきたいです。