WORKS
Stories told through design.
概要
海洋マイクロプラスチックを素材にしたハンドメイドアクセサリーブランド「sobolon」のブランドLPを実装しました。
コンセプト紹介・特徴・商品一覧・ニュース・ブランドストーリー・お問い合わせフォームまでを1ページに集約し、ストーリーを追って読み進められる構成に。
スマホ起点で設計したレスポンシブ対応とカードレイアウト、ヘッダー固定＋スムーススクロールで、初めて訪れたユーザーでも迷わずブランドの世界観と商品情報にたどり着ける実装を行いました。
ターゲット
環境問題やエシカル消費に関心のある20〜30代の女性
制作期間
14日
担当範囲
コーディング
ツール/言語
テーマ
可愛さ / サステナビリティ / 透明性 / 親しみやすさ / 清潔感
コンセプト
「“可愛い”で地球を守る！」
マイクロプラスチックという重いテーマを、ポジティブで前向きなブランド体験として届けることを意識。
FVでブランドメッセージとビジュアルを大きく見せ、その後に
「Concept → Feature → Products → News → Brand Story（Concept2）→ Contact」
と流れるように読み進められる構成にすることで、
“ただのアクセサリーショップ”ではなく「想いのあるブランド」であることが伝わるLPに仕上げました。
情報設計
-
グローバルナビをヘッダーに固定し、各セクションへはアンカーリンク＋スムーススクロールで遷移スマホではハンバーガーメニュー、PCでは水平ナビとして表示を切り替え、どのデバイスでも操作しやすいUIにConcept / Concept2では画像＋テキストの2カラム構成（SPでは縦並び）で「ブランドの想い」を視覚的に訴求
-
Feature / Products / Newsはカードレイアウトを採用し、PCではホバー時に画像拡大アニメーションを付与して視認性と訴求力を向上
-
Aboutセクションはフル幅の背景画像＋暗幕レイヤーで世界観を演出しつつ、上にテキストを重ねて読みやすさを確保
-
Contactはラベル・必須マーク・ラジオボタン・チェックボックス・テキストエリアを整理し、入力ステップが直感的に分かるフォームUIを構築
-
必須項目やプライバシーポリシー同意チェックを視覚的に強調し、ユーザーにとってストレスのない問い合わせ体験を意識した設計にしています。