読む人にも、書く人にも、
真に価値ある情報を。
wordpressの初心者向け情報サイト『webcode』
webデザイン

サイトマップをテンプレートを使って簡単に作成する方法

sitemaptemplate

Web制作をする際には、サイトマップを作る必要があります。初めての時は、サイトマップを作るにも四苦八苦することが多いです。

ただ、初めての人でもテンプレートを使うと、スムーズに作成することができるので、実際に僕が使っているテンプレートを今回紹介しようと思います。

そもそもサイトマップとは?

サイトマップというのが何かわからない方も多いと思うので、説明をしておきます。

SEO関連の知識にも「サイトマップ」という用語が出てきますが、これとは違う意味合いのものが今回のサイトマップです。

cacoo - サイトマップをテンプレートを使って簡単に作成する方法

(出典:cacoo)

このようなマップのことをサイトマップと言います。これは、サイト構造の全体像みたいなものです。

サイトマップがあることのメリット

なんでこんなものを作るのか?といった疑問を抱えている方の為に、サイトマップを使うことのメリットをお伝えしていきます。

ユーザーフローが描きやすい

まず、サイトマップがあると、ユーザーフローが考えやすくなります。

ユーザーフローというのは、実際にあなたのサイトを訪れたユーザーが、どういう動きをするのかといった流れみたいなものです。

最近は、「ストーリー」などのように表現されることも多くなりました。

実際のページ数が把握できる

実際にサイトマップにして、視覚化してみると、漠然と描いていたサイトの全体像が具体化されます。

何より、ページ数という数に落ちてくるので非常に分かりやすくなります。

図にしてみると、足りていないページがあることに気づくこともあるので、後々面倒なことにならなくて済みます。

同じようなページはデザインをまとめられる

サイトマップでは、階層が表現されています。

cacoo2 - サイトマップをテンプレートを使って簡単に作成する方法

(出典:cacoo)

階層というと分かりにくいですが、簡単に言えば、トップページから何回クリックしたら辿り着けるかみたいなものです。

大体の場合、階層が同じページはデザインも似てきます。

  • サイドバーが同じになる
  • ヘッダー・フッターが同じになる

サイトマップを作ることで、実際に作るデザインは何個必要かというのが大まかに把握できます。

全体のバランスが分かる

実際にマップにしてみると、「”料金プラン”の欄だけがやたらページ数が多くない?」みたいなことに気づくことがあります。

イメージだけで話してしまうと、こういったページ数の偏りに気づいたりもしますので、メリットでしょう。

勘違いの無いように説明を加えておくと、サイトが偏ってはいけないといった論理ではないです。

ただ、何回もクリックしないとたどり着けないような構造になるのは避けたいですね。

(退会するために、とにかく深くまで階層を行かないといけないサイトが多いのはなんでですかね)

作成のためのテンプレート

それでは、実際に使えるテンプレートの紹介です。

cacoo

cacooinc - サイトマップをテンプレートを使って簡単に作成する方法

URL:https://cacoo.com/lang/ja/examples/sitemap-software

サイトマップの作成に特化したツールです。比較的安いですし、14日間無料で使えたりするので、一度使ってみるのも手でしょう。

powerpoint

powerpoint - サイトマップをテンプレートを使って簡単に作成する方法

言わずと知れたパワーポイントです。

僕がパワーポイントで作成する時は、「SmartArt」というものを利用して作成します。

Xmind

xmind - サイトマップをテンプレートを使って簡単に作成する方法

URL:http://jp.xmind.net/

サイトマップのテンプレートにマインドマップ作成ソフトを出して良いのかという感じですが、僕はかなりオススメです。

無料で使えるし、パワーポイントのSmartArtよりも軽く動きます。

よくよく考えてみれば、サイトマップもマインドマップも似たような形ですから、大丈夫です。

テンプレートを使うメリット

なんで、テンプレートを使うのかと疑問に思った人の為に、ここで答えておきます。

デザインを考慮する必要がない

まず、何よりもサイトマップを作る目的は「サイトを作るため」です。

なので、サイトマップを綺麗にデザインしたところで、完成するサイトには何も影響しません。

デザイナーさんはこういったところでも、デザイン力を発揮したくなるかもしれませんが、どうでもいいところに注力してしまうとエネルギーを浪費するので楽をしましょう。

なにより、テンプレートを使うと何も考えなくてもある程度綺麗に仕上げてくれるので助かります。

丁寧に作った感が出る

これは、クライアントとの関係を円滑に保つ上で大事です。

やはり、手書きでグチャグチャっと書かれるよりも(ぐちゃぐちゃには書いたつもりはなくとも)、何かそれなりのツールで作ってる感のあるものの方が、しっかりやってくれているという印象が出ます。

テンプレート以外で作成するには

僕もそうですが、サイトマップを作るくらいにテンプレートを使いたくないと言った方もいると思うので、他の方法を紹介しておきます。

ペイントソフトを使う

まずは、普通のペイントソフトを使う方法です。

基本的にサイトマップは、四角形と文字と棒だけなので、描いて作ることが出来ます。

ただ、ペイントソフトを使うよりはパワーポイントの方が早いと感じています。

紙とペンを使う

次は、紙とペンで書く方法です。

手っ取り早く創れるので、僕は好きです。

画像での共有がメインになるので、後から付け足しみたいなのがあるときは少し大変だったりします。

まとめ

いかがでしたか?個人的には、サイトマップみたいな物は、分かりやすくて、意志共有ができて、それなりに綺麗であれば十分だと思っています。

サイトマップがあることで、その後の議論がより生産的に成る方が重要です。

個人的なオススメとしては、特に指定がなければXmindで良いんじゃないかな?という感じです。

最後までお読みいただきありがとうございました。

WordPressでおすすめのプログラミングスクール

オンラインマンツーマンならCodeCamp

bgt?aid=160728030173&wid=010&eno=01&mid=s00000016159001010000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
CodeCampは、完全オンラインで、現役エンジニア講師のマンツーマンレッスンを受けられるプログラミングスクールです。

CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。

プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。

プログラミングのオンラインスクールCodeCamp0 - Wordpressでおすすめのプログラミングスクール

CodeCampの口コミはこちら

オンラインテキストを自習形式ならTechAcademy

bgt?aid=160728030174&wid=010&eno=01&mid=s00000016188001104000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
TechAcademyは、1ヶ月の短期集中でWordpressについて学べる、完全オンラインのプログラミングスクールです。

基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。

TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。

TECH ACADEMYの無料体験はこちら0 - Wordpressでおすすめのプログラミングスクール

TECH ACADEMYの口コミはこちら