BIRTHDeY

PROJECT DETAILS

プロジェクト概要

オーガニック発想のスキンケアブランド「O&O&O」のウェブサイト制作。ブランドの世界観を伝えることと、製品の安全性や特徴を分かりやすく紹介し、オンラインストアへの購入につなげることを目的としています。

ターゲット年齢を踏まえた上品さと清潔感の両立

主な想定ユーザーが若年層に限られないため、配色は白を基調にアクセントを抑え、落ち着いた写真トーンと浅い影で品位を保ちました。
同時に、余白を広めに取り文字間と行間をゆったり設計し、可読性を重視した静かな画づくりで“清潔感のあるやさしさ”を前面に出しました。

余白と階層で読みやすさを担保

トップはキャッチコピー、認証の根拠、製品紹介、会社情報という順序で情報の粒度を段階化し、各ブロックの上下に十分な余白を置いて視線の停留点を明確にしました。
目的の異なる情報を一画面に詰め込まず、スクロールのリズムで理解が積み上がるようページ階層を整えています。

悩みから購入までを一画面で導く設計

製品ページでは、まず「乾燥」や「かゆみ」など身近な悩みを入口に据え、その解決につながる成分や理由を短い文章で示しています。続いて「ワンプッシュ」「入浴後」といった具体的な使用タイミングや目安量を提示し、初めての方でも安心して試せるようにしました。

さらにCOSMOS ORGANIC認証や全成分、経皮吸収に関する情報を同じ画面内に配置し、安全性と信頼感を担保しています。そして、ページの上部と末尾には購入ボタンを設け、STORESやAmazonといった既存の購買習慣に合わせた導線で、迷わずスムーズに購入いただける設計としました。

ブランドの空気感をやさしく添える動画

OOOイメージビデオサムネイル
VIDEO • Image Film • 31s

トップに配置した動画は、モデルが製品を手に取り肌に馴染ませる様子や、ソープを泡立てて使用する場面など、実際の使用シーンを切り取った映像をループさせています。リビングやバスルームといった日常的な空間を背景に、プロダクトの質感や暮らしに溶け込む雰囲気を淡々と映し出すことで、ブランドのイメージを自然に補っています。過度に主張せず、ページ全体の清潔感や上品さを損なわないトーンで仕上げました。

担当:

情報設計・デザイン・コーディング・Wordpress構築・動画撮影・編集
Art Direction:mldk designs