おしい県でWebに携わって働く人のブログ

基本的にはIT&Web界隈に関する役に立ちそうなことをまとめていきます。

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

f:id:lord_cashew:20140730112730j:plain

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

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

 

Wireframe Showcase

f:id:lord_cashew:20140730112822j:plain

Wireframe Showcase

 

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

f:id:lord_cashew:20140730114238j:plain

Conceive Plus | Wireframe Showcase

 

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

f:id:lord_cashew:20140730114428j:plain

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

 

I ♥ wireframes

f:id:lord_cashew:20140730112925j:plain

I ♥ wireframes

 

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

f:id:lord_cashew:20140730113833j:plain

Illustrator template for iPhone design | User Centred

 

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

f:id:lord_cashew:20140730114043j:plain

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

 

Great Wireframe Examples on Pinterest

f:id:lord_cashew:20140730112943j:plain

Great Wireframe Examples on Pinterest | 25 Pins

 

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

f:id:lord_cashew:20140730113226j:plain

LowFi Sketch Wireframe on Whiteboard | Flickr - Photo Sharing!

 

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

f:id:lord_cashew:20140730113149j:plain

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

 

海外のブログ記事より

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

 

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

f:id:lord_cashew:20140730115138j:plain

Librespeak interface sketch | Flickr - Photo Sharing!

 

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

f:id:lord_cashew:20140730115228j:plain

Sketching | Flickr - Photo Sharing!

 

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

f:id:lord_cashew:20140730115308j:plain

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

 

 

Webデザイン受発注のセオリー デザインコントロールが身につく本

Webデザイン受発注のセオリー デザインコントロールが身につく本

  • 作者: 片山良平,宮崎綾子,ケン・サイトー
  • 出版社/メーカー: ワークスコーポレーション
  • 発売日: 2011/09/08
  • メディア: 単行本
  • 購入: 2人 クリック: 36回
  • この商品を含むブログ (4件) を見る
 
基礎から覚える、深く理解できる。 Webデザインの新しい教科書

基礎から覚える、深く理解できる。 Webデザインの新しい教科書