ステークホルダー分析でUXを最適化。有楽製菓「日本一ワクワクする菓子屋」を体現するサイトの構築

背景

有楽製菓様は「夢のある安くておいしいお菓子を創造する企業を目指します」という企業理念のもと、中長期的なゴール（ビジョン）として「日本一ワクワクする菓子屋」を掲げていらっしゃいます。
しかし、圧倒的な知名度を誇る主力商品「ブラックサンダー」に対し、「有楽製菓」という企業そのものの認知度や、独自のカルチャーである「ワクワク感」が十分に伝わっていないという背景がありました。

 既存のサイトでは、「ブラックサンダー」単体の指名検索や商品ページへのアクセスが大部分を占める一方で、企業情報や直営店、サステナビリティ（スマイルカカオプロジェクトなど）といった、ユーザーが本当に知りたい情報、見せたい情報への導線が弱く、回遊性が低い構造になっていました。
また、スマートフォン表示時に文字が読みにくい、PCとスマホで別々の画像を用意しなければならないなど、ユーザビリティや運用面でも課題を抱えていました。

課題

リニューアルにあたり、まず既存サイトのアクセスログ解析（定量調査）と、ヒューリスティック分析および社内アンケートを実施しました。

分析結果から見えた事実

需要の偏りと導線の欠如： 解析データより、「トップページ」と同等に「工場直営店」や「商品一覧」の需要が非常に高いことが判明しました。しかし、そこからブランドサイトや他の重要コンテンツへの導線が分断されており、回遊性が低い状態であることがわかりました。

●コンテンツのミスマッチ

「物流・エコ（サステナビリティ）」等の企業姿勢に関する情報を求めるユーザーの声がある一方で、既存サイトではそれらの情報が不足、あるいは見つけにくい場所に配置されていました。

●デバイス最適化の限界

PCとスマートフォンで別々のソースを用意しなければならない運用負荷や、スマホ表示時の視認性の低さが、ユーザー体験と更新スピードの両面を阻害していました。

これらの多角的な分析結果を集約した結果、解決すべき3つの本質的な課題を以下の通り定義しました。

1. 「日本一ワクワクする菓子屋」の体現とファン育成

ユーザーの期待に応えつつ、有楽製菓独自のユニークさ（独自性）を視覚的・体験的に伝え、「ブラックサンダーのファン」から「有楽製菓のファン（仲間）」へとブランド好意の対象を引き上げる必要がありました。

2. UI/UXとアクセシビリティの抜本的改善

テキストベースで読みにくい既存サイトを改修し、スマートフォンでも直感的に操作できるデザインへの刷新が急務でした。特に、需要の高い「東京工場直営店」や「工場見学」といったページへ、迷わずアクセスできるナビゲーション構造の構築は重要事項でした。

3.運用コストの削減とセキュリティ・システム環境の整備

社内メンバーがHTMLの知識なしでもスピーディーに情報更新できるCMSの導入、お問い合わせフォームのスパム対策や情報漏洩リスク（不正アクセス等）への対応、多言語展開、そして今後のデジタルマーケティングの土台となる環境整備が求められました。

多角的なステークホルダー分析によるUXの最適化

単なるデザインの刷新に留まらず、有楽製菓様を取り巻く多様なステークホルダー（潜在顧客、ライトファン、コアファン、求職者、メディア、地域住民、そして自社社員）を細かくセグメント化。 それぞれの「現状の心理状態」と「サイト訪問後の理想の状態」を定義し、ニーズに基づいたUX（ユーザー体験）の整理を行いました。

●ファン層の深化

「ブラックサンダーは知っているが企業は知らない」層から、コミュニティ活動や開発秘話を通じて「有楽製菓という企業のファン」へと引き上げるための情緒的コンテンツの配置。

●実利的な導線

メディア関係者が求めるサステナビリティ情報や、地域住民が求める直営店・工場見学情報など、特定の目的を持つユーザーが迷わず情報にたどり着ける機能的なナビゲーションの設計。

●インナーブランディング

自社サイトが社員にとっての誇りとなり、社風を再確認できる場所となるよう、社長メッセージやミッション、ビジョン、バリューなどの情報を企業サイト内に配置。 分析した情報に基づき、「ワクワク」という情緒的価値と、使いやすさという機能的価値を両立させたサイト構造を構築しました。

ファン化を加速させるUX設計と情報アーキテクチャ

単なる情報の整理に留まらず、顧客のWeb体験を豊かにし、有楽製菓のファンを増やすための「Webサイト顧客体験 設計図」を策定しました。

1. ロイヤリティに合わせた体験設計（ジャーニーの可視化）

ユーザーをロイヤリティ（高・中・低）や属性ごとに分類し、「認知・興味」から「関心増幅」、そして「ファン化」へと至る心理変容をプロセス化しました。
各チャネル（X、検索、オフライン等）からの流入が、サイト内のどのコンテンツに触れることで「日本一ワクワクする菓子屋」というビジョンに結びつくのか、その道筋を緻密に設計しています。

2. コンテンツごとの役割の明確化

全てのページに明確な「役割」を与えました 。
認知層向け： 幅広い商品ラインアップや直営店情報など、接触のきっかけとなる入口を多角化。
関心層向け： 「ここでしか買えない商品」の紹介やサステナビリティ（スマイルカカオ）といった独自価値を伝え、欲求を増幅 。
ファン化（ゴール）： 有楽製菓＝ブラックサンダーがある会社＋ビジョン、というイメージを形成し、採用への応募や継続的なファンコミュニティへの参加へと繋げます。

3. 迷いをなくし、ワクワクを最大化するUI

この戦略図に基づき、目的のページに直感的にたどり着けるナビゲーションを構築。メガメニューには各カテゴリの画像を活用して視認性を高め、スマートフォン版では情報量を整理しつつ、アコーディオン仕様で必要な情報へ素早くアクセスできるレイアウトを実現しました。単に「見やすいサイト」を作るのではなく、サイトを訪れるたびに有楽製菓との絆が深まる、「ファンが生まれる場所」としてのWebサイトへと昇華させています。

4. 自社運用を省力化するCMS構築

CMSを活用し、ニュースや商品情報（商品画像、概要、原材料名、栄養成分など）をカスタムフィールドに沿って入力するだけで、Webサイト上に自動反映される仕組みを構築。PC・スマホの更新作業を一本化し、スピーディーな情報発信を可能にしました。

有楽製菓株式会社　コーポレートサイト