はくばく   コーポレートサイト リニューアル

大麦の国内シェアの約8割を誇る穀物メーカー、株式会社はくばく様（以下、はくばく）のコーポレートサイトリニューアルを担当しました。大麦のブランディングプロジェクトにて制作した、大麦商品の良さを伝えるサイト「おいしい大麦研究所」に引き続き、Web制作にまつわる業務全般を包括的に行っています。

前回のリニューアルから時間が経過し、デザインやコンテンツ整理などアップデートを検討していたはくばくのコーポレートサイト。PC版とスマートフォン版で掲載している情報に差異があるため、サイトを訪れたユーザーに対して平等に情報を届けられていないという課題もありました。リニューアルにあたって、どの課題を優先すべきかの検討も含めご相談いただきました。

まず、コーポレートサイトで伝えるべきメッセージを検討するワークショップを行いました。はくばくの魅力とは何かを社員の方に考えていただき、関連するキーワードを広く抽出。伝えたいことが企業からの一方通行でなく、顧客視点から魅力的に見えるかどうかを一つひとつ精査。その後、はくばく社内のリニューアルプロジェクトメンバーの方と一緒に言葉の意味を深堀りしていきました。

「安心」「信頼」「おいしい」。これら3つを重要キーワードとして据え、安心感や信頼感を土台にした「結婚相手にしたいWebサイト」をコンセプトにリニューアル設計を行いました。商品を購買する方が安心感や信頼感をもって商品を手に取ることができるよう、丁寧な製造工程を伝える新規コンテンツを追加。多岐にわたる品質チェックを実施していることや、おいしくするために一手間かけていることを伝えられるようにしました。また、商品を通してはくばくに興味をもったユーザーに向け、企業としての魅力もより深く伝えられるよう、企業紹介のなかに「穀物の力で多くの人を健康にしたい」という想いも掲載しました。

静止画だけでなく所々に動画を用いて、ユーザーの目にとまる工夫を

サイトの機能面では、マルチデバイス対応の他、検索機能を新しい形にリニューアル。もっているデータの有効活用とユーザーニーズに沿った使いやすさを考慮して実装を行いました。また、レシピと商品情報の行き来がしやすいように関連情報を紐づけて表示させるなど、一つの情報を起点としてより多くの情報に触れてもらえるように設計しています。

新商品やキャンペーン情報、ニュースなどの即時的な情報を出す際にはくばく側で更新作業ができるよう、運用しやすいCMSを構築。商品の並び替え、シリーズごとの整理、絞り込み用のタグ付けなどを、管理画面から編集できるようにカスタマイズを丁寧につくりこんでいます。これらの機能設計にあたっては、Webサイト構築パッケージ「CONNECT」に取り入れたAdobe XD版の設計フォーマットを使用。より具体的な検討が可能になり、設計の精度向上に貢献できました。

左が設計フォーマット、右が公開されたレシピページ。

ワークショップや工場見学を通じて立ち現れていたはくばく社員が共有する価値観や熱意をふまえ、真面目さや誠実さを基調としながら、あたたかみと力強さを感じさせるデザインを目指しました。
「はくばくと穀物」コンテンツでは新規に撮影を行い、言葉だけでは伝えきれないはくばくの穀物にこめた想いと品質へのこだわりをビジュアルで表現しています。