■担当範囲
ディレクション / Webデザイン / フロントエンドエンジニア
■使用ツール・言語
Shopify (Liquid) / JavaScript / CSS / Adobe XD
作品説明 テレビ番組や映画制作にも使用される、業務用ビデオカメラ・撮影機材のオンラインレンタルサイトを新規構築いたしました。
【Technical Strategy (Shopify Customization)】 通常のECカートシステム(物販)では対応が難しい「レンタル期間の指定」や「期間に応じた価格変動」を実現するため、Shopifyをベースに高度なカスタマイズを行いました。 カレンダーUIを用いた直感的なレンタル日数の選択機能や、延長料金の自動計算ロジックを実装。 拡張性の高いShopifyを採用することで、将来的な機材の追加や在庫管理の効率化にも柔軟に対応できるシステム基盤を構築しています。
【Direction & Design (Adobe XD)】 プロの現場で使用される高額機材を扱うため、「信頼感」と「スペックの比較しやすさ」を重視してデザインしました。 Adobe XDを用いて、初めて利用するユーザーでも「会員登録(審査)→予約→返却」の流れがスムーズに理解できるご利用ガイドを設計。 機材一覧ページでは、カメラの型番や特徴が一目で分かるレイアウトを採用し、映像制作のプロフェッショナルがストレスなく機材選定を行えるUIを実現しています。