プロジェクト概要
アンチエイジングを追求する化粧品ブランド「MINION」の公式ECサイト新規立ち上げプロジェクトです。Webディレクターとして直接クライアントへのヒアリングや要件定義を行い、サイト全体の構成・ワイヤーフレームを策定。さらに、サービスの顔となるロゴデザイン、実際の商品のパッケージデザイン（大部分）、サイト内のコピーライティングまで幅広く担当しました。モノトーンを基調としたエレガントなWebデザインの制作から、WordPress（WooCommerce）を用いたECシステム構築、Stripeによるクレジットカード決済導入まで、ブランドの立ち上げから販売基盤の確立に至るすべての工程を一人で完遂しました。
基本情報
サイト名: MINION化粧品
URL: https://minion.link/
ページ全体のスクリーンショット（※現在はリニューアルによりページが変更されています）
サイト種別: コーポレートサイト兼ECサイト（WordPress + WooCommerce）
担当領域
Webディレクター / Webデザイナー / フルスタックエンジニア / コピーライター （顧客対応・ヒアリング / 要件定義 / サービスロゴ制作 / 商品パッケージデザイン / 全体構成・ワイヤーフレーム作成 / 原稿作成・ライティング / 全体UI・ビジュアルデザイン / HTML・CSS・JavaScriptコーディング / WordPressオリジナルテーマ開発・WooCommerce構築 / Stripe決済導入）
プロジェクトの目的と課題
-
ブランドの世界観（トーン＆マナー）の確立: 新規スキンケアブランドとして、「大人の女性向けの高級感・アンチエイジング」というコンセプトを、ロゴや商品パッケージからWebサイトの隅々まで一貫して表現すること。
-
スムーズな購買体験を提供するEC基盤の構築: カタログ的な情報発信だけでなく、ユーザーが迷わずカートに入れ、安全かつ構成崩れのない決済を完了できる本格的なECシステムを実装すること。
-
運用性を考慮したCMS設計: 商品情報、取扱店舗（SHOP）、ブログ記事など、クライアント側で更新が必要な多様なコンテンツを一元管理できるCMS環境を整えること。
施策とこだわったポイント
1. パッケージやロゴと連動した、一貫性のあるブランディングとライティング
大部分の商品パッケージデザインに加え、ブランドのアイデンティティとなるロゴデザインから担当しました。プロダクトが持つ洗練されたイメージをそのままWebへ拡張させるため、サイト全体をモノトーンと美しい写真素材で構成。大人の女性に向けたエレガントな世界観を視覚的に表現するとともに、ブログ以外のサイト内原稿（コピーライティング）も自ら執筆し、言葉とビジュアルの両面からブランドの統一感を持たせました。
2. 商品の魅力を引き立て、購買へ導く洗練されたUI設計
トップページのファーストビューから商品一覧、商品詳細ページへと至る導線を、余白を活かしたレイアウトで設計しました。商品のテクスチャーや成分といった詳細情報が読みやすいタイポグラフィを採用。また、取扱店舗一覧（SHOP）やブログ（BLOG）への回遊性も高め、ブランドへの理解を深めながら自然にカート（購入）へ進める構成にしています。
3. WooCommerceとStripeを活用した本格的なECシステム構築と決済連携
フロントエンドのデザインを損なうことなく、裏側のシステムとしてWordPressに「WooCommerce」を導入し、カート機能と商品管理基盤を構築しました。さらに、決済プラットフォームである「Stripe」を連携させることで、ユーザーにとってスムーズで安全なクレジットカード決済フローを実現。デザインだけでなく、実際に機能するシステム基盤を構築しました。
成果・評価
要件定義から販売インフラ実装までの完全ワンストップ対応
ディレクターとしてクライアントの要望を直接ヒアリングして要件を定義し、ロゴやパッケージの制作、原稿執筆といった「ブランドの根幹を作る工程」から、UIデザイン、そしてWooCommerceとStripeを用いた「ECシステムの構築」まで、一連のプロセスを横断的に担当しました。ビジュアル面での一貫性を保ちながら、決済システムを含めた実用的な販売基盤を一人で形にすることで、新規ビジネスの立ち上げをスムーズに実現しました。
