2. ワイヤーフレームの作り方

  • Home
  • 2. ワイヤーフレームの作り方
コース内容
1. ヒアリング・要件定義・リサーチ・ライティング・サイトマップ
この講座で学べることの要約
0/8
5. デザイン添削
0/1
6. デザイン添削
0/1
8. コーディング振り返り・質問
0/2
9. LPコーディング1回目
0/1
10. LPコーディング2回目
0/1
12. WordPress実践
13. ポートフォリオ制作
14. 営業・提案・見積もり作成
15. 保守・運用
jQueryコード集
0/1
保護中: WEB制作

①ゴールを明確にする

  1. 目的の確認
    「このページでユーザーに何をしてほしいのか」を最初に決めましょう
    例:商品購入、資料請求、イベント申し込み、情報閲覧
  2. 優先度の整理
    閲覧者に伝えたい重要な要素と、補助的な要素を分けることで、ページの設計がブレにくくなります

②ページ構成を考える

  1. 大きなブロックに分ける
    ヘッダー、メインビジュアル、コンテンツ、サイドバー、フッターなど、ページをざっくりと分割してかんがえましょう

  2. 導線のイメージ
    ユーザーが自然に目を通す順序や、行動を起こす順序を意識してブロックを配置していきまう

③詳細要素の配置

「どこに何があると分かりやすいか」を考えて配置しましょう

・CTA(行動ボタン)の場所
・画像の役割


💡 ポイント

  1. 完璧な見た目を作ろうとしない
  2. デザインなしでも伝わるかどうか

 

色や装飾などのデザイン要素は入れず、線と四角で配置だけを決めましょう
構造や導線が伝わればOKです

デザイン要素が入ると、クライアントさんの判断もブレるので、シンプルに作成しましょう。

 

  •