Entry

ウェブデザイン用の方眼紙を作ってみた

2007年05月06日

ボチボチとサイトのデザインを考え直していて,紙に絵を描きつつ考えています。こういうのって,一般的にはどういう風にやるのか知らないんですけれど,あたしゃ真っ白な紙に四角を描いて,色を塗ったり,文字を書いたりして考えます。

けど,こういう方法って,あまり効率的じゃないんですよね。というのも,手書きの四角は実際の画面とサイズがかなり違うもんで,自分が考えたモノとの差がかなり大きくなっちゃうからです。ラフスケッチ程度のモノならともかく,実際に画面に起こすには,もう少し正確なキャンバスが欲しいところです。

そういうわけで,手前味噌ながら,ウェブデザイン用の方眼紙をこしらえてみました。これを印刷して,手書きでデザインを描けば,もう少し作業がマシになるんじゃないか,と。

ウェブデザイン用方眼紙 1024 x 768

サイズは 1024 x 768 pixel で,5 pixel と 50 pixel ごとに方眼を描いてあります。ピクセル単位だから,印刷するとちょっと画面と誤差が出るかもしれないけれど,実際に画面を作る(コーディングする)上ではこういう指定の方が役に立つんじゃないかと思います。ブラウザは Window Maker で開いた Firefox なので,ちょっと一般的ではありません(自分用なので……)。そんなに違いは無いと思うんですけどね。

del.icio.us プラグインのメニューが見えるのは御愛嬌ということで……。

もうひとつ。ブログなんかの縦描き用に,縦に少し長いものも作ってみました。本当は2画面分(768 x 1536)の画像を作りたかったんですけれど(ファイル名もそうなっている),見切れた分の画面ダンプを取れませんでした……残念。

ウェブデザイン用方眼紙(縦長版)

こういったツール(?)は,割と簡単に作れるんですけれど,その労力の割に効果があるんじゃないかと思います。手描きの四角を書くより,よっぽど正確に自分のイメージを反映できますもんね。

このダンプが気に入らない方は,元になっている HTML をこちらに置いておくので,適当に使ってみてください。HTML 版の方はコーディングする時にも役に立ちそうですね。また,背景に指定している方眼の PNG 画像は,方眼以外を透明にしてあるので,方眼用の div 要素なんかをダミーで作っておいて背景に指定すれば,ブロックごとに方眼を作ることもできます。

ここで紹介したのは背景が明るめのサイトを想定しているんですけれど,暗い背景の場合は上のファイルをゴニョゴニョやって自分仕様にしてもらえばいいと思います。

Trackback
Trackback URL:
Ads
About
Search This Site
Ads
Categories
Recent Entries
Log Archive
Syndicate This Site
Info.
クリエイティブ・コモンズ・ライセンス
Movable Type 3.36
Valid XHTML 1.1!
Valid CSS!
ブログタイムズ

© 2003-2012 AIAN