愛媛県松山市でホームページ制作を行うアウトラインのロゴマーク

コスメ

プロジェクト期間:

Concept Work #04 // nagi organics

    Concept Work #04 // nagi organics

    ー 肌、凪ぐ。自分、還る。 ー

    「オーガニックコスメのホームページといえば、白やベージュの背景に緑の葉っぱ…そんなお決まりの『やさしさ』のビジュアルばかり。しかし、その無難な表現のせいで、このブランドが持つ圧倒的な革新性と誠実さが、他の製品に埋もれてしまっている…」

    そんなもったいない状況にあるオーガニックコスメブランドを想像して、「もし私が、その魅力を最大限に引き出すなら?」と、ワクワクしながら考えたデザイン案です。 「ナチュラル=明るい・白い」という業界の固定観念(コード)を破壊し、「水不使用・100%成分処方」という工学的な美しさを突き詰めた、私の「理想のD2Cブランドサイト」のカタチを、等身大の言葉でまとめてみました。


    ■ 01. 誰に届けたいサイトか?(仮想設定)

    このプロジェクトでは、以下のようなお客様をイメージして設計を進めました。

    • どんな会社?: 希釈のための水を一切使わず、妥協のない成分濃度を追求する100%オーガニックコスメブランド「nagi organics(ナギ オーガニックス)」さん。

    • 悩み: 「オーガニック」という言葉だけでは、他社の雰囲気重視のナチュラルコスメと同じカテゴリに括られてしまい、製品の核心である「水ゼロ・高濃度処方」というサイエンティフィックな強みが伝わっていない。

    • 届けたい相手: 感情的なイメージ広告や格安の美容液に惑わされず、成分の「根拠」やブランドの「誠実さ」を厳しく見極めて選びたい、30〜50代の本質志向の女性。


    ■ 02. 私が込めた「こだわり」のタネ

    ◆ 「精密機器」のように組み上げるという考え方

    このブランドの核心は、水を一切使わないという工学的な意思決定です。それは化粧品というよりも、Appleのプロダクトや高級オーディオのような精密機器に近いもの。だからこそ、サイト全体をダークトーンで統一し、タイポグラフィと緻密なデータで語りかける、圧倒的に知的で洗練された世界観を主役に据えました。

    ◆ デザインに込めた工夫

    • 業界の常識を覆す「漆黒の世界」と「意志の光」 従来のスキンケアサイトでは禁じ手とされるチャコールブラック(#111827)を全面に採用。この暗闇のような世界の中で、アクセントカラーであるラベンダー(#A78BFA)を「唯一の意志の光」として機能させました。CTAボタンには静かに発光するグロウエフェクト(box-shadow)を実装し、かわいさのためではなく、購買への視線を自然に導く「サイエンスの灯火」として演出しています。

    • 研究室の記録を思わせるタイポグラフィ 見出しには幾何学的でエッジの効いたサンセリフ体(Syne)を大きく配置し、タイポグラフィそのものをグラフィックとして機能させています。また、成分データやスペックの表記には等幅フォント(DM Mono)を採用。「研究室のデータシート」を覗き込んでいるかのようなプレシジョン感(精密さ)を演出し、日本語の本文は行間2.0と広く深く持たせることで、知的な読了体験を提供します。

    • 「before/after」に頼らない、根拠の可視化とClarity設計 安易な効果写真や星評価(★)はいっさい使わず、成分構成比のインフォグラフィックと精密な詳細テーブルで誠実さを証明しています。さらに、ユーザーがどの成分に強い関心を持っているかをヒートマップ(Clarity)で計測。テーブル上での「スクロールの停止位置」や「タップの挙動」を正確にデータ化し、薬機法を徹底遵守しながらも、ユーザーの知的好奇心に最も響くコンテンツ配置へと動的に最適化していける構造を組み込みました。


    ■ 03. さいごに

    このページは、私の「こんなサイトがあったらいいな」を詰め込んだ真っ白な状態からの設計図です。 ホームページの作成/リニューアルを検討中のお客様には、「実例」と一緒にこの「コンセプトワーク」をご覧いただくことで、私がどんな想いで、どんな風に皆さんの魅力を形にしようとしているのか、そのプロセスを少しでも身近に感じていただけたら嬉しいです。

    ▼ 実際のデモサイトをのぞいてみる

    こちらからご覧いただけます。

    ▼ おことわり

    このプロジェクトは、Web制作の裏側や考え方を知っていただくための「架空のデモプロジェクト」です。実際のお仕事では、あなただけのストーリーを一緒に見つけるところからスタートします。

    ホーム

    >

    実績

    >

    Concept Work #04 // nagi organics

    図形の画像

    CAREER

    arrow_forward

    採用情報

    【準備中】