Web制作の参考になる!サイトマップやハイレベルサイトマップ、フローチャートなどのまとめ
Post on:2015年7月14日
他の人のサイトマップやフローチャートってなかなか見る機会がありませんよね。
そんな時は世界中のクリエイターが集まるDribbbleです。Dribbbleからサイトマップやハイレベルサイトマップ、フローチャートを紹介します。
![サイトマップやハイレベルサイトマップ、フローチャートなどのまとめ](http://coliss.com/wp-content/uploads-201502/2015071401.png)
使用ツールはIllustrator, Sketch, Omnigraffleなどで、機能性だけでなくデザイン性も重視されて作成されています。
サイトマップやフローチャートで使える素材も一番最後にご紹介。
![サイトマップのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015071401-01.png)
Sitemap for Student Guide
Illustrator用のUIキットを使って作成されたサイトマップ。
![サイトマップのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015071401-02.png)
Flowy
レイアウトやコンポーネントなどカード状に用意されたテンプレートをフローチャートに貼り付けて作成。
ユーザーフローの拡大: User Flow
![サイトマップのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015071401-03.png)
![サイトマップのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015071401-04.png)
User Flow
フルスクリーンでのミニマルなエクスペリエンスを想定したユーザーフロー。
![サイトマップのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015071401-05.png)
Imma Sitemap
プロジェクトの規模に関わらず、デザインプロセスはサイトマップで始め、クライアントと一緒にサイト構造を確認しながら進めます。
![サイトマップのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015071401-06.png)
User Flow
ワイヤーフレームを作成する前段階にアーキテクチャ全体を熟慮できるよう作られたサイトマップ。
![サイトマップのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015071401-07.png)
![サイトマップのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015071401-08.png)
Sitemap
コンテンツ名とIDで構成されたシンプルなサイトマップ。
![サイトマップのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015071401-09.png)
Sitemap IntelliMap
サイト内のコンテンツや動線が俯瞰できるハイレベルサイトマップ。
![サイトマップのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015071401-10.png)
Sitemap
サイト内の動線を設計するハイレベルサイトマップ。
![サイトマップのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015071401-11.png)
Sitemap
フロー間におけるナビゲーションを改善するために中心となるプロダクトから作成したサイトマップ。
![サイトマップのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015071401-12.png)
Sitemap/Userflow
通常を使っているテンプレートをより使いやすくカスタマイズしたサイトマップとユーザーフロー。
![サイトマップのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015071401-13.png)
Ideas&Sitemap
サイトマップのアイデア。説明がないので詳細は分からないのですが、左のブルーと右のブルーが同じで、右が子コンテンツでしょうか。
![サイトマップのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015071401-14.png)
最近のWebデザインで採用されているレイアウト72種類を収録した無料のUI素材
さまざまなレイアウトが用意されたサイトマップやフローチャートを作成するためのPSD, AI, Sketch素材。
sponsors