O&O&O
PROJECT DETAILS
プロジェクト概要
ターゲット年齢を踏まえた上品さと清潔感の両立
主な想定ユーザーが若年層に限られないため、配色は白を基調にアクセントを抑え、落ち着いた写真トーンと浅い影で品位を保ちました。
同時に、余白を広めに取り文字間と行間をゆったり設計し、可読性を重視した静かな画づくりで“清潔感のあるやさしさ”を前面に出しました。
ターゲット年齢を踏まえた上品さと清潔感の両立
主な想定ユーザーが若年層に限られないため、配色は白を基調にアクセントを抑え、落ち着いた写真トーンと浅い影で品位を保ちました。
同時に、余白を広めに取り文字間と行間をゆったり設計し、可読性を重視した静かな画づくりで“清潔感のあるやさしさ”を前面に出しました。
余白と階層で読みやすさを担保
トップはキャッチコピー、認証の根拠、製品紹介、会社情報という順序で情報の粒度を段階化し、各ブロックの上下に十分な余白を置いて視線の停留点を明確にしました。
目的の異なる情報を一画面に詰め込まず、スクロールのリズムで理解が積み上がるようページ階層を整えています。
余白と階層で読みやすさを担保
トップはキャッチコピー、認証の根拠、製品紹介、会社情報という順序で情報の粒度を段階化し、各ブロックの上下に十分な余白を置いて視線の停留点を明確にしました。
目的の異なる情報を一画面に詰め込まず、スクロールのリズムで理解が積み上がるようページ階層を整えています。
悩みから購入までを一画面で導く設計
製品ページでは、まず「乾燥」や「かゆみ」など身近な悩みを入口に据え、その解決につながる成分や理由を短い文章で示しています。続いて「ワンプッシュ」「入浴後」といった具体的な使用タイミングや目安量を提示し、初めての方でも安心して試せるようにしました。
さらにCOSMOS ORGANIC認証や全成分、経皮吸収に関する情報を同じ画面内に配置し、安全性と信頼感を担保しています。そして、ページの上部と末尾には購入ボタンを設け、STORESやAmazonといった既存の購買習慣に合わせた導線で、迷わずスムーズに購入いただける設計としました。
悩みから購入までを一画面で導く設計
製品ページでは、まず「乾燥」や「かゆみ」など身近な悩みを入口に据え、その解決につながる成分や理由を短い文章で示しています。続いて「ワンプッシュ」「入浴後」といった具体的な使用タイミングや目安量を提示し、初めての方でも安心して試せるようにしました。
さらにCOSMOS ORGANIC認証や全成分、経皮吸収に関する情報を同じ画面内に配置し、安全性と信頼感を担保しています。そして、ページの上部と末尾には購入ボタンを設け、STORESやAmazonといった既存の購買習慣に合わせた導線で、迷わずスムーズに購入いただける設計としました。
ブランドの空気感をやさしく添える動画
トップに配置した動画は、モデルが製品を手に取り肌に馴染ませる様子や、ソープを泡立てて使用する場面など、実際の使用シーンを切り取った映像をループさせています。リビングやバスルームといった日常的な空間を背景に、プロダクトの質感や暮らしに溶け込む雰囲気を淡々と映し出すことで、ブランドのイメージを自然に補っています。過度に主張せず、ページ全体の清潔感や上品さを損なわないトーンで仕上げました。
ブランドの空気感をやさしく添える動画
トップに配置した動画は、モデルが製品を手に取り肌に馴染ませる様子や、ソープを泡立てて使用する場面など、実際の使用シーンを切り取った映像をループさせています。リビングやバスルームといった日常的な空間を背景に、プロダクトの質感や暮らしに溶け込む雰囲気を淡々と映し出すことで、ブランドのイメージを自然に補っています。過度に主張せず、ページ全体の清潔感や上品さを損なわないトーンで仕上げました。
担当:
情報設計・デザイン・コーディング・Wordpress構築・動画撮影・編集
Art Direction:mldk designs
WEBSITE
→
OTHER CASE STUDIES
navii岐阜県垂井町のアイウェアショップのWebサイトWeb Design / Development / Video/Photo2018-
MAWSIMブランド・プロジェクト紹介WebサイトWeb Design / Development2023-
TYPE U高品質な住空間のブランドサイトWeb Design / Development / Graphic Design / English2025-
ワタナベ自動車地域の自動車屋さんのWebサイトWeb Design / Development2025-
LIVING DESIGN造園・外構エクステリア業者のロゴ・WebサイトWeb Design / Development / Graphic Design / Video/Photo2025-
GICOMA岐阜現代美術館のWebサイトWeb Design / Development / English2024-

