通販サイトをリニューアル！使いやすさを追及する「ものづくり」の姿勢とは

2022年5月30日、ハーブ健康本舗では通販サイトのリニューアルを実施しました。

人気のモリモリスリムシリーズやKCシリーズをお買い求めいただける通販サイト。定期情報の修正ができたり、美と健康にまつわるコンテンツが配信されたりと、お客様に喜ばれる機能を常に追及し、改善し続けています。

サイト構成やデザインも大きく一新した今回のリニューアル。サイト刷新の背景にどんな想いがあったのかを探るべく、リニューアルのプロジェクトに関わったメンバーに話を聴いてきました。

★社員紹介★

クリエイティブ制作吉村
ハーブ健康本舗のありとあらゆるクリエイティブを生み出し続けるクリエイティブ制作のリーダー。爬虫類の育成に造詣が深い。

EC企画馬場
EC企画の部署にて自社サイト運用に携わり、各種企画の進行やサイト変更のディレクションを行う。爬虫類のエサとなる昆虫が苦手。

顧客視点の発想＆部署連携で、サイト機能とブランドの世界観を一新

―　今回の通販サイトリニューアル、どのような理由で始動したプロジェクトなのですか？

馬場
1年くらい前から計画をスタートしました。以前は健康食品を中心としたラインナップだったのが、2020年春より化粧品事業にも本格的にちからを入れ、KCシリーズを拡充しました。より商品数が増えてくる中で、お客さまが欲しい商品にすぐ辿りつけるよう、サイトの機能改善を検討していました。

吉村
また、健食と化粧品のブランドの世界観が異なるので、それぞれのブランドの世界観をどのように担保するのかが課題となっていました。異なる世界観のブランドが同じページ内で主張すると、まとまりがなく、お客様に違和感が伝わる懸念があります。こうした背景で、サイトリニューアルにより会社のブランディングを強化する狙いもありました。

―　顧客視点で「使い勝手」と「ブランド」両側面から改善しようと動き出したのですね。どのくらいのスケジュール感で進行したのですか？

馬場
昨年の12月くらいから本格的に始まりましたので、実質6ヶ月間くらいでリリースしました。社内のチェック体制もあいまって、相当早いスピードで実現できました。

吉村
クリエイティブ制作でサイトリニューアルのデザインを提案したのですが、それがスムーズに承認されたのが嬉しかったです。総合・サプリ・化粧品それぞれのTOP画面のイメージをすり合わせ、全体的なテイストを決めていく部分は、本来時間がかかるものですが、明確なビジョンを持ちながら、デザイン、機能、動線など様々な視点から総合的に進めていたので、想定以上のスピードで形にできました。

馬場
クリエイティブ制作にはデザイン面を進めていただき、EC企画ではサイトの機能拡充をシステム部門と連携しながら進めました。企画者や承認者がもっているイメージを言語化し、具体的な機能として落とし込み、進行管理していくイメージです。

―　クリエイティブ制作・EC企画だけでなく、承認者である社長やシステム部門の連携によりリニューアルが実現するのですね！この6ヶ月間について掘り下げたいのですが、そもそも「サイトリニューアル」というのはどういう仕事の流れがあるのですか？

馬場
まずは実現したい理想の状態を明確にイメージした上で、どこまで大きな改修になるか検討しました。特に、サイトの構造を変更するような大きな改修となると、それだけ工数やコストが発生します。ブランド強化をいち早く進めたかったのもあり、今回はいま運用しているサイトをまるっと変えず、一部機能を修繕しつつ全体的なデザイン改修を行って対応することになりました。

吉村
具体的には、トップページをよりシンプルにして、健康食品と化粧品それぞれのラインナップが集約した専用のページを別に準備することで、ブランドの強化を図ろうと考えました。完全に別サイトとして運用するアイデアもあったのですが、工数・コストの課題に加えて、健康食品と化粧品どちらもご愛用いただいているお客様への対応も難しいことから、ひとつのサイト内でデザインを切り分けるようなやり方にしました。

馬場
リニューアルの全体像をおおまかに整理した後は、実際に実施する改善内容を細分化し、やるべきタスクの洗い出しとスケジュール引きを行いました。あとは各部門の担当分けを行い、リスト化して共有しながら進行管理していきます。

吉村
お客様がより使いやすくなるような機能実装はEC企画とシステムに主導してもらい、並行してブランディング強化のためのデザイン改修も、クリエイティブ制作も打ち合わせに同席し、認識を合わせながら進めました。

―　デザイン面はクリエイティブ制作のみで進めていく訳ではないのですね。

吉村
一口にサイトデザインといっても、ボタンを押すと表示が変わったり、動的に変化したりする部分もあって、実は機能面と密接に連動しています。EC企画との打ち合わせを通じて、デザイン面で実現したい状態を共有し、忠実に再現できる方法を調べて実装してもらいました。

コンマ〇秒の調整！使いやすく魅力的なサイトづくりのこだわりとは

―　新しくなった通販サイトを拝見しましたが、TOPページはもちろん細部のつくりも一新されましたよね！ぜひとも今回のリニューアルでの「こだわりポイント」を教えていただきたいです。

吉村
色々ありますが、お客様の視点でサイトをみて、少しでも違和感に繋がるような部分はとにかく細かく精査し修正しています。ここは妥協せず、こだわって取り組みました。

馬場
例えば、サイトのトップページに訪問後、画面右下に［よくある質問］のバナーが出てくるのですが、かなり細かい時間調整を行いました。アニメーションの世界観を乱さないよう、ページが表示された「5秒」後にバナーが出てくるよう設定しています。

吉村
化粧品TOPページのメイン画像として使用しているスライドも調整してもらいましたね。表示が切り替わるタイミングが早かったため、最初に設定されていた0.7秒から微妙に速度を落とし、最終的には「1.2秒」で設定してもらいました。

―　0.5秒のレベルで調整されているのですね！想像していた以上に短い間隔での調整をされていたのは驚きです。

吉村
この秒差って、思った以上に見ているお客様からするとストレスになりうるんですよね。リニューアルによって、サイト自体が見にくくなったり使いづらくなったりしては本末転倒です。会社のブランドイメージがもっている世界観は崩さず、お客様視点で必要な改修は丁寧に行うのを大切にしています。

馬場
0.1秒の調整など、変化としては微々たるもののように思えますが、いざやってみると違和感があるんですよね。このあたりは一切妥協せずに取り組みました。使いやすさもそうですし、メッセージの伝わり方も変わってくるので、ブランディング強化においても細かい時間設定が効いていると思います。ハーブ健康本舗はブランドを大事にしている会社です。そのブランド価値をしっかりとお客様にお伝えできるよう、技術面で忠実に再現しました。

―　ハーブ健康本舗が大切にしている「ものづくりの徹底したこだわり」「考えて考え抜く姿勢」を感じるエピソードです。

吉村
ブランディングの話をもう少ししますと、一番難しいのが健康食品と化粧品の世界観が全く異なる点です。モリモリスリムの親しみがもてる感じと、KCの洗練された感じは、並べると全然違うんですよね。このあたりのデザインは本当に苦戦しました…。

馬場
各シリーズの世界観を担保しつつ、お客さまがお求めしている商品をより探しやすくしたいという想いがあり、各ページへ遷移するメニュー表示にも気を遣いました。世界観の違いをしっかりと出せるよう、健康食品と化粧品のカテゴリごとに表示を変えられるよう、システム部門とも相談の上実装しています。

吉村
健康食品のページだと上部のメニューに「健康食品」「よくある質問」などと表示されますが、化粧品のページだと「Brand Story」「Product」「FAQ」と、違うメニュー名で表示されるんですよ。一見見落としがちなんですが、これもブランドの世界観を担保するのにかなり貢献しています。

―　本当だ！面白いですねコレ！

馬場
その他にも、初めてサイトへ来訪されたお客様向けの「お試し商品エリア」を設けたり、マイページ内で化粧品の読み物コンテンツを配信したり、メディアでの紹介実績も掲載したり…もっと魅力的なサイトになるよう、リニューアルしています。

「もっとよくなる！」通販サイトリニューアルから見えてくる“ものづくり”の信念

―　顧客視点とブランドへのこだわりが光る今回のサイトリニューアル。それぞれどのように感じておられますか？

馬場
もちろんリニューアル個所も多く、実装前に十分なテストも必要だったため、進捗管理していくのは一苦労でした。でも、社内外含め協力的な体制ができており、情報連携を強化しながら無事に対応できて良かったです！まだ大きな変化はないものの、サイト解析をしたところ数値が良くなっている項目もありました。

吉村
お客様の反応を見ながら、引き続き改善できる点を見つけていきたいと思います。WEBの世界は変化スピードが早く、ユーザーであるお客様の価値観もどんどん変わっていきます。お客様が求めているものをいち早くキャッチし、それにお応えするためにも、今回のリニューアルで満足せずにどんどんブラッシュアップしていきたいです。

―　今後もさらにサイトが変化していくと思うと、いっそう楽しみです！最後に、おふたりがハーブ健康本舗の通販サイトを今後どのように改善していきたいか、ぜひお伺いしたいです。

馬場
ハーブ健康本舗の通販サイトは、24時間お客さまと接することができる重要なタッチポイントです。ブランドの世界観を担保した上で、お客さまに「喜び」と「感動」を届けられるような、居心地の良い・使いやすいと思ってもらえるようなサイトを、引き続き目指していきたいと考えています。

吉村
正直に言うと、化粧品のサイトはもっと魅力的になると思っています。まだまだ手を入れたいですね、もっと世界観を出したい。KCシリーズは僕自身開発に深く関わっている、思い入れの強い商品シリーズです。お客様にブランドの良さが伝わるよう、引き続きサイトづくりのアイデアを練っていきたいと思います。

馬場
EC企画としても、追加していきたい機能、やりたいことをどんどん進めていきたいです。特に化粧品の方は見た目や機能の拡充を進めながら、動画も取り入れた動きのあるサイトをつくっていきたいと考えています。自社オリジナルのブランドとして、差別化された魅力が伝わるにはどうしたらいいか、頭をひねっていきます。