最近のWeb制作の勉強になる!Webサイトのワイヤーフレーム・ユーザーフローのまとめ

プロジェクトの関係者でないとなかなか目にすることができないワイヤーフレームやユーザーフローもdribbbleだと、たくさんアップロードされています。
最近のWeb制作の参考になりそうなワイヤーフレーム・ユーザーフローを紹介します。

ワイヤーフレームのサムネイル

Landing Page Wireframes

アプリのランディングページ用のワイヤーフレーム。既にページは完成しており、実際のページは「Kique」です。

ワイヤーフレームのサムネイル

High Fidelity Dilema

ハイフィデリティ(操作可能)なワイヤーフレーム。
ローフィデリティなものはスコープを確認する時に役立ちますが、制作に入る前には操作可能なものでクライアントに承認を得ることで、プロジェクトをスムーズに進めることができます。

ワイヤーフレームのサムネイル

Optimized Landing Page

最適化されたランディングページのワイヤーフレーム。

ワイヤーフレームのサムネイル

Product Website Wireframes

こちらもハイフィデリティなワイヤーフレーム。

ワイヤーフレームのサムネイル

Userflowing

サムネイルを使ったユーザーフロー。それぞれのページにコンテンツと特徴がリストで記載されており、分かりやすいですね。

ワイヤーフレームのサムネイル

Wires()

ワイヤーフレームのサムネイル

High-fidelity wires explorations

ワイヤーフレームのサムネイル

Low Fidelity Wireframe

ワイヤーフレームのサムネイル

Platforma Wireframe | Coming Soon

ワイヤーフレームのキットを使って作成されたワイヤーフレーム。
ワイヤーフレームに素材を使うのは、有りですね。

ワイヤーフレームのサムネイル

Free responsive wireframes (GIF)

レスポンシブ用のワイヤーフレーム。PSDがダウンロードできます。

ワイヤーフレームのサムネイル

Event Management Dashboard Wireframe #1

ワイヤーフレームのサムネイル

Wire me not

ワイヤーフレームをかっこよくデザイン。実際のサイトは「Joseph G.Keller」です。

ワイヤーフレームのサムネイル

Website Wireframes

オンラインのモックアップツールで作成されたワイヤーフレーム。

ワイヤーフレームのサムネイル

Wireframe Website - Adobe XD

Adobe XDで作成されたワイヤーフレーム。今年はこれが増えそうですね。

ワイヤーフレームのサムネイル

Skeleton Wireframing Kit

こちらはSketchで作成されたワイヤーフレーム。

ワイヤーフレームのサムネイル

TedTodd Wires

Illustratorで作成されたワイヤーフレーム。

ワイヤーフレームのサムネイル

Wireframe Sketches

そして、手書きもまだまだ捨てたものではありません。

ワイヤーフレームのサムネイル

Joomla Hub Wireframe

ワイヤーフレームのサムネイル

High Level Wireframe

ページ内の役割を設計するハイレベル ワイヤーフレーム。

ワイヤーフレームのサムネイル

Wireframe for Tapcore's New Landing Page

ワイヤーフレームのサムネイル

Flowcharts

ワイヤーフレームのサムネイル

Flowchart BA

こういったフローチャートがあると、なにが重要なのかがよく分かりますね。

ワイヤーフレームのサムネイル

Landing Page Wireframe

ワイヤーフレームのサムネイル

Doctor Profile Wireframes

モジュール式のアプローチを取り入れたワイヤーフレーム。

ワイヤーフレームのサムネイル

Multvkino. Wireframe.

ワイヤーフレームのサムネイル

iPromote Wireframes Rd. 1

ワイヤーフレームのサムネイル

Headers Wireframe

デバイスごとの表示サイズで変化するヘッダのワイヤーフレーム。

ワイヤーフレームのサムネイル

Lying in layouts

レスポンシブ用の横長タイプのレイアウトの展開例。

ワイヤーフレームのサムネイル

Authentic Wireframes

ワイヤーフレームのサムネイル

New project wireframes

ワイヤーフレームのサムネイル

UX Framework Flow

ユーザーのさまざまな操作を考慮したUXベースのフロー。

ワイヤーフレームのサムネイル

Sitemapping Exercise

縦長ページからの遷移を分かりやすく示したサイトマップ。

ワイヤーフレームのサムネイル

MCC Arts Website Wireframes

top of page

©2017 coliss