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