プロジェクト概要
プロジェクト名: プライム製薬ECサイト制作
クライアント名: プライム製薬様
プロジェクト期間: 2023年1月 – 2023年6月
ページ数: 約70ページ
背景と目的
背景:
プライム製薬様は、自社製品の販売拡大を図るためにラジオ広告を開始する予定でした。特にシニア層に対するリードの強化が必要であり、そこでECサイトの制作を通じてオンラインでの販路を強化し、売上の向上を目指すこととなりました。
目的:
新しく制作するECサイトは、プライム製薬様の製品情報を効果的に伝え、ユーザーがスムーズに購入できる環境を提供することを目的とし、具体的な目標としては、以下の点が挙げられます。
- コンバージョン率の向上: ユーザーが製品情報を簡単に理解し、購入までの導線を最適化することで、コンバージョン率を向上させる。
- 顧客生涯価値(LTV)の向上: リピーターを増やすための機能やコンテンツを充実させ、顧客との長期的な関係を構築する。
- ブランド信頼性の向上: シニア層にも使いやすいデザインと操作性を提供することで、信頼性の高いブランドイメージを確立する。
- 市場拡大: オンラインでの販路を強化し、従来のオフライン販売では届かなかった新規顧客層の開拓を図る。
これらの目標を達成するために、ユーザー体験を重視したサイト設計と、高機能なECプラットフォームの導入が不可欠となりました。
サイトの概要
サイトの種類: ECサイト
主な機能:
- 製品一覧ページ
- 製品情報ページ
- ショッピングカート
- 問い合わせフォーム
- お知らせ
- コラム
ターゲットユーザー: 一般消費者、特に60代前後のシニア層
デザインと開発の過程
デザインプロセス
- リサーチ: 提供された参考サイトをもとに競合分析を実施し、UIや導線を参考にしました。
- ワイヤーフレーム: Adobe XDを使用してワイヤーフレームを作成し、クライアントと詳細を確認しました。
- デザインカンプ: Adobe XDを使用してデザインカンプを作成し、クライアントのフィードバックをもとに修正しました。配色パターンを複数提案し、選定していただきました。フォントは視認性が高いものを選び、文字サイズを大きめに設定しました。
開発プロセス
- フロントエンド: HTML5、CSS3、JavaScriptを使用して開発しました。
- バックエンド: なし
- CMS: W2 ECプラットフォーム(W2 Solution)を使用し、雛形がある状態でカスタマイズする形で制作しました。
- 使用ツール: Adobe XD、Visual Studio Code
チームと役割分担
チーム構成:
- プロジェクトマネージャー
- デザイナー
- フロントエンド開発者
- W2開発者
役割分担:
私は主にデザインとフロントエンド開発を担当し、特にHTML5、CSS3、JavaScriptを使用したレスポンシブデザインの実装を行いました。
振り返りと学び
成功した点:
- ターゲットに見やすいデザインを実現できたこと
- 初めてのECサイト制作の挑戦が無事に完了したこと
- 中期のプロジェクトで、途中で構築方法に変更もありましたが、大幅な遅れもなく完了できたこと
課題と対策:
- 新しいプラットフォームへの適応: W2は初めて使用するプラットフォームであったため、その機能や特性を理解するのに時間がかかりました。ドキュメントやチュートリアルを読み込み、管理画面を実際に触りながら操作を覚えました。
- 技術的なエラーへの対処: W2の独自仕様による予期せぬエラーが発生しました。W2の技術サポートチームに問い合わせを行い、定期的なミーティングで解決策を図りました。
- 時間管理の難しさ: プラットフォーム変更に伴い、プロジェクト全体のスケジュールも見直しが必要でした。プロジェクトマネージャーと連携し、LP制作等のタスクの優先順位を再評価し、リソースの配分を最適化しました。
- クライアントとのコミュニケーション: W2への仕様変更や機能に関するクライアントへの理解を深めるため、定期的にMTGを行い、クライアントの要望と期待を把握しました。
学び:
- W2プラットフォームの理解: プラットフォームの特性や機能、制約を理解することで、W2の利点と制約を把握し、今後のプロジェクトでの活用方法を明確にすることができました。
- 問題解決スキルの向上: W2の独自仕様やエラーに直面した際、技術サポートを活用するだけでなく、自らもリサーチを行い、解決策を模索しました。
- プロジェクト管理の経験: 週に1回の定期的なミーティングを通じて、進捗状況を共有し、問題点を解決するプロセスを学びました。
- デザインの適応力: ターゲットユーザーのニーズに合わせたデザインを実現するために、視認性の高いフォントや色彩設計を行いました。
- コミュニケーションの重要性: クライアントとの継続的なコミュニケーションを通じて、要望やフィードバックを的確に反映し、期待に応えるデザインと機能を提供する方法を学びました。
これらの学びを次のプロジェクトに生かし、より効果的で効率的なサイト制作を目指していきます。

