PROTOTYPE / UI COMPARISON

レイアウト5案 — 比較用プロトタイプ

デザイン提案資料の5つのレイアウトパターンを、それぞれのコンセプトに合わせた架空ブランドの実例として実装したもの。決済・注文確定はまだ実装しておらず、カートへの追加までUIとして動作する(データはブラウザのlocalStorageに保存)。

決済・会員機能は未実装です。各パターンのトップページ → 商品一覧 → 商品詳細 → カート、という導線の使用感を比較するためのプロトタイプです。ブランド名・商品・価格はすべてダミーです。
01

ARDOISE — フルスクリーン・ビジュアル型

ナビゲーションを畳み、1画面を写真とコピーだけに使う型。静謐な高級ブランドを想定

見る →
02

COMMONS — 雑誌型混成グリッド

編集コンテンツと商品タイルを同じグリッドに混在させる型。編集感のあるセレクトショップを想定

見る →
03

STANDARDS — ECグリッド機能重視型

検索・カテゴリ・商品グリッドを開いた瞬間に見せる型。実用重視の量販ブランドを想定

見る →
04

ANNEX — カテゴリー・モザイクタイル型

大小のタイルで行き先を先に選ばせるハブ型。複数ライン展開の百貨店的ブランドを想定

見る →
05

GRAIN — ブランドストーリー・ロングスクロールLP型

ものづくりへのこだわりを語ってから購入へ誘導する型。素材にこだわるD2Cブランドを想定

見る →