コスモヘルス株式会社様(ECサイト)|Web制作実績 レスポンシブ対応|制作実績
”綿密な設計”と”最新トレンドデザイン”により、ホームページの効果を最大化
クライアント | コスモヘルス株式会社様(東京都港区) |
---|---|
制作プラン | Meta定額制30プラン |
カテゴリ | ECサイト WEB・情報サービス 医療・美容・薬品 その他 |
URL | https://shop.cosmohealth.co.jp/ |
制作チーム |
|
REPUTATION
お客様アンケート評価
修正の要望に納得がいくまで何度も応えてもらい、理想通りのサイトを作ることができました!
5段階評価平均
4.1
-
担当者の評価
5/5
-
担当者の知識
3/5
-
リクエスト対応
4/5
-
デザイン
5/5
-
フルオーダーメイド設計
5/5
-
CMS更新システム
3/5
-
制作料金
4/5
ネオインデックスを選んだ理由は?
- 高品質なWebデザイン
- 制作実績が良かった
POINT
制作のポイント
お客様のご要望
- 集客(新規)を増やしたい
- HPデザインを良くしたい
- ECの売り上げを伸ばしたい
電位治療器の体験会に参加された方に向けて、乳酸菌サプリメントや化粧品を販売されているコスモヘルス株式会社様のECサイトをリニューアルいたしました。
今回リニューアルの目的として、「商品の購入率を向上したい」「既存顧客の継続率を向上したい」「チラシとECサイトのデザインを調和させたい」という3つのご要望を頂きました。
まずは、CV率を向上させるため、ゴールから逆算をした綿密な導線設計を行いました。具体的には、ユーザーが最短の導線で目的の商品を購入していただけるよう、メインビジュアルのすぐ下に、主要コンテンツである「乳酸菌」「プロテイン」「酵素」「オールインワンゲル」という4つの商品ページへの導線バナーを設置しております。さらに、各商品ページ下部のフッターにはCV導線を固定表示することで、ユーザーがスムーズな流れで商品を購入していただけるよう設計いたしました。
今回、ホームページの主役である商品の魅力を強く押し出すため、各商品ページにユーザーの知りたい情報を充実させました。例えば、「ユーザーのお悩み」「サプリの飲み方」「よくある質問」など、一つひとつの商品の特徴に合わせて個別に構成・デザインを行い、ランディングページ形式の構成にすることで、ユーザーはスクロールするだけで商品の特徴を直感的に理解でき、安心してご購入いただくための後押しとなるコンテンツに仕上げております。
PC用サイトでは、画面が大きいという特徴を考慮し、スペースを有効活用しながらトレンド感のあるデザインを施しました。例えば、メインビジュアルには実際のスタッフ写真を画面いっぱいに配置しているほか、ホームページ全体のレイアウトは、あえて枠からはみ出すブロークングリッドを使用することでポップな雰囲気を演出し、「いつまでも明るく元気でいられる」というお客様の商品コンセプトをデザインで表現いたしました。
また、CV率向上の対策としましては、旧サイトで、どれを選択すれば良いのか迷いやすかった3種類のCV導線を、ユーザーの購入方法に合わせて「定期購入」「単品購入」という2種類にわかりやすくまとめているほか、購入ボタンを押した後は決済サイトのカート画面に直接遷移するよう設定することで、ユーザーが最短の導線でスムーズに商品をご購入いただける設計を行っております。
デザイン面では、「チラシとECサイトのデザインに統一感をもたせたい」というご要望をいただきました。そのため、全体的に柔らかな色使いや装飾を使用しているほか、チラシで使用されている曲線の装飾をポイントで取り入れるなど、統一感を持たせるための細やかな工夫を施しております。ネオインデックスでは、すべてのホームページをお客様のご要望に合わせて0からデザインいたします。そのため、パンフレット等の制作物や既存のコーポレートサイトとのデザインの調和だけでなく、訴求コンテンツが自然と目に留まる視覚効果など、CV率向上のため戦略的なオリジナルデザインをご提案いたします。
Webデザイン
モバイル用サイトでは、ハンバーガーメニュー内で「乳酸菌」「プロテイン」「酵素」「化粧品」という4つの主要商品ページの導線バナーを配置しているほか、実際の商品写真やキャッチコピーを表示することで、お探しの商品をすぐに認識でき、ユーザーが最短の動線で目的の情報を閲覧していただくための設計を行っております。ほかにも、各導線にはテキストだけでなくアイコン画像を配置するなど、ユーザーが感覚的に操作していただけるよう綿密な工夫を施しました。
今回、「商品説明が淡々と記載されているだけで、実際の使用イメージが湧きにくかった」旧サイトの商品ページを一新いたしました。具体的には、「サプリの飲み方」「よくある質問」など、ユーザー目線で知りたい情報を充実させているほか、イメージしやすい写真やイラストを多く使用することで、流し読みをされるユーザーにもわかりやすく表現しております。
また、ユーザーが安心して商品をご購入していただけるよう、トップページのメインビジュアルには実際の体験会でのスタッフ写真を使用しているほか、「コスモヘルスの想い」コンテンツを新設いたしました。コスモヘルスの想いでは、お客様のコーポレートカラーである淡いブルーの装飾を配置しているほか、かっちりとした明朝体のフォントをキャッチコピーに使用することで、信頼感を感じていただけるデザインにしております。
デザイン面では、各商品のイメージに合わせてユニークなオリジナルデザインを行いました。例えば、健康サプリメントの商品ページでは、見出しやキャッチコピーにポップな雰囲気のゴシック体を使用しているほか、全体的にカラフルな色使いでまとめることで、「毎日を元気に明るく過ごせる」というサプリメントの商品コンセプトを表現しました。一方で、化粧品の商品ページではシックな明朝体を使用し、チェリーレッド×グレーの高級感ある配色のデザインにまとめております。
さらに、ホームページ全体には親子の写真を多く使用することで、「家族全員で使用できる」という商品の特徴を視覚的に表現いたしました。また、下層ページのヘッダーに波打ちのアニメーションを取り入れるなど、トレンドを感じられる最新デザインを施しております。リニューアル後は「希望通りのデザインにしていただき、大変満足しています。」と喜びの声をいただいております。
Web制作・運用サポート一覧
PC・タブレット用フルオーダーメイド設計、オリジナルWebデザイン、PC用UI/UX設計、ワイヤーフレーム作成、HTML/CSSコーディング(レスポンシブサイト)、Googleアナリティクス設定、jQueryコーディング、PLESKサーバー
BEFORE AFTER
劇的ビフォーアフター
旧サイトにメスを入れ、お問い合わせが絶えないホームページへ
PC DESIGN
PCサイトデザイン
お客様の特長を活かした、”世界にひとつ”のオリジナルデザイン
SMARTPHONE DESIGN
スマートフォンサイト
デザイン
ターゲットに最適なユーザビリティを考慮した、UI/UXデザイン
WORKS