【プロジェクト概要】 持続可能な食生活を提案するオーガニック食材宅配サービス「GREEN BASKET」のランディングページを制作しました。 現代の健康志向の高まりとサステナブルな消費への関心増加を背景に、新規会員獲得とブランディング強化を目的としています。 ターゲットは30代〜50代の健康や環境に関心の高い都市部在住の消費者です。 【デザイン・企画のアプローチ】 1. プロジェクト開始時にユーザーインタビューを実施し、オーガニック食材購入時の主要関心事を特定 2. 「品質への信頼性」と「購入プロセスの透明性」をキーポイントとして設計を進行 3. モバイルファーストの設計アプローチにより、すべてのデバイスで最適な表示と操作性を確保 4. 商品の鮮度や有機栽培のこだわりが伝わるビジュアル中心のデザイン設計 5. CTA（行動喚起）ボタンの視認性と配置を戦略的に計画し、明確な導線を構築 【デザイン面での工夫】 自然の豊かさを感じさせるグリーンを基調としたカラーパレットを採用し、オーガニックの世界観を表現しました。背景には淡いベージュを使用することで温かみと親しみやすさを演出しています。 特に力を入れたのは情報設計です。ユーザーの関心や疑問点を予測し、「特徴→商品→顧客の声→申込み」という自然な流れで情報を配置。各セクションの視覚的差別化を図りながらも、全体として統一感のあるデザインに仕上げました。 【技術面での工夫】 ReactとTailwind CSSを組み合わせて開発を行いました。Reactのコンポーネントベース開発により、ヘッダー、商品カード、レビューカードなどを再利用可能なモジュールとして設計。これにより保守性とコード品質を向上させています。 スタイリングではTailwind CSSのユーティリティファーストアプローチを採用し、カスタムデザインシステムを構築しました。特にレスポンシブ対応では、Tailwindのブレークポイントシステムを活用してデバイス間の一貫性を確保しています。