ウェブサイトの設計図 ワイヤーフレームを活用しよう
ウェブサイトを構築する際にワイヤーフレーム（骨組み）からしっかり作り込んでおくとデザインの作業もスムーズに進めることができます。
また、クライアントに提示するプレゼンテーションとしても利用できるので、ワイヤーフレームを作って、要素の抜けや動作の矛盾などをなるべく最小限にすることができるのではないでしょうか。
今回は、ウェブサイトの設計図とも言える、ワイヤーフレームについていろいろとまとめてみました。
以前にこのブログでご紹介した『ウェブの画面設計に使えるまとめ』もあわせてどうぞ〜。
I ♥ wireframes
ワイヤーフレームがどんどんアップされています。とても参考になります。
The Fine Art of Wireframes
まるで漫画のような仕上がりの手描きのワイヤーフレーム。
The Paper Version of the Web
こちらも手描きのワイヤーフレームがいくつかまとめられております。
Download a Stencil Kit
ワイヤーフレームを作成する際によく使われる要素があらかじめ用意されている便利なツール。
Web Browser Elements
ブラウザごとに、ボタンやチェックボックス、ラジオボタンなどのフォーム要素画像をダウンロードすることができます。ワイヤーフレームを作成するときに重宝しそうですね。
web.without.words
こちらのブログは、実際にあるウェブサイトからワイヤーフレームを作成するとどうなるのかをアップされているユニークなブログ。
Wireframes Magazine
その名もワイヤーフレームマガジン。様々なワイヤーフレームが紹介されているブログです。
Redesigning the ExpressionEngine Site
ワイヤーフレームから実際にデザインが仕上がっていく行程を見ることができます。
The what, when and why of wireframes
ワイヤーフレームの重要性を説明してくれています。サンプルの画像を見ているだけでも参考になるのではないでしょうか。
Lovely Charts
ブラウザから以下のようなフォームが簡単に作れるツールです。JPGやPNGでエクスポートすることができます。
The Pencil Project
無料で使えるFirefoxのアドオンです。簡単にフォームなどを並べてワイヤーフレームを組むことができます。
|
|
|
4月 23rd, 2009 at 12:49 AM
[...] ウェブサイトの設計図 ワイヤーフレームを活用しよう | DesignWalker [...]
4月 23rd, 2009 at 1:45 AM
[...] ウェブサイトの設計図ワイヤーフレームを活用しよう [...]
4月 23rd, 2009 at 7:01 AM
[...] ウェブサイトの設計図 ワイヤーフレームを活用しよう | DesignWalker ウェブサイトを構築する際にワイヤーフレーム（骨組み）からしっかり作り込 んでおくとデザインの作業もスムーズに進めることができます。また、クライア ントに提示するプレゼンテーションとしても利用できるので、ワイヤーフレーム を作って、要素の抜けや動作の矛盾などをなるべく最小限にすることができるの ではないでしょう… original article [...]
4月 23rd, 2009 at 8:20 AM
すいません、なんかページが縦に長過ぎませんでしょうか・・・
4月 23rd, 2009 at 12:57 PM
[...] ウェブサイトの設計図 ワイヤーフレームを活用しよう | DesignWalker (tags: webdesign development) [...]
6月 2nd, 2009 at 12:38 AM
ワイヤーフレームからデザインへ…
ページを作成するときに、ページのレイアウトやデザインを決めるよりも前に、
そのページにどのような要素を配置するのか、その概要をまとめたものを用意する場合があります。（右….
7月 12th, 2009 at 3:54 PM
[...] ワイヤーフレームを活用しよう | DesignWalker http://www.designwalker.com/2009/04/wireframe-2.html 当たり前に使っていた方法に名前があったとはびっくりしたが [...]
7月 21st, 2009 at 4:23 PM
[...] ウェブサイトの設計図 ワイヤーフレームを活用しよう | DesignWalker http://www.designwalker.com/2009/04/wireframe-2.html [...]
11月 12th, 2009 at 1:54 AM
[...] http://www.designwalker.com/2009/04/wireframe-2.html タグ: WEBサイト設計, ワイヤーフレーム コメント (RSS) | トラックバック [...]
1月 13th, 2010 at 11:36 PM
[...] ワイヤーフレームを活用しよう http://www.designwalker.com/2009/04/wireframe-2.html 「I ♥ wireframes」はtumblrでどんどんワイヤーフレームを [...]