最近のWeb制作の勉強になる!Webサイトのワイヤーフレーム・ユーザーフローのまとめ
Post on:2016年4月8日
プロジェクトの関係者でないとなかなか目にすることができないワイヤーフレームやユーザーフローもdribbbleだと、たくさんアップロードされています。
最近のWeb制作の参考になりそうなワイヤーフレーム・ユーザーフローを紹介します。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-01.png)
アプリのランディングページ用のワイヤーフレーム。既にページは完成しており、実際のページは「Kique」です。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-34.png)
ハイフィデリティ(操作可能)なワイヤーフレーム。
ローフィデリティなものはスコープを確認する時に役立ちますが、制作に入る前には操作可能なものでクライアントに承認を得ることで、プロジェクトをスムーズに進めることができます。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-02.png)
最適化されたランディングページのワイヤーフレーム。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-03.png)
こちらもハイフィデリティなワイヤーフレーム。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-05.png)
サムネイルを使ったユーザーフロー。それぞれのページにコンテンツと特徴がリストで記載されており、分かりやすいですね。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-14.png)
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-06.png)
High-fidelity wires explorations
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-07.png)
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-08.png)
Platforma Wireframe | Coming Soon
ワイヤーフレームのキットを使って作成されたワイヤーフレーム。
ワイヤーフレームに素材を使うのは、有りですね。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-09.png)
Free responsive wireframes (GIF)
レスポンシブ用のワイヤーフレーム。PSDがダウンロードできます。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-10.png)
Event Management Dashboard Wireframe #1
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-12.png)
ワイヤーフレームをかっこよくデザイン。実際のサイトは「Joseph G.Keller」です。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-13.png)
オンラインのモックアップツールで作成されたワイヤーフレーム。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-15.png)
Adobe XDで作成されたワイヤーフレーム。今年はこれが増えそうですね。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-16.png)
こちらはSketchで作成されたワイヤーフレーム。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-27.png)
Illustratorで作成されたワイヤーフレーム。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-18.png)
そして、手書きもまだまだ捨てたものではありません。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-17.png)
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-19.png)
ページ内の役割を設計するハイレベル ワイヤーフレーム。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-20.png)
Wireframe for Tapcore's New Landing Page
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-32.png)
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-22.png)
こういったフローチャートがあると、なにが重要なのかがよく分かりますね。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-23.png)
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-24.png)
モジュール式のアプローチを取り入れたワイヤーフレーム。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-25.png)
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-26.png)
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-11.png)
デバイスごとの表示サイズで変化するヘッダのワイヤーフレーム。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-21.png)
レスポンシブ用の横長タイプのレイアウトの展開例。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-28.png)
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-29.png)
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-30.png)
ユーザーのさまざまな操作を考慮したUXベースのフロー。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-31.png)
縦長ページからの遷移を分かりやすく示したサイトマップ。
![ワイヤーフレームのサムネイル](http://coliss.com/wp-content/uploads-201602/2016040811-33.png)
sponsors