サイト全体を把握するために作成するサイトマップ。わかりやすいサイトを制作する際には必ずと言っていいほど重要な役割を担っています。
しかし、サイトマップと一言で言っても、実はサイトマップには２種類あります。
本日はそれぞれのサイトマップの役割と制作方法をご紹介いたします。

■制作者にとってのサイトマップ
まず、HPを作成する過程の部分で必要となるサイトマップです。主な役割と致しましては、コンテンツの整理や、コンテンツをより理解しやすい下層ページに置くための設計図となります。ワイヤーフレームとの違いはデザインの設計図かコンテンツの設計図かの違いとなります。

制作方法は特に問われておりませんが、その会社内で有効な手段で制作しましょう。例えば、ほぼ1～2人で制作する場合においては、手書きでも構わないと思います。しっかりデータとして保管する場合においてはイラストレーターが便利でしょう。もちろん、見せる相手がユーザーではなく、プロであるため、ボックス・ライン・テキストのみで十分です。
しかし、制作人数が多かったり、場所が離れてしまう場合はCacooというWEBコンテンツを利用する手もあります。これはアカウントを取得し、オンラインでページデザイン・ワイヤーフレーム・サイトマップを作成・編集できるツールで、共有登録をすれば、任意のチームで一つのドキュメントを閲覧・編集することができます。
大人数・遠距離の作業となる場合はこちらで情報共有を行うと便利です。

■ユーザーにとってのサイトマップ
こちらのサイトマップは、ユーザーが主に使用するもので、ページコンテンツのひとつとして挿入するものです。役割としては、ユーザーがページ全体を把握でき、そのページ内の欲しい情報へ辿りつくためのルートを確保できる地図として使用されます。大きなページになるほど、欲しい情報の階層は深くなってしまうものです。しかし、このサイトマップさえあれば、ユーザーが迷うことなく、目的の情報にたどり着けるのです。もちろん、ひとつひとつのページやコンテンツ・デザインによって、サイトマップを見なくても目的にたどり着けるユーザーインターフェースを意識したサイト制作をすることが大前提なので、あくまで補助的な要素として用意しましょう。

制作方法については、もちろんデザイン構築からコーディングまで、通常のページ同様に見やすく、わかりやすいものにします。社内ではなくユーザー（顧客）に見せるものなので、当たり前ですが、サイトマップが分かりにくいページはかなり不完全なサイトと言っても過言ではありません。どのようなユーザーにおいても目的にたどり着ける目的をしっかり確保してくれるものです。例えば、ご年配の方は真っ先にサイトマップを確認する癖がある方が多くいらっしゃいます。html,cssが今ほど高機能ではなかった時代において、ユーザーインターフェースを意識したサイトは今よりの劣ったものとなっていました。ですので、サイトマップというものが生まれました。現在では必要ないほどにわかりやすいデザインができるようになりましたが、それでもそういったユーザーに対しても情報ルートを確保できるようにすることが重要です。
そういった細かい気遣いを怠らないサイトこそが、会社に利益を与える広告として評価されるのです。

【R・Oさん】
発表方法：
メモを用意して段取りをしっかり持っている。アイコンタクト・ボディランゲージがあるともっといいと思います。
企業研究内容がよくできており、理解しやすい。
サイトマップは見やすくシンプル。しかし、ページ内リンク（下層ページが充実している）
ブログの提案の理由が明確でクライアントの事をよく考えている。

デザイン：
スマホサイト　コンテンツが少ないかもしれない。文字の横幅も画像に揃えてあげた方がいいかと思います。文字が少し小さいと感じます。

PCサイト：
雰囲気の作り方が上手く、イメージが伝わりやすい。一目でこの企業のギターを想像できる。リンクボタンの部分がちょっとわかりにくいので、ボタンを作ってあげるといいです。アイキャッチの文字が少々見辛い。

【T・Nさん】
発表方法：
コンセプトが詳しく明示されており、女性向けギターの販売ページとしてのデザインという目的がはっきりしている。もう少し企業がどんな事を意識しているのかを

デザイン：
スマホサイト　色の使い方がとてもうまい。女性らしさがとてもでたサイトだと感じます。もう少しコンテンツを入れてあげた方がいいと思います。

PCサイト：
基本に忠実なレイアウトで分かりやすい。実際にありそうな雰囲気があるが、アイキャッチの画像ももう少し女性を意識したものがいいと感じます。黒の淵が目立つので、なくしても綺麗にみえると思います。

【R・Hさん】
発表方法：
もう少し企業の内容が知りたい。全体像だけでなく、拡大して個別に説明してあげると見やすい。コンテンツがしっかりしており、ボリュームは十分にあるので、企業分析・客層は頭の中でちゃんとまとまっていると思います。もっといっぱい伝えていきましょう。

スマホデザイン：
色がちょっと見辛く感じてしまいます。まずは自分の感覚で決定するよりも、色見本から奪い勉強していく方が良いかと思います。

PCデザイン：
システムの事も考慮したデザインでとても良いです。下のメニューの色区分が少々個性的であまり他の人には理解しがたい可能性があるので注意しましょう。

【T・Kさん】
発表方法：
企業のこだわりは明確だが、販売においての戦略があったらもっとよい。いっぱい真面目に考えていることはよく伝わってきますし、ひたむきさを感じます。正直、それで十分ではありますが、相手を共感させるという目的でプレゼンの発表を練っていくといいですね。

スマホデザイン：
ボタンの発想がとても良くできていて、デザインの作り方も個性的で面白い。しかしながら、流行のデザインというものがあるので、次回はそっちの方を研究してやってみるととてもいい経験になると思います。

PCデザイン：
隠れていたギターの全貌が見えるようになったのは個人的に好きです。メニューは優先度が高いので、文字を見やすくしてあげるとよいと感じます。

【N・Aさん】
発表方法：
声に特徴を持たせてインパクトを持たせるのは大事です。ヒトラーも演説でそういった方法をとっていましたしいいなと感じますが、笑っている人は話をなかなか効きにくいものです。コンセプトがアーティスティックすぎると思います。ニッチなギター会社はいますが、そういう会社は自社でHPを作る傾向があるので、注意しましょう。一生懸命作っていたサイトマップも拝見したかったです。

スマホデザイン：
雰囲気はとてもよくコンセプトにあったデザインですが、文字が少々見えづらい。コンテンツが充実してるので良かったです。

【R・Aさん】
発表方法：
ギター会社のイメージが明確で、コンセプトもはっきりしていてデザインの共感を集めやすい。せっかくなら立って伝えた方が伝わるとおもいます。
サイトマップも充実している。下層ページは階層深くしすぎないのは重要ですが、リンクをはってしまえば大丈夫です。３階層までは作っても大丈夫です。

スマホデザイン：
完成度がとても高いです。何よりわかりやすいですし、コンセプトである認知度の高いメーカーとしてはレイアウトの作り方が考えこまれているのが良くわかります。
特に色の統一感とアイコンの分かりやすさがとても評価できます。ここまでくると改善点を探すのに本気を出す必要があるくらいなので、素晴らしい出来です。

【N・Aさん】
発表方法：
ユーザーインターフェースについてはよく考えられています。しっかり考えられてはいるのですが、会社自体のコンセプトの伝え方が不明確であるので、その点を先に明確に説明してあげるといいと思います。根拠→結論の順番に説明することによって、相手を「なるほど」と思わせることが出来ます。

スマホデザイン：
余白がないから違和感を感じるのだと思います。ひとつひとつのボックス、もしくはコンテンツの間をわけてあげると、色のバランスはよく出来ているのでそれでかなり良くなると思います。ただスマホサイトはそういったデザインが多いですし、大きな問題ではないでしょう。実機で確認してからの作業なので、デザイン案としては十分だと思います。

【K・Mさん】
発表方法：
実際のサイトを見本にしたことを伝えることによってそのデザインにした理由が明確に見えて良いです。ただ、もう付加価値でそれを参考にした上で、自分がどういった会社でどういった理由でそのデザインを選択したのかを説明すると説得力がでると思います。
宮原さんは博識なので、色んな事をご存じだと発表で感じました。
その情報をあらかじめ整理して、発表の時はそのないようにしましょう。

スマホデザイン：
多分デザインをコンテンツによせていったのだと思いますが、順序としては逆の方がいいかと思います。コンテンツをしっかり決めたうえで、それに適したレイアウト・デザインを選択してあげましょう。

【W・Kさん】
発表方法：
実際のロック三味線という明確なテーマがあるのでデザインの共感度がとても高いです。企業研究が良くされています。三味線というニッチなジャンルの売り方をもう少し考えると明確なデザイン・レイアウト案がでたかなと感じます。

スマホデザイン：
和文化というものを一切払拭している中に三味線があるので、伝わりやすいと感じますが、一番初めのイメージで三味線を売っているサイトというイメージがわきにくくなってしまっているので注意しましょう。

PCデザイン：
サイドバーのデザインが少々PC用に変更してあげた方が見やすいと思います。PCについてはボタンが大きくする必要性があまりないので、簡潔にしてあげたほうがいいと思います。ブログをのせてあげるのはとても良いことだと思います。

【K・Sさん】
発表方法：
コンセプトが初心者入門ということですが、もう少し戦略がわかりやすいとデザイン
を構築する方法がわかり、スムーズに作業が作れたと思います。やはり企業の全体像が把握できたかなとおもいます。しかし、なにより伝えようとする姿勢がひしひしと伝わってくるので、後は技術面を磨けば、説得力はうまれます。

スマホデザイン：
色が与えるイメージを考えてみてもいいかと思います。全体的なデザインが少々バランスが悪いですがひとつひとつのデザインはいいので、最終的なバランス

PCデザイン：
レイアウト・コンテンツに関しては文句なく、仕事で通用するレベルだと思います。しかしながら、デザインのレパートリーを増やすべきかと感じます。基本的にフラットデザインで作られていますが、枠線が存在することで立体感がでてしまっています。

【K・Tさん】
発表方法：
一言一言をメモにかいて読んでいるイメージがあるので、基本的には話す見出しをメモに書いて重要事項のみをメモしておきましょう。そこから説明内容はその場に合わせた発言をするのが有効です。デザインのセンスを持っていると思うので、もっと自信を持って発表したほうがいいです。作った本人が不安であれば、それを見た人も不安になってしますので、出来が悪いと感じても完璧にできた気分で発表しましょう。

スマホデザイン：
本当に存在するギター会社のようなページで良いデザインだと思います。文字サイズが小さく感じます。画像選びがとてもうまいのですが、その反面、ボタンやメニュー・コンテンツ等のデザインがもう少し色んなパターンを用意できるといいと思います。

PCデザイン：
英語にする場合の注意点としてカタカナで表現できるものであれば大丈夫です。スマホとＰＣのデザインが変化がないという事はユーザーインタフェースはあまりいいとは言えませんので、画面の大きさの違いを意識するともっとよくなるかと思います。

【H・Nさん】
発表方法：
ひとつひとつの項目を明確に意識した方が説得力があると思います。デザインもアーティスティックなデザインとなっているため、王道からは離れている。ということはそれが「売れる」と相手に思わせなければなりません。企業分析・客層ターゲットをまとめ、サイトマップ・ワイヤーフレームを意識しましょう。

スマホデザイン：
イラストとデザインのバランスが取れていない気がします。イラストに手が込んでいる分、全体的なコンテンツ・デザインが少々シンプルになっているため、イラストにばかり気がとられ、情報が入ってこない印象があります。

ＰＣデザイン：
デザインが初めからできる人はいませんが、センスは十分にあると思います。やはり、そのセンスを生かすためにも、色んな良いデザイン・悪いデザインを見て、目を肥やしていくといいかと思います。

【Y・Hさん】
発表方法：
コンセプト・ターゲットも良く練られているのでコンテンツが理解しやすいです。ただ、客層やターゲットが定まっていないのでデザイン的にぶれてしまっている点が見受けられます。基本的に悩んでしまう部分に関しては情報というとっかかりさえつかめれば、なんなく超えていけます。

スマホデザイン：
全体的なコンテンツは十分なボリュームがありますが、ひとつひとつのデザインについて、もっと他のサイトを参考にした方がいいと思います。また、すべての部分において、どうしてそういったデザインにしたのか説明できるように考えていきましょう。

【A・Yさん】
発表方法：
細かい理由が考えられていて、とても説得力のある発表でした。ちょっと緊張してしまって普段と変わったイメージでしたが、それは本当に慣れだと思うので、数をこなしていきましょう。実際のデザインはとてもしっかりしているので、プレゼン次第ではいくらでも欲しがる企業はいます。自信をもっていきましょう。

スマホデザイン：メニューの部分が一番目立ってとても良いですが、文字がデザインにつぶされてしまってるので、コンテンツ優先でデザインしていきましょう。テキストの加工が特にされていないので、その部分で改善していけばもっと良くなるでしょう。