Naterra

自然素材を扱う雑貨店を想定し、ブランドの世界観と購入しやすさを両立するECサイトを制作しました。主なターゲットは、暮らしの質や素材感を重視して雑貨を選ぶ30歳前後の女性です。

初回訪問でもブランドの雰囲気を感じながら、商品を探し、カートに入れ、購入完了まで迷わず進める体験を目指して設計しました。

キャッチコピーには「自然と、くらす。」を設定しました。自然素材の温かみや、日々の暮らしに静かになじむ心地よさが伝わるブランド体験を目指し、過度に装飾せず、余白や色味でやさしい印象を表現しています。

ロゴでは、3枚の葉のモチーフを用いて、自然・調和・持続可能性を表現しました。葉の重なりには、自然な循環や成長のイメージを込めています。

商品タグやショップカード、SNSアイコンなど、複数の接点で展開しやすいシンプルな形を意識して制作しました。

UIでは、ブランドのやわらかな世界観を保ちながら、商品を探して購入するまでの流れが分かりやすくなるよう設計しました。トップページではブランド訴求、人気商品、新着商品、カテゴリ導線を整理し、初回訪問でも商品一覧や詳細ページへ進みやすい構成にしています。

カートやカテゴリはオーバーレイで表示し、閲覧の流れを大きく妨げずに操作できるよう意識しました。

HTML、CSS、JavaScriptを用いて、トップページ、商品一覧、商品詳細、カート、チェックアウト、購入完了までの主要画面を実装しました。

画面デザインだけで終わらせず、商品を探す、カートに入れる、購入手続きへ進むといった一連の購買体験を確認できる形にしています。

このプロジェクトでは、ブランドの世界観を表現するだけでなく、商品探索から購入完了までの流れを一貫して設計する重要性を学びました。

特にECサイトでは、カテゴリの分かりやすさ、カート投入後の状態変化、購入前の不安を減らす情報設計が体験の質に影響すると感じました。今後は、商品詳細への遷移、カート投入、チェックアウト離脱などの観点から、購入導線を検証できる設計にしていきたいです。