クライアント満足度がアップする7つのウェブデザインシート

印刷可能なPDF、ウェブデザインのおともに。

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

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

Web sketching template by Nunile

Using the 6 pages template

Using the 6 pages template


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

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

Wireframe template by alfonso_bozzelli

Wireframe template (C) alfonso_bozzelli

by alfonso_bozzelli


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

Printable Web Page Design Template [Distractable]

webpage_wireframer

Printable Web Page Design Template


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

960 Grid System

960 Grid System Templates

960.gs


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

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

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

Concept7 A3 sketching grid paper

Concept7 A3 sketching grid paper

Concept7 A3 sketching grid paper


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

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

Storyboard Templates

Storyboard Templates

Storyboard Templates


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

Wireframe Magnets (DIY Kit)

Wireframe Magnets

Wireframe Magnets


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

いかがでしたか?

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

そしてサイト全体のイメージが固まったら、UIデザインで困らないために押さえておくべき7つのWEBサービスもお忘れなく。

This post is also available in other languages.

Reactions on Twitter

  1. @kaynea_real より:

    クライアント満足度がアップする7つのウェブデザインシート http://t.co/ktJyFiL1

  2. @agrippa_ より:

    クライアント満足度がアップする7つのウェブデザインシート http://t.co/GzG4ETEygO

  3. @tsoshiro より:

    クライアント満足度がアップする7つのウェブデザインシート http://t.co/za1OoX5Gho