Webデザインをする際には、ワイヤーフレームの作成が不可欠です。
ワイヤーフレームとは、Webサイトのページレイアウトを決める設計図で、
装飾はせずに、線(ワイヤー)だけで、フレーム(枠組み)を図で表したものです。
- 調査・戦略に基づいて
- サイトマップ(ページ)を決定
- ワイヤーフレーム作成 ←ココで使う!
- コンテンツ原稿、素材準備
- デザインカンプ作成
- コーディング
- サーバーUP、本番公開
- Googleチューニング
最近はワイヤーフレームを作成をする専用ツールがいろいろ出ていますね。
でも私の場合は専用ツールは使っていません。シンプルにエクセルで作ったりもしますが、大体の案件はPhotoshopで作り、そのPhotoshopワイヤーをベースにデザインカンプに仕上げる流れで作っています。
今回はこの手書きの段階で使うためのシートを作成てみました。
作った理由は、無地のA4コピー用紙にフリーハンドで書いていましたが、ほぼレスポンシブのグリットレイアウトで作るので、ワイヤーの段階でグリットを考慮して作った方がデザイン作成が効率的かな・・と思い、グリットの入った手書き用ワイヤーフレームシートを作ってみました。
12カラムのグリット線を入れた、パソコン用とスマホ用になります。
大したものでは有りませんが、PDFにしていますのでご自由にお使いください。
▼ワイヤーフレームシート(手書き用)PDFダウンロード
・パソコン用 Wire-frame-pc
・スマホ用 Wire-frame-sp