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

ウェブサイトを構築する際にワイヤーフレーム(骨組み)からしっかり作り込んでおくとデザインの作業もスムーズに進めることができます。

また、クライアントに提示するプレゼンテーションとしても利用できるので、ワイヤーフレームを作って、要素の抜けや動作の矛盾などをなるべく最小限にすることができるのではないでしょうか。

今回は、ウェブサイトの設計図とも言える、ワイヤーフレームについていろいろとまとめてみました。

以前にこのブログでご紹介した『ウェブの画面設計に使えるまとめ』もあわせてどうぞ〜。

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

デザインblogランキング

コメント 10 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



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

  1. 無料動画 ネットちゃんねらー » 今年こそ!睡眠を極めるためのテクニック&睡眠系エントリまとめ 他 Says:

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

  2. 04月23日 今日のWEB担当者向けニュース拾い読み - WEBマーケティング ブログ Says:

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

  3. ウェブサイトの設計図 ワイヤーフレームを活用しよう | DesignWalker | 次なるもの Says:

    […] ウェブサイトの設計図 ワイヤーフレームを活用しよう | DesignWalker ウェブサイトを構築する際にワイヤーフレーム(骨組み)からしっかり作り込 んでおくとデザインの作業もスムーズに進めることができます。また、クライア ントに提示するプレゼンテーションとしても利用できるので、ワイヤーフレーム を作って、要素の抜けや動作の矛盾などをなるべく最小限にすることができるの ではないでしょう… original article […]

  4. 裸足になって何が悪い Says:

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

  5. links for 2009-04-23 « 個人的な雑記 Says:

    […] ウェブサイトの設計図 ワイヤーフレームを活用しよう | DesignWalker (tags: webdesign development) […]

  6. codeRecords Says:

    ワイヤーフレームからデザインへ…

    ページを作成するときに、ページのレイアウトやデザインを決めるよりも前に、
    そのページにどのような要素を配置するのか、その概要をまとめたものを用意する場合があります。(右….

  7. ワイヤーフレームで行こう!! | 吉田技研 Says:

    […] ワイヤーフレームを活用しよう | DesignWalker http://www.designwalker.com/2009/04/wireframe-2.html 当たり前に使っていた方法に名前があったとはびっくりしたが […]

  8. ワイヤーフレームで行こう | 吉田技研 Says:

    […] ウェブサイトの設計図 ワイヤーフレームを活用しよう | DesignWalker http://www.designwalker.com/2009/04/wireframe-2.html […]

  9. com » Blog Archive » ワイヤーフレーム Says:

    […] http://www.designwalker.com/2009/04/wireframe-2.html タグ: WEBサイト設計, ワイヤーフレーム コメント (RSS)  |  トラックバック […]

  10. ワイヤーフレームを作るのが好き アプリや素材、参考サイトなどのまとめのまとめ | 技術関係ブログ | 技術関係のニュースなどをご紹介 Says:

    […] ワイヤーフレームを活用しよう http://www.designwalker.com/2009/04/wireframe-2.html 「I ♥ wireframes」はtumblrでどんどんワイヤーフレームを […]

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ