※現在は別デザインで公開
株式会社ビュプロ様のビューティープロダクツのサイトをリニューアル致しました。商品も特集ページもしっかり見せたいという要望をいただいてのリニューアルでした。
カラーミーショップのデザインカスタマイズです。
上部に新商品や新しく公開した特集ページ、また人気商品を配置し、左側には、リピーターの方がすぐに商品にたどりつけるように、商品カテゴリー一覧や、特集ページの一覧を表示しています。
中央部に、Facebook、Twitterのウィジエットも設置し、情報発信がわかりやすくなるようにいたしました。右側にははじめて来られた方に、商品の良い所や使い方を詳しく掲載した特集ページの中からおすすめのページのバナーを「目的から探す」という形で並べました。
また、Amebaブログなどで投稿した記事のタイトルを自動で取り込んで表示させています。
たくさんある商品はもちろん、読み物としての特集ページもたくさんある、充実したサイトであることがわかるトップページになりました。
お客様からのご要望
ブランド価値を高めるデザインを維持しつつ、商品も特集ページもしっかり見せたいという要望をいただいてのリニューアルでした。
株式会社ビュプロ様が運営するビューティープロダクツは、まつげエクステンション商材の専門販売サイトです。プロのアイリストやマツエクサロン向けに、エクステンション、グルー、ツール、ケア用品など幅広い商材を取り扱っておられます。
今回のリニューアルでは、以下のご要望をいただきました。
- ブランドの世界観を保って使いやすさを向上さえる
- 豊富な商品ラインナップと詳細な特集ページの両方を効果的に見せたい
- リピーターの美容師・アイリストが迅速に目的の商品を見つけられる導線設計
- 初めて訪問する美容師の方が商品の良さや使い方を理解できる情報提供
- 新商品や人気商品を効果的にアピールするレイアウト
- SNSでの情報発信と連携した情報拡散の強化
- 技術情報や使用方法などの専門的なコンテンツの充実
- カラーミーショップでの運用性・操作性を維持
制作のポイント
- まつげエクステ商材専門店としての専門性と信頼感を伝えるデザイン
- プロユーザー（美容師・アイリスト）に特化した使いやすい商品分類
- 新商品と人気商品を際立たせる戦略的なレイアウト設計
- 商品情報と技術情報を両立させたコンテンツバランス
- カラーミーショップの機能を最大限活用したECサイト構築
- レスポンシブウェブデザインによる多様なデバイス対応
- ウェブアクセシビリティへの配慮による誰もが利用しやすいサイト設計
技術的な工夫
カラーミーショップのカスタマイズ最適化
まつげエクステ商材という専門性の高い商品に特化したECサイトとして、カラーミーショップの基本機能をベースに以下のカスタマイズを実施しました。
- 3エリア構成による効率的な情報配置
左側にリピート購入の多いプロユーザー向けの商品カテゴリーと特集ページ一覧、中央に新商品・人気商品・SNS情報、右側に初回訪問者向けの「目的から探す」バナーという3エリア構成で、ユーザーの使用目的に応じた最適な導線を実現しました。 - 動的コンテンツ表示機能の実装
Amebaブログで投稿された技術情報や商品紹介記事のタイトルを自動取得し、トップページに最新情報として表示する機能を実装。ブログ更新のたびにトップページも自動的に更新される仕組みにより、常に新鮮な情報を提供できる環境を構築しました。 - SNS連携ウィジェットの統合
FacebookとTwitterのウィジェットを中央部に配置し、商品情報だけでなく、業界トレンドや技術情報などのSNS発信を効果的に表示。美容師やアイリストが求める最新情報をリアルタイムで提供することで、サイトの価値と訪問頻度の向上を図りました。
プロユーザー向け情報設計
まつげエクステの施術を行う美容師・アイリストという専門職のユーザーに特化した情報設計を行いました。
- 商品カテゴリーの専門的分類
エクステンション、グルー、ツール、リムーバーなど、施術の工程順や用途別に商品を整理。経験豊富なアイリストがスムーズに目的の商品にアクセスできる分類方法を採用しました。 - 特集ページによる技術情報の提供
単なる商品紹介だけでなく、使用方法、技術のコツ、トラブル対処法などを掲載した特集ページを充実させ、「目的から探す」として初回訪問者にも分かりやすく提示。商材販売と技術サポートの両面でプロユーザーをサポートする設計としました。 - ページ表示速度の最適化
多くの商品画像と詳細な技術情報を掲載しながらも、プロの現場で迅速にアクセスできるよう、画像最適化などの表示速度向上策を実施。忙しいサロンワークの合間でもストレスなく利用できる環境を整えました。
コンテンツ設計の工夫
ユーザータイプ別の導線設計
まつげエクステ商材のプロユーザーには、リピーターと新規ユーザーで大きくニーズが異なることを踏まえ、それぞれに最適化された導線を設計しました。
- リピーターユーザー向け最短導線
左側エリアに商品カテゴリー一覧を配置し、慣れ親しんだ商品に最短でアクセスできる設計を実現。日常的に使用するグルーやエクステンションなどの消耗品を素早く注文できる利便性を重視しました。 - 新規ユーザー向け情報提供
右側エリアの「目的から探す」では、商品の特長や使用方法を詳しく説明した特集ページへの誘導バナーを配置。まつげエクステ商材に詳しくない美容師でも、適切な商品選択ができるようサポートしています。 - 新商品・人気商品のアピール強化
トップページ上部に新商品・人気商品を大きく配置し、業界のトレンドや他サロンでの採用実績などの情報も併せて提供。商品選択の参考になる情報を充実させました。
専門性と親しみやすさのバランス
まつげエクステ商材という専門分野でありながら、親しみやすく利用しやすいサイトとするため、以下の工夫を行いました。
- 充実した読み物コンテンツ
商品販売だけでなく、技術向上に役立つ特集記事や使用事例を豊富に掲載。「読み物としても価値のあるサイト」として、リピート訪問を促進する仕組みを構築しました。 - SNSとブログの連携強化
FacebookやTwitterでの情報発信、Amebaブログでの技術情報提供を連携させ、多角的な情報提供を実現。ユーザーが様々なチャネルで最新情報を入手できる環境を整えました。
制作まとめ
ビューティープロダクツ様のリニューアルは、まつげエクステ商材という専門性の高いBtoB ECサイトとして、プロユーザーのニーズに徹底的に応える設計を実現しました。
カラーミーショップをベースとしながらも、3エリア構成による効率的な情報配置や、ブログ記事の自動取得機能、SNS連携など、専門商材サイトならではのカスタマイズを実施。リピーターと新規ユーザーそれぞれに最適化された導線設計により、ユーザビリティの大幅な向上を実現しています。
また、商品販売と技術情報提供を両立させたコンテンツ設計により、単なるECサイトを超えた「まつげエクステ業界の情報ハブ」としての役割も果たしています。ユーザーが利用しやすい性能とウェブアクセシビリティへの配慮により、様々な環境から快適に利用できる利便性も実現しました。
結果として、「たくさんある商品も特集ページも充実していることが一目でわかる」という当初のご要望を十分に満たし、プロユーザーの業務効率向上に貢献できるホームページとしてリニューアルすることができました。
当社はお客様のビジネスモデルに合わせた最適なホームページをご提案しています。
BtoB ECサイト、専門商材販売、美容関連サービスなど、業種・業態に応じた様々な実績があります。
■ ホームページ制作実績はこちら
ホームページの制作やリニューアルをご検討中でしたら、お気軽にご相談ください。
