- 更新日: 2017年03月22日
- 公開日: 2016年09月16日
Webサイトの整理術、「コンテンツマップ」の重要性と作り方
Webの制作って、企画からデザイン、コーディング、システム開発、デバッグ、とやることが多すぎて頭の整理がつきにくいものです。
そんな時は企画しているWebサイトを可視化すると、頭の中をスマートに管理できます。
手っ取り早く可視化できる方法のひとつに、コンテンツマップがあります。
Webサイトの整理術、「コンテンツマップ」の作り方
コンテンツマップとは
利用される場面としては、Webサイトの企画段階や既存サイトの改修時に利用されます。
コンテンツマップが必要な理由
- #### Webサイトのユーザービリティを高めるため
- #### Webサイトの目標を達成するため
これらの目標を達成するために、以下のことをコンテンツマップが助けてくれます。
- #### サイト内のコンテンツを再確認
- #### プロジェクトの目的やサイト構成をクライアント、デザイナー、プログラマーと共有
- #### 子テーマが必要な場合、デザイナーのイメージをコンテンツマップが助長
Webサイトにコンテンツマップを公開している例
コンテンツマップというと通常バックヤードの作業になりますが、最近ではそのわかりやすさ、使い勝手の良さから、サイトマップに変わる存在としてWebサイトにもアップされています。以下に参考となるコンテンツマップをご紹介させて頂きます。
製品数や情報量が多くてまとまりにくく、ユーザーの動線が難しいメーカーサイトでコンテンツマップが利用されています。
サイトマップと比較してもコンテンツマップの方が、ユーザーにとってわかりやすいです。
サイトマップとネーミングされていますが、内容はコンテンツマップです。ユーザー目線で設計されていることが伺えます。
お酒に関する歴史から飲み方、健康面など幅広い情報をわかりやすくコンテンツ毎にまとめています。
コンテンツマップを利用した方がいいのでは？というサイトhttp://www.softbank.jp/sitemap/
やっていることがスゴすぎるせいか、スクロールしてもスクロールしてもコンテンツ紹介が続きます。。。
コンテンツマップの作成手順
img:APPLE3DPRINT
- #### 情報整理の作業 まずはWebサイトの目標を明確にする必要があります。
一通りコンテンツが準備出来たら、コンテンツの配列を整理します。
ユーザー目線で考え、目的のコンテンツへストレスフリーに移動してもらう必要があります。
不要と思われるコンテンツは削除し、Web サイトの全体像を改めてイメージする必要があります。
- #### マップの制作 コンテンツ数が２，３０の場合は、一旦手書きしてみると頭の中が整理しやすいと思います。
コンテンツが多い場合は、以下に紹介するツールや表計算ソフトなどを使ってコンテンツマップを制作すると、管理もしやすいと思います。
また既存サイト改修の場合は、今のコンテンツを洗い出すこととGoogleアナリティクスの分析から始めることをおすすめします。
コンテンツマップを考える上ではディレクトリに囚われず、サイト全体を見て情報整理していく方が分かりやすいマップに仕上がります。上記で紹介したヤマハのコンテンツマップが参考になると思います。
Webサイトにもコンテンツマップを公開する場合は、HTMLやCSS、Bootstrapの知識があると作業が捗ると思います。
コンテンツマップの作成に便利なツール
img:WRITEMAPS
低コストで使いやすそうなツールをいくつかご紹介させて頂きます。
TEXT MINDMAP
コンテンツマップを考える上で必要となるWebサイトの目的やサイト構造などの検討に、マインドマップが役立ちます。こちらのサイトでは、Tabキーでどんどん奥深いマインドに到達していきます。直感的にマインドを広げられる使いやすいフリーツールです。
Mindmeister
オンライン上でマインドマップを制作するツールになります。Tabキーでマインドがどんどん広がります。
iMind Map
専用ソフトをインストールしてマインドマップを制作します。Windowsバージョンで180MB程度です。
WRITE MAPS
Cacooなどに比べて枠の追加が簡単。直感的に作業を進められるフリーツール（3つまで）です。
表計算ソフトやパワーポイント
エクセルやGoogleシートなどの表ソフト、それからパワポやGoogleスライドのようなツールもコンテンツマップの制作に役立ちます。
まとめ
いかがでしたでしょうか？Web ディレクターってやること多いな、と思われるかもしれませんが、これも先人の知恵の一つです。コンテンツを可視化することでクライアントとの認識のズレを防ぎますし、チーム内で作業する時も全体像が構造的に見える方が開発イメージも掴みやすいものです。
コンテンツマップの作成にはディレクトリ構造やユーザー動線など Web に関する基礎知識が必要となりますので、基礎学習がまだの方、CodeCamp で基礎を抑えておきませんか？
- この記事を書いた人
- オシママサラ
