コスモヘルス株式会社様（ECサイト）｜Web制作実績 レスポンシブ対応｜制作実績

今回、ホームページの主役である商品の魅力を強く押し出すため、各商品ページにユーザーの知りたい情報を充実させました。例えば、「ユーザーのお悩み」「サプリの飲み方」「よくある質問」など、一つひとつの商品の特徴に合わせて個別に構成・デザインを行い、ランディングページ形式の構成にすることで、ユーザーはスクロールするだけで商品の特徴を直感的に理解でき、安心してご購入いただくための後押しとなるコンテンツに仕上げております。

PC用サイトでは、画面が大きいという特徴を考慮し、スペースを有効活用しながらトレンド感のあるデザインを施しました。例えば、メインビジュアルには実際のスタッフ写真を画面いっぱいに配置しているほか、ホームページ全体のレイアウトは、あえて枠からはみ出すブロークングリッドを使用することでポップな雰囲気を演出し、「いつまでも明るく元気でいられる」というお客様の商品コンセプトをデザインで表現いたしました。

また、ＣＶ率向上の対策としましては、旧サイトで、どれを選択すれば良いのか迷いやすかった3種類のCV導線を、ユーザーの購入方法に合わせて「定期購入」「単品購入」という2種類にわかりやすくまとめているほか、購入ボタンを押した後は決済サイトのカート画面に直接遷移するよう設定することで、ユーザーが最短の導線でスムーズに商品をご購入いただける設計を行っております。

モバイル用サイトでは、ハンバーガーメニュー内で「乳酸菌」「プロテイン」「酵素」「化粧品」という4つの主要商品ページの導線バナーを配置しているほか、実際の商品写真やキャッチコピーを表示することで、お探しの商品をすぐに認識でき、ユーザーが最短の動線で目的の情報を閲覧していただくための設計を行っております。ほかにも、各導線にはテキストだけでなくアイコン画像を配置するなど、ユーザーが感覚的に操作していただけるよう綿密な工夫を施しました。

今回、「商品説明が淡々と記載されているだけで、実際の使用イメージが湧きにくかった」旧サイトの商品ページを一新いたしました。具体的には、「サプリの飲み方」「よくある質問」など、ユーザー目線で知りたい情報を充実させているほか、イメージしやすい写真やイラストを多く使用することで、流し読みをされるユーザーにもわかりやすく表現しております。

また、ユーザーが安心して商品をご購入していただけるよう、トップページのメインビジュアルには実際の体験会でのスタッフ写真を使用しているほか、「コスモヘルスの想い」コンテンツを新設いたしました。コスモヘルスの想いでは、お客様のコーポレートカラーである淡いブルーの装飾を配置しているほか、かっちりとした明朝体のフォントをキャッチコピーに使用することで、信頼感を感じていただけるデザインにしております。

デザイン面では、「チラシとECサイトのデザインに統一感をもたせたい」というご要望をいただきました。そのため、全体的に柔らかな色使いや装飾を使用しているほか、チラシで使用されている曲線の装飾をポイントで取り入れるなど、統一感を持たせるための細やかな工夫を施しております。

ネオインデックスでは、すべてのホームページをお客様のご要望に合わせて0からデザインいたします。そのため、パンフレット等の制作物や既存のコーポレートサイトとのデザインの調和だけでなく、訴求コンテンツが自然と目に留まる視覚効果など、CV率向上のため戦略的なオリジナルデザインをご提案いたします。

また、各商品のイメージに合わせてユニークなオリジナルデザインを行いました。例えば、健康サプリメントの商品ページでは、見出しやキャッチコピーにポップな雰囲気のゴシック体を使用しているほか、全体的にカラフルな色使いでまとめることで、「毎日を元気に明るく過ごせる」というサプリメントの商品コンセプトを表現しました。一方で、化粧品の商品ページではシックな明朝体を使用し、チェリーレッド×グレーの高級感ある配色のデザインにまとめております。



さらに、ホームページ全体には親子の写真を多く使用することで、「家族全員で使用できる」という商品の特徴を視覚的に表現いたしました。また、下層ページのヘッダーに波打ちのアニメーションを取り入れるなど、トレンドを感じられる最新デザインを施しております。リニューアル後は「希望通りのデザインにしていただき、大変満足しています。」と喜びの声をいただいております。