ワイヤーフレーム
Webページのレイアウトやコンテンツの配置を定めた設計図のこと
順番
サイトマップを作成する
- 必要なページを書き出す
- ページのコンテンツをカテゴリ別に分類
- ページの階層を決める
- サイトマップを作成する
ページのレイアウトを決める
- 作成するサイトに適したレイアウトを考える。
- カラムレイアウト
- タイル型レイアウト
- マルチカラムレイアウト
- サイドバー固定レイアウト
ワイヤーフレイムを書く
- ヘッダー・グローバルナビゲーション、メインビュー、コンテンツエリア、フッターの4種類に分けて設計していく
ヘッダー・グローバルナビゲーション
- 全ページで共通して使用される
- このサイトにこんなコンテンツがあるということを伝える
- サイトマップに沿って作成する
メインビュー
- ユーザーがTOPに入ってきたときに、真っ先に目に入る重要な部分
- インパクトのあるキャッチコピーや画像を入れて、サイトを印象付けることが重要
コンテンツエリア
- サイト全体の「目次」的な役割を果たすため下層のコンテンツページをわかりやすく並べる
- 全てのコンテンツを並べてはいけない
- 見せたいコンテンツから順番に並べる
フッター
- ページの一番下に表示される要素
- コンテンツを全て読んだ人の目に入るので、サイトの全体像がわかるように目次として使う
- ヘッダーと違い、フッターは縦幅が大きくなっても良いので、ページをできるだけ掲載すると良い
コツ
- 他ページへの導線
- 他のページへのリンク部分はすぐに分かるように、色分けをする
参考
https://abentry.co.jp/blog/web/wireframe-make/
https://n-works.link/blog/webdesign/wire-frame
https://blog.nijibox.jp/article/making-wireframe/
https://web-kanji.com/posts/making-wireframe