プロジェクト概要
新規立ち上げとなるメンズ化粧品ブランド「garat」の公式ECサイト制作プロジェクトです。クライアントへのヒアリングから要件を定義し、ワイヤーフレームの作成、ブランドロゴのデザイン、商品LPを含む全ページのUI/UXデザインを担当。さらにフロントエンドのコーディング、EC-CUBEを用いたCMS（カートシステム）構築、クレジットカード等の決済システム導入に至るまで、ECサイト構築に関わるすべての工程を単独で完遂しました。
基本情報
サイト名: GARAT STORE
URL: https://garat.xyz/
サイトカテゴリ：ECサイト
担当領域
Webディレクター / Webデザイナー / フルスタックエンジニア
（顧客対応・ヒアリング / ワイヤーフレーム作成 / ロゴデザイン / 全体UI・ビジュアルデザイン / 商品LP制作 / HTML・CSS・JSコーディング / EC-CUBE構築 / 決済システム導入）
プロジェクトの目的と課題
- ブランドアイデンティティの確立: 新規メンズコスメブランドとして、ターゲット層（美意識の高い男性）に刺さる洗練された男らしさと信頼感を、ロゴやサイト全体で表現すること。
- カゴ落ちを防ぐスムーズな購買体験: 商品の認知から購入完了まで、ユーザーがストレスなく操作できる分かりやすいカート機能と決済フローを構築すること。
- フルスクラッチの要件をシステムに落とし込む: クライアントの要望を的確にヒアリングし、デザインの美しさを損なうことなくEC-CUBEの実装・決済連携まで一人で破綻なく作り上げること。
施策とこだわったポイント
「男らしさ×オーガニック」を体現するビジュアルデザイン
メンズコスメらしいブラックやダークグレーを基調としたシックで高級感のあるトーンの中に、商品の強みである「オーガニック成分」を連想させる植物のビジュアルを効果的に配置しました。ブランドロゴの鮮やかな「グリーン」をアクセントカラーやCTA（購入ボタン）に用いることで、スタイリッシュでありながら視認性の高い、洗練されたUIを実現しています。また、セクションの境界を斜めにカットするあしらいを取り入れ、スタイリッシュな疾走感を演出しました。
2. 購買心理に基づく、ストーリー型のLP情報設計
商品LPでは、「男性特有の肌トラブル」に対する共感から入り、その解決策（成分・機能）、愛用者の声、よくある質問へと流れる、ユーザーの購買心理に寄り添ったストーリー型の構成を構築しました。単にきれいなページを作るのではなく、読み進めるごとに納得感を高め、自然とコンバージョン（購入）へと導くマーケティング視点を持ったレイアウト設計を行っています。
3. ヒアリングから決済導入までを担う圧倒的なワンストップ対応力
本プロジェクト最大のポイントは、ブランドの顔となる「ロゴデザイン」や「ストーリー性のある商品LP」といったクリエイティブ領域だけでなく、裏側の「EC-CUBE構築」や「決済システム導入」という高度なエンジニアリング領域までを一人で繋ぎ合わせた点です。要件定義から実装まで一気通貫で対応することで、デザインの意図を寸分違わずシステムに落とし込んだ高品質なECプラットフォームを構築しました。
成果・評価
「ゼロからのEC事業立ち上げ」を一人で牽引・実現する総合力
全くのゼロベースからクライアントの想いをヒアリングし、ブランド構築（デザイン）と販売基盤（システム）の両面を一人で形にしました。ディレクターとしての折衝力、デザイナーとしての表現力、そしてエンジニアとしてのシステム構築力を兼ね備えていることを証明する実績です。
