ブランドの哲学と世界観を直感的に伝えるデザイン設計

「自然の力を生かす」「エネルギーの循環」「科学的な視点とフィードバック」というTOTONOUが大切にする3つの軸を、抽象的になりすぎず、訪れたユーザーが直感的に「心地よさ」「健やかさ」を感じられるビジュアル表現が求められました。

プロダクトのこだわりと利用シーンの可視化

無農薬・手摘みで大切に育てられた沖縄県産よもぎ茶「FŪCHIBĀ」やよもぎ蒸しパックなど、商品の高い品質や安心感、日々の暮らしに寄り添う取り入れ方を分かりやすく伝える必要がありました。

ブランド認知から購買・予約へのシームレスな動線設計

ブランドの想いやコンセプトを深く知ってもらった上で、オンラインストア（EC）や測定セッションの予約窓口へストレスなく遷移できる導線づくりが課題でした。

ミニマルでオーガニックなトーン＆マナーの構築

自然の息吹や身体がほどける感覚を想起させるナチュラルなカラーパレットと、丁寧なタイポグラフィ、ゆとりのある余白設計を採用。サイト全体を通して穏やかで洗練された空気感を醸成しました。

ストーリーテリングを重視した縦スクロール構成

トップページから順を追って「ブランドコンセプト（TOTONOUとは）」「大切にしている視点」「プロダクト・サービス紹介」へと読み進められるストーリー構成に。初めてブランドに触れるユーザーでも自然と共感が深まるコンテンツ設計を行いました。

オンラインショップ（STORES等）とのスムーズな連携

商品の特徴やおすすめポイントを端的に整理し、各プロダクトから外部オンラインショップの購入ページへ迷わず進めるよう、分かりやすいCTA（購入ボタン）を配置しました。。

スマートフォンでの読了感を意識したレスポンシブコーディング

スマートフォンからのSNS経由・自然検索での流入を想定し、縦長レイアウトでもスクロールのリズムを損なわない軽量なコーディングと、写真が美しく映えるレスポンシブ表示を追求しました。

ブランドの世界観を崩さずEC購買へつなげるコンバージョン設計

「整い」の哲学を伝える静けさのあるトーンを維持しながら、各プロダクト詳細から外部ECストア（STORES）の購入ページへ迷わず進めるリンク・導線を自然に配置。ブランドへの共感をそのまま購買アクションへと繋げる導線を実現しました。

余白のリズムと流れるようなスクロールアニメーション

縦スクロールに合わせてテキストや商品画像が自然に浮かび上がる繊細なトランジションを実装。過度な演出を避け、呼吸を整えるように心地よく読み進められるユーザー体験（UX）をブラウザ上で体現しました。

InstagramなどのSNS流入に最適化されたファーストビュー設計

SNS経由で初めて訪れたユーザーが、数秒で「何を取り扱うどのようなブランドか」を理解できるよう、キービジュアルとブランドコピーのバランスをミリ単位で調整。モバイルでの離脱を防ぎ、下層ストーリーへのスクロールを促す工夫を施しました。