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