防災食紹介ページ構造改善
案件背景
法人向け防災食紹介ページのリニューアルにおいて、商品ラインナップの豊富さと導入イメージが伝わる構成へ再設計。施設担当者の検討プロセスを整理し、情報設計・UI・導線改善を通じて問い合わせにつながりやすいページへ刷新。
課題
- セット商品中心の構成で、商品ラインナップ全体が把握しづらかった
- テキスト量が多く、視線誘導や比較検討がしづらい状態だった
- 問い合わせ導線が限定的で、資料請求・相談につながりにくかった
- 施設担当者の導入判断プロセスを前提とした構成になっていなかった
やったこと
- 施設担当者が導入イメージを持ちやすい構成・ストーリーを再設計
- 商品一覧をカードUI＋カテゴリ分類で整理し、一覧性を改善
- 「備蓄のしやすさ」「衛生面」「そのまま食べられる」など、導入時に重視される観点を整理して特徴セクションを再構成
- スマートフォンでの視認性・操作性を考慮したレスポンシブ設計
- FigmaによるUIデザインおよびデザインレビュー調整を担当
- コピー整理・ライティング提案を実施し、情報の伝わり方を改善
実現したこと
- 商品ラインナップの全体像が把握しやすくなり、比較・検討しやすい構成を実現
- 情報整理と視線誘導により、読み飛ばされにくいUIへ改善
- 法人導入時の判断ポイントを整理し、「自施設で利用できるイメージ」を持ちやすい構成へ刷新
- 問い合わせ・資料請求につながる導線を強化
設計のポイント
法人導入時の判断軸を整理
「味」だけではなく、「備蓄しやすさ」「衛生面」「そのまま食べられるか」など、施設運用で重視される観点を整理。商品特徴をユーザーの判断軸に沿って再構成した。
一覧性を高め、比較しやすい構成へ改善
商品ごとの差異やカテゴリを視覚的に把握できるよう、カードUIとカテゴリ分類を導入。長文中心だった構成を整理し、比較・検討しやすいUIへ改善した。
ビジュアル
よくなったこと
商品紹介中心だったページを、法人担当者が比較・検討しやすい導線設計へ再構築。情報整理とUI改善を通じて、問い合わせにつながりやすい構成へ刷新。
補足
- 商品数増加にも対応できる一覧構造を整備
- 「商品紹介」ではなく「導入判断」を支援する情報設計へ改善
- スマートフォン環境でも比較・検討しやすいUIを実現
