Webサイト制作で参考になるサイトマップのデザインまとめ

※当ブログのリンクには一部広告が含まれています。

Webサイト制作で参考になるサイトマップのデザインまとめ

Webサイトのサイトマップは、ユーザビリティーやアクセシビリティー、SEOの観点から見ると作成した方がよいと一般的には考えられてきました。

しかし最近では、メガメニューやコンテンツのメニューを網羅したフッターなど、サイトマップの役割を果たす別の手法も増え、サイトマップを持たないサイトもよく見かけるようになっています。

やや存在感が薄れてきている印象のあるサイトマップですが、デザインの観点から見ると似たようなパターンになりがちで、メンテナンスがしやすくコンテンツの増減にも対応しやすいデザインを考えるとなると頭を悩ませることも少なくないので、国内ではどのような傾向があるのか調べてみました。

素敵なサイトマップのデザインを見つけたら追加していきます!

【この記事を書いた人】

Adobe使用歴20年以上、Webデザイナー歴15年以上、フリーランス歴10年以上のApple/運動好きな2児の母。Apple/クリエイティブ/運動/ライフスタイル関係の情報を発信中。プロフィール詳細

サイトマップのデザイン集

シンプルに上から下へと流れる王道パターン

コンテンツ増えても安心。一番よく見かけるパターンです。

NTT docomo

Apple

色分け型

第一生命

第一生命

さくら

さくら

悩み・目的別

サポート的な役割も果たしてくれます。

ソフトバンク

ソフトバンク

グーネット

グーネット

ヤマト運輸

ヤマト運輸

縦2分割

ベネッセ

Benesse

スズキ

スズキ

写真などを用いたグラフィカルなパターン

あさやホテル

あさやホテル

cannon

Canon

説明付きメニュー

メニュータイトルだけでは内容がわかりにくい場合にも有効ですね。

NHK

NHK

郵便局

郵便局

カテゴリーによってサイトマップの内容を変える

JAL

JAL

辞書風

goo

Goo

サイトマップの活用方法

ページが見つからない時に表示される404ページにサイトマップを載せて、ユーザーを適切な場所に誘導するというような使い方もできますし、まだまだ新しいデザインや使い方がありそうなサイトマップ。今一度サイトマップを見直してみるのもよいかもしれません。

ヘッダー、フッターなどのパーツやカテゴリーごとにデザインをまとめたサイトは以下のページでご紹介しています。こちらもサイトマップ同様、アイディアに詰まった時にオススメです。

スマートフォンに特化したサイトやアプリのUIデザインを集めたギャラリーサイトは以下の記事でまとめています。