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