WFの作り方

1. 目的

1.1. ワイヤーフレームは「機能」と「構造」を視覚化する

1.1.1. 設計段階でのズレを防ぐ

1.1.2. 認識合わせ

1.1.3. デザイナー・小ダーへの指示が明確になる

2. 必須要素を配置

2.1. ヘッダー

2.1.1. ロゴ

2.1.2. 検索バー

2.1.3. メニュー

2.2. メインコンテンツ

2.2.1. 商品カテゴリー

2.2.2. メニュー

2.2.3. おすすめ商品

2.2.4. キャンペーンバナー

2.3. フッター

2.3.1. お問い合わせ

2.3.2. プライバシーポリシー

2.3.3. 利用規約

2.3.4. メルマガ登録フォーム

2.3.5. SNSリンク

3. 各ページ作成

3.1. トップページ

3.2. 商品ページ

3.3. 商品一覧

3.4. コレクションページ

3.5. コレクション一覧

3.6. ブログページ

3.7. ブログ一覧

3.8. カートページ

3.9. FAQ

3.10. リーガルページ

3.11. お問い合わせページ

4. ユーザーフローを意識

4.1. 購入までの導線がスムーズか

4.2. 「購入する」「カートに入れる」などのボタンを明確にする

5. ユーザーの行動を考慮

5.1. 商品検索の向上

5.2. パンくずリストの導入で現在地の確認ができるようにする

5.3. ログイン、注文履歴、ウィッシュリストなどの設置

6. モバイルファースト

6.1. スマートフォンでの表示を最優先にする

7. チーム内で共有する

7.1. デザイナー・コーダーと共有してFBをもらう

8. ツール

8.1. Figma

8.2. XD

8.3. Excel

8.3.1. Webサービスが苦手なクライアント

8.3.2. セキュリティが厳しい会社