Musubiデザイン刷新モック / パターンC ← パターンC概要
PORTAL NAVIGATION

顧客ポータルのナビ構成、3パターン比較

デザイン方向(案C クラフト&ウォーム)は決定済み。ここでは見た目ではなく「構成」——ホーム画面のナビ・レイアウトの型——を3通り試作した。 コンテンツ(KPI・やること・7機能)はすべて共通。ナビの組み方だけを比較できる。

1

横タブ型(現行踏襲)

移行コスト最小

上部に7つの水平タブを並べる、現行の踏襲構成。実装済みの portal-home.html とほぼ同一で、店舗オーナーの学習コストがかからない。 一方でタブ数が多く、スマホでは横スクロールが発生し、後方のタブ(自店サイト・サイトを編集)が画面外に隠れやすい。

見る →
2

サイドバー型

運営側と統一感

PCは左サイドバーに機能一覧とサイト制作の進行ステージを常時表示。モバイルはハンバーガーからドロワー展開。 管理アプリ(admin)と同じ骨格になり運営スタッフの理解は速いが、「サイドバー」という概念自体が非IT層の店舗オーナーには馴染みが薄い場合がある。

見る →
3

カードハブ型

スマホ最優先

ナビをほぼ排し、ホームに大きな機能カード(サイトを見る/編集する・契約とお支払い・メッセージ・成果)を並べて入口にする。 モバイルは下部固定タブ4つ(ホーム/編集/メッセージ/その他)。非IT層のスマホ利用が多い前提で「迷わない」ことを最優先した構成。

見る →

推奨

③ カードハブ型を推奨する。顧客の主用途は月1回程度の成果確認と口コミ承認で、利用頻度・IT習熟度ともに低いスマホ中心のライトユーザー。 タブ名を読んで機能を探す横タブ型・サイドバー型よりも、大きなカードから直感的に選ばせる構成の方が迷いが少ない。 運営側との画面統一感を重視するなら②サイドバー型も次点として有力。