マーケットプレイス購入アプリのワイヤーフレーム設計

マーケットプレイス購入の構成

このOpenDesign公式の例は、「Marketplace App · Buy Flow WIREFRAME v0.1 · MOBILE」と題したローファイのモバイル購入フローです。4つの画面はいずれもiPhoneサイズのフレーム、9:41のステータス時刻、グレーのプレースホルダーブロック、黒の主要アクションを共通で使っています。外枠を繰り返すことでタスクの変化を比べやすくし、最終的なブランドスタイルよりも順序に意識を向けられます。

最初の画面では、大きな画像プレースホルダーの下に短いグレーの文字行を置き、下部に「GET STARTED」、その下に「Skip for now」を配置しています。この順序により、最初のアクションの前に想定する商品価値を見せる余地を確保しつつ、別の入口も残しています。その代わり、メッセージと画像は未確定のままで、後のコンテンツ判断に委ねられています。

このアーティファクトはデザイン専用のフローです。ラベルや状態が示すのは提案中のマーケットプレイス体験であり、接続済みのストア、在庫システム、決済サービス、完了した注文ではありません。

目に見えるデザイン判断

提供されたキャプチャでは画面の時刻は9:41のままで、主要アクションが「GET STARTED」から「ADD TO CART」、最後に「DONE」へ変わります。時刻表示の繰り返しが安定した基準枠になり、状態の遷移は変わるアクションラベルが担います。プレースホルダーのコンテンツは、商品データを主張せずに形状と強調を伝えています。

ソースでは390 × 844のiPhoneターゲットとローファイのグレーボックスが示されていますが、実際のスマートフォンフレームのCSSでは各画面が258 × 524ピクセルで描画されます。これは宣言されたデバイスターゲットとコンパクトな表示用フレームであり、同一の寸法ではありません。下部のゆとりあるアクション領域は優先順位の比較に役立ちますが、最終的な文言、アクセシビリティ、インタラクションの検証は未了です。

このフローが役立つ場面

このワイヤーフレームは、ビジュアルの方向性やサービスの挙動を決める前に、プロダクトチームがマーケットプレイスの流れを議論したいときに役立ちます。「FIRST LAUNCH」「BROWSE + SEARCH」「SPECS + CTA」「ORDER PLACED」という明示的なラベルが各状態の役割を示すため、サンプルを本番フローと取り違えることなく、不足している判断を洗い出せます。

オンボーディングの負荷、商品詳細の情報量、確認メッセージを早い段階でレビューするのに特に向いています。この流れでは、閲覧から商品へ、商品から「ADD TO CART」へ、最後の状態から「DONE」へと進むことを提案しています。直線的な経路は説明しやすい一方、戻る操作、カート確認、数量変更、エラー、配送の選択、支払い詳細はまだ示されていません。

初回起動から確認まで

ソースでは、完成した4つのスマートフォンワイヤーフレームを横に並べ、3つのオレンジの注釈「① tap Start」「② open item」「③ add to cart」でつないでいます。閲覧画面には検索プレースホルダー、4つのカテゴリーピル、サムネイルとテキストの4行、下部ナビゲーションの4つの位置があります。これらはクリックハンドラーを持たない静的なdivとspanの形状で、役割は検索や買い物の実装ではなく、詳細画面の前に行う探索を示すことです。

商品詳細画面では、大きなメディア用プレースホルダーの下に、タイトルバー、濃い強調バー、対になった3つのスペック行を置いています。下部のADD TO CARTの横には濃い価格プレースホルダーが別に配置され、金額を示さずに価格とアクションの関係を保っています。この優先順位は、商品の概要から購入意図へと視線を流す助けになりますが、バリエーション、在庫状況、購入後のフィードバックは未定義です。

1. 旅を始める

   ウェルカム状態ではGET STARTEDとSkip for nowを提示し、マーケットプレイスのコンテンツに入る前に2つの入口を用意しています。

2. 閲覧して選ぶ

   注釈付きのホームフィード状態にはBROWSE + SEARCHのラベルがあり、商品を開く動作を指しています。探索がオンボーディングと詳細をつなぐ橋渡しになります。

3. 確認して追加する

   商品詳細状態にはSPECS + CTAのラベルがあり、ADD TO CARTで終わります。評価と購入アクションを分けています。

4. 結果を確認する

   最後の状態では、オレンジの輪郭のチェックマーク、サマリーのプレースホルダー、DONEで注文確認を表しています。

対応範囲の境界

このアーティファクトが示すのは、4つのモバイル状態とその想定ラベルについてのビジュアル提案です。動作するナビゲーション、実際のマーケットプレイスデータ、アカウント処理、チェックアウト処理、決済の成功、注文の永続化は示していません。そのため完了画面は、注文が行われた証拠ではなく、設計された確認状態として読むのが適切です。

応用する際は、観察された状態の区別とアクションの順序を保ちつつ、例示用のプレースホルダーを検証済みのコンテンツに置き換え、省略された状態を定義してください。住所、配送、支払い、エラー、リカバリーの要件が分かった時点で、提案している1画面のチェックアウトで足りるかも検証が必要です。