ウェブサイトの設計図 ワイヤーフレームを活用しよう

ウェブサイトを構築する際にワイヤーフレーム(骨組み)からしっかり作り込んでおくとデザインの作業もスムーズに進めることができます。 また、クライアントに提示するプレゼンテーションとしても利用できるので、ワイヤーフレームを作って、要素の抜けや動作の矛盾などをなるべく最小限にすることができるのではないでしょうか。 今回は、ウェブサイトの設計図とも言える、ワイヤーフレームについていろいろとまとめてみました。 以前にこのブログでご紹介した『ウェブの画面設計に使えるまとめ』もあわせてどうぞ〜。

I ♥ wireframes

ワイヤーフレームがどんどんアップされています。とても参考になります。

I ♥ wireframes

The Fine Art of Wireframes

まるで漫画のような仕上がりの手描きのワイヤーフレーム。

The Fine Art of Wireframes

The Paper Version of the Web

こちらも手描きのワイヤーフレームがいくつかまとめられております。

The Paper Version of the Web

Download a Stencil Kit

ワイヤーフレームを作成する際によく使われる要素があらかじめ用意されている便利なツール。

Download a Stencil Kit

Web Browser Elements

ブラウザごとに、ボタンやチェックボックス、ラジオボタンなどのフォーム要素画像をダウンロードすることができます。ワイヤーフレームを作成するときに重宝しそうですね。

Web Browser Elements

web.without.words

こちらのブログは、実際にあるウェブサイトからワイヤーフレームを作成するとどうなるのかをアップされているユニークなブログ。

web.without.words

Wireframes Magazine

その名もワイヤーフレームマガジン。様々なワイヤーフレームが紹介されているブログです。

Wireframes Magazine

Redesigning the ExpressionEngine Site

ワイヤーフレームから実際にデザインが仕上がっていく行程を見ることができます。

Redesigning the ExpressionEngine Site

The what, when and why of wireframes

ワイヤーフレームの重要性を説明してくれています。サンプルの画像を見ているだけでも参考になるのではないでしょうか。

The what, when and why of wireframes

Lovely Charts

ブラウザから以下のようなフォームが簡単に作れるツールです。JPGやPNGでエクスポートすることができます。

Lovely Charts

The Pencil Project

無料で使えるFirefoxのアドオンです。簡単にフォームなどを並べてワイヤーフレームを組むことができます。

The Pencil Project

関連記事

9件のコメント

  1. すいません、なんかページが縦に長過ぎませんでしょうか・・・

  2. ピンバック: codeRecords

コメントを残す

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