他人が作った「ワイヤーフレーム」をいつでも見ることができるサイトやブログ記事まとめ。

Webサイトを一から制作するときには、サイトデザインのイメージを下書きみたいな感じで手書きする人も多いと思いますが（いわゆるワイヤーフレーム）、その書き方はまさに十人十色で個性溢れるものになっていると思います。もしかしたら貴方が書いているワイヤーフレームはすごく独特な書き方をしているかもしれません（知りませんけど）。

というわけで他人が作った「ワイヤーフレーム」のサンプルを見ることができるサイトを探してみました。

 

Wireframe Showcase

Wireframe Showcase

 

ワイヤーフレームを作成するソフトで作ったのでしょうか、とても見やすくてわかりやすいです。

Conceive Plus | Wireframe Showcase

 

さすがにこの書き殴り具合は本人にしかわからないレベルかもしれません。

Robert W. Schneider | Director/Coach/Lecturer Website | Wireframe Showcase

 

I ♥ wireframes

I ♥ wireframes

 

これはIllustratorのテンプレートで作られたiPhone用のサイトデザインですね。さすがに綺麗です。

Illustrator template for iPhone design | User Centred

 

思いついたデザインイメージをザザザッと一気に書きなぐった感じです。

Verify Home Screen (Active) | Flickr – Photo Sharing!

 

Great Wireframe Examples on Pinterest

Great Wireframe Examples on Pinterest | 25 Pins

 

ザックリした手書きの書き方がいかにも欧米的な雰囲気です。

LowFi Sketch Wireframe on Whiteboard | Flickr – Photo Sharing!

 

サイトデザインの手書きイメージに番号をつけて、番号毎に説明的な注釈を書いたり一部分を拡大したイメージを書いたり、かなりわかりやすいです。 

Janko At Warp Speed home page sketch | Flickr – Photo Sharing!

 

海外のブログ記事より

参考記事：40 Examples Of Web Design Sketches And Wireframes | SmashingApps.com

 

水彩画のような背景の塗りつぶしが素敵です。マジックで書いたのでしょうか。

Librespeak interface sketch | Flickr – Photo Sharing!

 

上にでっかくタイトルを書いているのがカッコいいです。

Sketching | Flickr – Photo Sharing!

 

何だかとても緻密で細かいのですが、これはデザインと注釈がごちゃまぜになっているのでしょうか。

Original Sketch | Flickr – Photo Sharing!

 

他のブログ記事へのリンク

上で紹介したサイトやブログ記事でも物足りない方は、下記リンク先がワイヤーフレームのサンプルをまとめているブログ記事なので、こちらをチェックしてみて下さい。

 

20 Examples of Web and Mobile Wireframe Sketches

65 Examples Of Website Sketches For Inspiration | Pixelbell

25 Examples of Wireframes and Mockups Sketches | inspirationfeed.com

18 Great Examples of Sketched UI Wireframes and Mockups | Inspiration

40 Brilliant Examples of Sketched UI Wireframes and Mock-Ups

24 Professional Examples of Web and Mobile Wireframe Sketches – Designmodo

35+ Creative Examples of UI and Wireframe Sketches