Daicel

Year
2023.07 - 2024.03
Role
UI Design
Animation
Illustration
Softwares
Figma
Adobe After Effects
Procreate

ダイセル式生産革新は、工場全体の運営・運転を最適化させ、
生産性の飛躍的な向上につなげるダイセルのモノづくりの基盤となる考え方です。

株式会社STARRYWORKSに入社して初めてのWEBデザイン案件です。
アートディレクターが作成したTOPページのトンマナーに合わせて、下層ページのUIデザインを担当しました。
全ページを通してワクワク感を残すために一枚ずつ特別感を出すことが大事でした。
3DCGを活かしたり、背景に3DCGのワイヤー画像を敷いたりすることで、
内容が複雑な割に読むことが面白い・飽きないというサイトを作ることができました。

Drawings

アートディレクターとディレクターの2人とのやりとりはもちろん、
3DCGを使ったサイトなので、3Dデザイナーとエンジニアとやりとりしながらデザインを作ることが重要でした。
‍
3Dデザイナーにキャラクターのイメージを伝えるために、Procreateを使って絵を描きました。
キーワード:未来感、清潔感、宇宙人

業者さんのリアルっぽさを無くしていき、宇宙人っぽく。

男性バージョンと女性バージョン。

English

日本語のサイトが完成しましたら、英語版も欲しいとのことで、
フォントから検証し、英語版を作りました。

賢い・清潔感・理学を表す日本語のフォントに似た英語のフォントを並べ、ディレクターとやりとりしました。
全体的に見ると雰囲気は似ていますが、細いところを見て判断しました。
C案:文字に丸さがあり、賢いより可愛く感じる。なしで。
AとB案で悩んで、長体のB案は日本語に比べると少し違うので、平体のA案で決定。

英語版を作る想定ではなかったため、
SVGで作成していた日本語のタイトルを全て英語にすることが一番苦労な作業でした。
‍
SVGのタイトルを使うことでフォントから字間までこだわることができるが、
翻訳なら英語の文言をコピーペーストするだけではなく、一文字ずつ字間を綺麗にする必要がありました。

図まで英語が綺麗に入るようにします。

Animations

3DCGに入れ込むUIアニメーションを担当しました。
3Dデザイナーとやりとりしながら、尺や細かいところを調整しました。

More Work

03
Animation