間伐材を扱う架空ECブランド「KOMOREBI」のサイトデザイン。
1. コンセプト設計 ターゲットを「環境意識の高い都市生活者」に設定し、ブランドの世界観を構築するところから始めました。ブランド名の「KOMOREBI(木漏れ日)」は、森の中で葉の隙間から差し込む光をイメージした言葉で、扱う商材である「間伐材」が持つ"森を健やかに保つために生まれる素材"というストーリーと自然に結びつくよう選定しています。単に商品を売るECではなく、間伐材の意義や森林との共生といった背景まで伝えられる構成を目指しました。 2. 情報設計・ワイヤーフレーム ユーザーが「ブランドに共感する → 商品を知る → 購入を検討する」という導線をたどれるよう、ファーストビューでのブランドメッセージ、間伐材についての説明セクション、商品紹介、ブランドストーリー、購入導線という流れで情報を整理しました。スクロールしながら自然と物語に引き込まれるような構成を意識しています。 3. ビジュアルデザイン 世界観を表現するために、木漏れ日や森を連想させるアースカラー(ベージュ、深いグリーン、温かみのある木の色)を中心としたカラーパレットを採用しました。タイポグラフィは、和の落ち着きと現代的な洗練を両立させるため、明朝系とサンセリフを組み合わせて使用しています。余白を大きくとり、写真やコピーがゆったり呼吸できるようなレイアウトに仕上げました。 4. 使用ツール デザインから実装(プロトタイピング・公開)まで、すべて Figma で完結させています。Figma の作図機能でビジュアルを作り込み、Figma Sites のパブリッシュ機能を用いてそのままウェブサイトとして公開する形をとりました。これにより、デザインカンプとアウトプットの間にズレが生じることなく、意図したビジュアルをそのまま閲覧者に届けられる構成になっています。 5. こだわったポイント 「サステナビリティ」というテーマがメッセージとして押し付けがましくならないよう、語り口や写真選定はあくまで穏やかで、生活者目線で寄り添うトーンを保つことを意識しました。読み手が押されるのではなく、自然と"この素材で作られたものを暮らしに取り入れてみたい"と思えるような体験設計を目指した作品です。