ワイヤーフレーム（ウェブサイトの設計図）

Check

ワイヤーフレームとは、骨組みのことですね。
ウェブサイトを構築する際にしっかり作り込んでおくとデザインの作業もスムーズに進めることができる。
と、最近反省した点です。（笑

デザインの段階で、margin、paddingもしっかり作り込むことでコーディングの際もかなり迅速に作業することができる。
それに、抜け要素なども最小限に押さえることもできるうえ、クライアントにプレゼンする際にも利用できるので、かなり効率的。

で、自分の確認のためにも勉強させていただいているサイトを載せます。
是非ともご参考に。

・I ♥ wireframes

ここは、更新率が半端ない。

・The Fine Art of Wireframes

ここは、かなりのお気に入り。
手書きでまるで漫画のように書かれているので、なかなか面白い。
デッサン力って必要だなぁー、って思わせる。

・Web Browser Elements

ブラウザごとの、ボタンやチェックボックスなどのフォーム要素画像をダウンロードすることができる。
これは、ブラウザごとに見方が変わってくるので、かなり重宝。

・The Pencil Project

これはFirefoxのアドオン。
今後、フレームワーク作りに試しに使用しようかなと考えてます。

・Lovely Charts

フォームの作成などがweb上で制作できるそう。
これは面白そう。

・Redesigning the ExpressionEngine Site

今しがた、頑張って読んできましたー。
英語なので、多分50%も分かってない可能性大ですが、かなり勉強になる。
ここでは、ワイヤーフレームから実際のサイトができあがるまでを解説されております。
いや、もっかい読んでこよう。

そんなこんなで、もぅ9月。
月日が経つのは早いなぁ、、
また一つレベルアップできた気がする。

========//

2011/02/19
・各サイトのスクリーンショットを追加しました。
・2009年の記事ですが、今でもかなり有用なワイヤーフレームだと思います。
（と言いますか・・・私、文末に「また一つレベルアップできた気がする。」とか、こんなこと言ってたんですね・・・お恥ずかしい。）

私も950pxのグリッドデザイン用のワイヤーフレームを公開しております。
宜しければお使いくださいね。

950pxのグリッドデザイン用のワイヤーフレーム：950pxのGrid System Design

この面白かったら、私のFacebookページ（ファンページ）の「いいね！」を押していただけけると嬉しいです。

関連する記事もどうぞ:

• ワイヤーフレーム（ウェブサイトの設計図）


• ウェブデザインの新基準？｜Grid System Design – 950px -


• 【遅】ヒトリフェストの2010年人気記事


• 950pxのGrid System Design


• 企業のfacebookページを2つに分類して色々考えてみた。

Popularity: 59% [?]

Tags: WEB

Category: clips, design, WEB