レスポンシブサイトの手書きワイヤーフレーム用、A4スケッチシートを作ってみた

Advertisement

Bootstrapを使ってレスポンシブなランディングページ制作の効率化を図ろうと思っているのですが、どのようなワークフローが最適なのか試行錯誤しながら進めています。Bower使ったほうがいいのか、とか。いきなりコーディングを始めてプロトタイプ作るほうが効率良いのか?とか。ワイヤーどうしようか?とか。

で、結局レイアウトのベースになるワイヤーフレームがあったほうが良いという結論に至ったので、A4紙に印刷できるスケッチシートを作ってみました。たいしたモノではないですが、あったら便利だし、整理しやすくなると思ったので、このブログでもシェアさせていただきます。PDF版、ai版をアップしておきますので、使えそうだったらご自由にお使いください。

説明と注意点

  • レスポンシブな縦長サイトでも数ページにわたってスケッチできるようにデザインを最適化しました
  • 適宜、ボックスの上と下の点線を結んで閉じてください
  • レイアウトの両側にコメントを書けるように、極力スペースをとりました
  • 数ページになると思うので、ページのタイトルの他にXページのYページ目(例: Page 1 of 4)と書く欄を設けました
  • バージョンと日付も書いておきましょうね
  • やっぱり、えんぴつと消しゴムで、書いて消して、書いて消してしながらスケッチするのが効率的です
  • スケッチは、やっぱり紙ですよ、紙。ね
  • フチなし印刷できるといいんですけどね
  • 改善のアイディアなどありましたら、ぜひコメントでお知らせください

About the author

Rriverの竜(りょう)です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら

記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です