見出し画像

エンジニア|クリエイターズボイスまとめ-STUDIO DETAILS

徹底してクオリティへのこだわりを持ち、ブランドの価値向上にコミットする。そして、機能させるための本質的なクリエイティブを追い求め新しい技術を惜しむことなく取り入れてきたスタジオディテイルズ(以下、ディテイルズ)のエンジニアユニットには現在10名のメンバーが在籍しています。

同チームはエンジニアリングの観点において、どのようなチャレンジによって「いいもの作り」に向き合い続けてきたのか。

今回はこれまでディテイルズ公式Xで公開されてきたクリエイターズボイスを技術的な観点でまとめました。


ロート製薬株式会社様 採用ブランディング

https://www.rohto.co.jp/recruit/

社内エンジニア全員で力を合わせて仕上げた事例の一つ。
トップページの職種一覧から下層ページに遷移する際、キャラクターが下から飛び出す演出をシームレスに仕上げました。

TT Global 様 リブランディング

https://ttglobal.com/

フロントエンドのメインはディテイルズの技術アドバイザーでもある外部パートナーのunshift長谷川さんに実装いただきました。
実装以外にも、プロジェクトに参加しているディテイルズメンバーのコードレビューもしていただき、大変勉強になりました。

スタジオディテイルズからは、新卒2年目の岩下がフロントエンドの一部からCMS、インフラまで構築しました。初めてのことばかりで分からないことも多い中、最後までやり遂げました。

愛知ドビー株式会社様 バーミキュラブランドサイト、ECサイト

プロジェクト概要

バーミキュラブランドサイト

https://www.vermicular.jp/

水澤がリードエンジニアとしてサイトリニューアルにコミットしています。
以前制作したサイトのリニューアルということで開発環境が古くなっていたので、開発環境も改修してパフォーマンスや効率をより良くする工夫もしました。

オーブンポット 2

プロジェクト概要

水澤を中心に、新卒1年目の森岡、岩井も活躍した事例です。アニメーションの細部にまでこだわり制作しています。

バーミキュラECサイト

https://shop.vermicular.jp/

テクニカルディレクターやリードエンジニアが中心となり、マイクロインタラクションまでこだわって作り上げています。
既存のECシステムにAPIを追加しヘッドレス化させたJamstack構成にすることで、表示速度の速いサイトに仕上がりました。

STYLE PORT Inc.様 コーポレートサイト・サービスサイト

https://styleport.co.jp/

エンジニア歴3年の水澤がWebGLを使った演出を見事に作り上げました。
質感のある3D表現のWebGL実装は難易度が高く、試行錯誤の過程をクリエイターズボイスでコメントしています。

NEWPEACE Inc.様 リブランディング

https://newpeace.jp/

こちらも社内エンジニア全員で力を合わせて仕上げた事例の一つ。
動画のスクロール連動、Astro初導入、非同期ページ遷移の演出など様々な工夫をしました。

RCIエージェンシー様 Webサイト

https://rci-a.com/

難易度の高い3D表現のWebGL演出を作り切りました。通常の動画ファイルの再生とWebGL演出をシームレスにつなげる工夫をしています。

株式会社テックフラッグ様 コーポレートサイト

https://www.tech-flag.co.jp/

Lottieアニメーションをふんだんに使った演出の事例。Lottieだけでは表現できないデザインをWebGLも併用することで実現するなど、細部までこだわりました。

STUDIO DETAILS Webサイトリニューアル

https://www.details.co.jp/

フロントエンドは外部パートナーさんに担当いただき、ディテイルズメンバーはCMS、インフラ構築を担当しています。WordPressをヘッドレス化させたJamstack構成は初の試みでした。

養老ミート株式会社様 ECサイト

https://www.hidagyu-yoromeat-honten.com/

当初、業界でもあまり例のないShopifyをヘッドレス化したJamstack構成でECサイトを制作。初の試みの中でプロジェクトメンバーと共にエンジニアチームとしてもやり切りました。

養老ミート株式会社様 コーポレートサイト

https://www.yoro-meat.co.jp/

WebGLの表現突き詰めた事例の一つです。クリエイティブディレクター、アートディレクターと何度も話し合いながら試行錯誤しています。

リンナイ株式会社様食器洗い乾燥機ステンレスドア プロダクトサイト

https://www.rinnai-dishwasher-weblimited.jp/stainless-door/

スクロール連動演出やイージングにこだわった事例。

八百彦本店様 一升餅サイト制作

https://www.yaohiko.co.jp/isshoumochi/

若手女性エンジニア2人が可愛いマイクロインタラクションまでこだわって作り上げました。ソースコードにまで可愛さが…!

RARA(立命館先進研究アカデミー) Webサイト

https://rara.ritsumei.ac.jp/

パフォーマンス改善をするためにWebGL (PixiJS)を使用したり、一つ一つのアニメーションのイージングを細かく調整したりと工夫をしています。
FWA (FOTD)、CSSDA (WOTD)受賞

PRESS BUTTER SAND ブランドサイト

https://buttersand.com/

ファーストビューのビジュアルはWebGLを使いつつ、背景色までCMSで変更できるという、見た目のクオリティと自由度の高い更新性を両立したサイトとなりました。
FWA (FOTD)、CSSDA (WOTD)受賞

ACSL様 新機体「SOTEN-蒼天」ブランディング

https://www.acsl.co.jp/drone-soten/

プロジェクト概要

WebGLを使ってパフォーマンス改善をしています。

デジタル・アドバタイジング・コンソーシアム株式会社(DAC)様 中途採用サイト

https://career.dac.co.jp/

若手エンジニアの初リードプロジェクト。CSSのclip-pathを使いスクロール連動の演出を仕上げています。



企画 / スタジオディテイルズ エンジニアユニット  編集 / 田代麻依 


スタジオディテイルズのものづくり、クリエイティブに対する向き合い方
技術への取り組みへ興味をお持ちの方はお気軽にHR田代までご連絡ください。

2025年卒新卒採用をマイナビ・Wantedlyにて受付中です。ぜひ、こちらよりエントリーください。


この記事が気に入ったらサポートをしてみませんか?