Layer8

デザインするとき、いきなりパソコンに向かいますか？それともノートを広げますか？
デジタルだと簡単に変更できるし再利用も簡単でしょう。ですが本格的にとりかかるより前にはフリーハンドでざくざく描くほうがいい気もします。クライアントの意向を確認する際にも、ラフデザインは重要ですよね。
今回は、紙とエンピツがお好きなデザイナーさんに捧げる PDF のまとめです。印刷してウェブデザインのおともにどうぞ。

サムネイルからダウンロードページへ行けます。

Web sketching template by Nunile

いきなりいちおしの一枚です。
複数のデザイン・ページ案を並べて描ける６ページ版(写真にて利用)と、大きくのびのびデザインできる１ページ版があります。

上記のリンクは Flickr ですから画像ファイルです。印刷用の PDF は解説のリンクからダウンロードしてください。

Wireframe template by alfonso_bozzelli

もっとシンプルなものがお好みならこちらのワイヤフレーム。
こちらも Flickr ですので、印刷用は zip へのリンクからダウンロードして下さい。画像の１ページ版(full)と、縦に並べて描ける２ページ版(mini)が入っています。

Printable Web Page Design Template [Distractable]

方眼紙フリークのあなたにはこのテンプレートがあります。ディスプレイの縦横比に合わせたラインが入っているので、「Above the fold」(スクロールしなくても眼に入る範囲)がわかりますね。

960 Grid System

ウェブサイトの幅を 960px にせんと布教を続ける960 Grid System (960.gs)には、960px 幅に合わせたツール類がありました。

サイトトップ左上からダウンロード出来る zip には、Fireworks や Inkscape など多種多様なソフトに合わせたテンプレートが詰まっています。スケッチシートだけが欲しい時は、GitHubへ行きましょう。「View Raw」からダウンロードできます。

12列・16列・24列のグリッドと、それぞれ１ページ版と４ページ版の合計６枚の豪華セットです。

Concept7 A3 sketching grid paper

ふつう印刷物といえば A4 ですが、このスケッチシートは２倍の A3 サイズ。比較用に消しゴムをおいてみました。
ブラウザ枠だけで紙面の2/3を占め、周りには充実のメモ欄。ちょっと細かいデザインもクライアントの要望もびっしり書き込めます。

ちなみに前述の 960.gs のスケッチシートをしばらく使ったあとで自分なりのものを作ってみたとのことで、グリッドシステムは互換性があります。

Storyboard Templates

映画で使う絵コンテ用のテンプレートですが、シンプルな作りなのでウェブデザインに流用できます。当然ですが映画の縦横比はディスプレイと同じなので、使い勝手もよいかもしれません。
メモなしの９ページ版と、メモありの３ページ版があり、複数のデザインを比較する際やアイデア出しに便利です。

Wireframe Magnets (DIY Kit)

仲間と相談しながら UI を作る場合はこちらをどうぞ。マグネットシートに印刷して切り取ることで、ボタンやフォームの部品をホワイトボードに並べてデザインできます。

いかがでしたか？

もしいいものがなかったのなら自分で作ってしまうというのもひとつの手です。
お気に入りのテンプレートを使えば、作業効率もクライアントの印象も上がるはず！きっと！