外食チェーン大戸屋さまのサイトをリニューアルさせていただきました。

豊富なメニューを取り扱っている大戸屋さまですが、その分管理が難しく、「店舗ごとのメニューが分かりづらい」「お客様側で更新がしづらい」といった課題がありました。今回のリニューアルでは、これらの課題を解決するとともに、商品の魅力や訴求力をアップさせることを目指しました。

まずはメニュー管理についての課題を解決するべく、メニューページに新しく独自の管理システムを導入。定食バリエーションでの栄養価の入力の手間を削減したほか、バリエーションが異なる多数の店舗メニューも効率的に管理できるようにしました。また、店舗検索システムとも連携させることで、ユーザーが見たい店舗のメニューにアクセスしやすくしています。

トップページには、大戸屋の“おいしさ”が直感的に伝わるよう「定食の写真を大きく見せる」レイアウトを採用しました。フォントには明朝体を採用し、ブランドらしさを演出しながらも、可読性を損なわないようサイズや行間にも細やかに配慮しています。視覚的な満足感と使いやすさを両立する構成とすることで、ブランドの魅力がより深く伝わるデザインを実現しました。

また、キャンペーン・新着情報の下に「おすすめの定食10選」のコンテンツを追加しました。どのメニューにしようか迷っているユーザーに向けて、おすすめのメニューを分かりやすく訴求しています。
UI設計に関しては、ディレクターとデザイナーが中心となって、「店舗検索」や「メニュー」へスムーズにたどり着けるよう導線を整理。迷いのない操作体験を目指しました。併せて、削れる余白は省きつつ、見せたい箇所にはゆとりを持たせることで、情報取得のスピード感と情緒的な表現のバランスを図っています。

おすすめメニューなどをクリックすると、詳細ページに遷移します。これらのページには、主要原産地やアレルギーなど、より細かい情報への導線を追加しました。大戸屋さまの食へのこだわりを伝え、ユーザーに安心感を持っていただくための工夫の一つです。

本プロジェクトではFigma上でのコンポーネント設計とパーツ管理が非常に重要でした。各パーツはID管理を行い、実装パートナーとの連携を効率化。Figmaのコンポーネントやバリアブル機能を活用することで、スピードと精度の両立が可能になりました。

今後の運用を見据えたシステムになるよう、初期段階から「明確なルールを設けるところ」「あえて厳格なルールは決めないところ」など、どの粒度でルールを作るのが運用しやすいかを検討してデザインしています。これにより、以降の作業も順調に進めていくことができました。

効率化＆クオリティアップのため、社内では複数のデザイナーでチームを編成し、Figmaデザインシステム設計とビジュアル制作を分担しました。メンバーは企業理念を読み込むだけでなく、皆で実際の店舗に足を運び、大戸屋さまについて理解した情報を共有して意思統一を図っていました。それぞれの得意領域を活かすことで、品質とスピードを両立しながらお客様のご要望を叶えることができたと思います。

ご担当者さまと対話を重ね、パートナー企業とも密に連携を取りながら、10ヶ月という期間でリニューアルを完了することができました。今後とも「世界中のお客様の心とからだを満たしたい」という大戸屋さまの想いや魅力を、より多くの人へ届けるお手伝いをしていきたいと思います。