概要
画面作成でデザインセンスがない場合でも、テンプレのレイアウトを使うと見やすくなると思ったので、自分なりにまとめてみた…
この記事で学べること
- WireFrameについて
- サイトマップについて
- WireFrame作成方法
- サイトマップ作成方法
WireFrameとは？
・サイトを開発する前に「何を・どこに・どのように」画面に配置するかを明らかにするもの
WireFrame作成に必要なこと
- サイトマップの作成
- ページのレイアウト決め
- wireFrame作成
サイトマップの作成
サイトマップを作成することで以下の利点がある！！
-
Webサイト全体の構成やコンテンツの内容が一覧化され、頭の中の整理ができるようになる
-
他者でもどのような画面構成かが一目でわかるようになる
ページのレイアウト決め
レイアウト作成に必要なパーツ
- ヘッダー：メニューや検索フォームなどを配置
- コンテンツ：訪問者に伝えたい情報を盛り込みます。文章・画像・動画・表などを提示
- サイドバー：ナビゲーションや広告などを含む
- フッター：コピーライトの表記やサイトマップを配置
レイアウト
-
シングルカラムレイアウト
・それぞれのパーツを縦並びに配置
・レスポンシブWebデザインと相性が良い
・シンプルで見やすい
-
マルチカラムレイアウト
・複数のカラム（列）によって構成
・コンテンツの隣にサイドメニューが配置されている
・商品数の多いECサイトや情報量の多いニュースサイトなどで使用 -
2カラムレイアウト
・サイドメニューがあるため、いつでも目的のページを見れる
・マルチカラムレイアウトに属す
-
3カラムレイアウト
・目的が異なるユーザーが訪問しても、網羅的に情報を提供
・マルチカラムレイアウトに属す
-
フルスクリーン型レイアウト
・ユーザーにインパクトを与えられる
・写真や動画を最大限活かしたい場合に利用
-
グリッド型レイアウト
・サイドメニューがあるため、いつでも目的のページを見れる
・マルチカラムレイアウトに属す
wireFrame作成
今回は、個人でのWireFrame作成のためFigma
を利用する
まとめ
サイトマップを使って画面を洗い出した後に、作成ツールを使うと頭の中が整理されて、意外と簡単にできる…
見づらいや誤っている記載等あればコメント頂けると助かりますm(__)m
参考サイト
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】
ワイヤーフレームの作り方完全ガイド【サンプル付き】
ホームページレイアウトの基本！目的別の選び方をわかりやすく解説
【5分でわかる】ワイヤーフレームとは？概要やおすすめツールを簡単解説！