Web制作の参考になる！サイトマップやハイレベルサイトマップ、フローチャートなどのまとめ

他の人のサイトマップやフローチャートってなかなか見る機会がありませんよね。
そんな時は世界中のクリエイターが集まるDribbbleです。Dribbbleからサイトマップやハイレベルサイトマップ、フローチャートを紹介します。

使用ツールはIllustrator, Sketch, Omnigraffleなどで、機能性だけでなくデザイン性も重視されて作成されています。
サイトマップやフローチャートで使える素材も一番最後にご紹介。

Sitemap for Student Guide
Illustrator用のUIキットを使って作成されたサイトマップ。

Flowy
レイアウトやコンポーネントなどカード状に用意されたテンプレートをフローチャートに貼り付けて作成。
ユーザーフローの拡大: User Flow

Sitemap

User Flow
フルスクリーンでのミニマルなエクスペリエンスを想定したユーザーフロー。

Imma Sitemap
プロジェクトの規模に関わらず、デザインプロセスはサイトマップで始め、クライアントと一緒にサイト構造を確認しながら進めます。

User Flow
ワイヤーフレームを作成する前段階にアーキテクチャ全体を熟慮できるよう作られたサイトマップ。

Moovers Visual Sitemap

Sitemap
コンテンツ名とIDで構成されたシンプルなサイトマップ。

Sitemap IntelliMap
サイト内のコンテンツや動線が俯瞰できるハイレベルサイトマップ。

Sitemap
サイト内の動線を設計するハイレベルサイトマップ。

Sitemap
フロー間におけるナビゲーションを改善するために中心となるプロダクトから作成したサイトマップ。

Sitemap/Userflow
通常を使っているテンプレートをより使いやすくカスタマイズしたサイトマップとユーザーフロー。

Ideas&Sitemap
サイトマップのアイデア。説明がないので詳細は分からないのですが、左のブルーと右のブルーが同じで、右が子コンテンツでしょうか。

最近のWebデザインで採用されているレイアウト72種類を収録した無料のUI素材
さまざまなレイアウトが用意されたサイトマップやフローチャートを作成するためのPSD, AI, Sketch素材。