こんにちは。愛鳥家の池原です。
インコと暮らして10年以上になります。
最近は全国各地でインコフェスや、インコ好きのオフ会が開催される程のインコブームです。
インコアイスなんてのもあるんですよ。
神戸でも近々、インコグッズのイベントがあり、私は非常にワクワクしております。
さて、ここまで「インコ」をしつこく連呼しましたが、
今回はウェブ制作の過程で必ず必要になるサイトマップを、無料のソフトXMindを使って簡単に作成する方法をご紹介いたします。
Table of Contents
XMindとは
XMindとは香港のXMindLtd.社が開発しているオープンソースのソフトフェアです。
このソフトを使用して、マインドマップ、フィッシュボーンチャート、ツリー図、組織関係図などを簡単・手軽に作成することができます。
ビジネス用途はもちろん、さまざまな場面で利用できます。
無料版と有料のPro版がありますが、今回この記事でご紹介するサイトマップの作成は無料版でも充分に対応が可能です！
ダウンロードしてみる
それでは早速、サイトマップを作成する準備を行います。
ブラウザからXMindの公式サイトへアクセスします。
「無料ダウンロード」をクリックします。
お使いのOSに合わせて選択ください。
今回はMac OS X版についてご説明しています。
「□ライセンスの内容に同意します」にチェックを入れ、ダウンロードします。
ダウンロードした.dmgファイルを実行し、XMindのアイコンをApplicationsフォルダにドラック＆ドロップします。
Launchpad、またはFinderからコピーされたXMindアイコンをクリックすると、XMindが起動します。
これで準備は完了です！
実際にサイトマップを作成してみる
では早速サイトマップを作成していきましょう！
まず初めに「空白のマップを新規作成」をクリックします。
図のような画面が出てきます。
「中心のトピック」と書かれている青い四角を選択すると右側に図のようなウィンドウが表示されます。
表示されない場合は、右のバーのハケのアイコンをクリックしてください。
構造を「マップ」→「ツリー（右）」に変更します。
トピック内の文字はダブルクリックすることで書き換えが出来ます。
「中心のトピック」→「トップページ」に変更しましょう！
続いて下層ページを追加していきます。
「トップページ」トピックを選択した状態で、右上のトピック追加アイコンから「サブトピック」をクリックすると、選択したトピックの下に新しいトピックが追加されます。
Enterを押すことでもトピックが追加できます。
さらに追加したサブトピックの下にトピックを追加したい場合も、親となるトピックを選択した状態で「サブトピック」をクリックします。
図の場合、赤枠で囲まれたトピックが新しく追加するサブトピックの親トピックになります。
サブトピックを3つ追加すると、他とは異なる形状の線が出てきます。
この線の形状の変更も可能です。
変更したい線が出ているトピックを選択した状態（図では赤枠で囲まれたトピック）で「ライン」から線の形状を選択します。
綺麗に揃いましたね！
無料で使える便利な機能
サイトマップを作成する際に役立つ機能をいくつかご紹介します。
トピックを横並びにする
下層ボリュームが多いサイトだと、どうしてもページ全体が縦長になってしまいます。
そんな時は、トピックを横並びにしてしまいましょう！
今回は「求人応募フォーム」と「プライバシーポリシー」を横並びにしてみます。
横並びにさせたいトピックの親トピック（赤枠）を選択し「構造」から「タイムライン（横）」を選択します。
横並びに変更されます。
トピックの色を変更する
色を変更したいトピックを選択した状態で「形状＆ボーダー」から色の変更も可能です。
フォームは赤、簡易ページは黄色・・などルールを決めて色分けすると、共有する際も便利ですね！
トピックに自動的に番号を追加する
一番上のトピックを選択した状態で「段落番号」から「アラビア（1,2,3…）」を選択。
自動的に番号が表示されます。
トピックの追加や並び替えをすると、自動的に番号も変わってくれる非常に便利な機能です。
デフォルトだと、サブトピックは親トピックの番号を引き継ぎ表示されます。
サブトピックにも1から順番に番号を表示させたい場合は、
対象のサブトピックを選択した状態で、段落番号の深度を変更します。
トピックを囲む
複数のトピックをまとめたり、グループ化したい時は、囲み機能が便利です。
まず、囲みたいトピックを全て選択します。
左クリックしたままカーソルをスライドすることで、複数選択が可能です。
選択したら、上部のツールバーから「囲み」をクリック または「⌘＋B」を押します。
トピック同士を線で結びたい、関連性を示したい
例えば「AはBとリンクしています」など、トピック同士の関連性を示したいときには、関連機能を使います。
一つのトピックと囲みグループを関連させるこも可能です。
対象のトピックを選択した状態で、上部ツールバーから「関連」をクリック。
すると、トピックから点線が表示されます。
そのまま、繋げたいトピックor囲みグループをクリックします。
線の位置や形状、矢印の方向も変更ができます。
吹き出しを挿入する
トピックにたいして、注釈を表示したい場合に吹き出しを挿入できます。
対象のトピックを選択した状態で、上のメニューから「挿入 ＞ 吹き出し」をクリックします。
ダブルクリックで吹き出し内のテキストを変更できます。
もちろん、色や形状も変更が可能です！
プリントする際の設定方法
完成したサイトマップを印刷する事ができます。
「ファイル ＞ 印刷」をクリックします。
表示された「ページ設定」ウィンドウでプリントする際の様々な設定を行うことができます。
図はフッター部分に会社名を表記しています。
フッターテキスト入力部分の右下にあるハケのアイコンをクリックすると、フッターテキストの書式の設定が変更できます。
「次へ」をクリックすると、プリンタの設定ウィンドウが表示されます。
部数などを設定し、「プリント」をクリックします。
複数のページに分けてプリントする
コンテンツボリュームが多いサイトなどで、図のように縦長のサイトマップになることがあります。
これをそのまま1枚の用紙にプリントしてしまうと、全体がかなり小さくなってしまい、とても見づらくなってしまいます。
そんな時は、ページを複数に分けてプリントしましょう！
ページ設定ウィンドウで、ページ：「1ページ」→「複数ページ」に変更します。
「最適なページ効果」にチェックをいれます。
横は「1」に設定し、縦を見やすいページ数に変更します。
変更しながら、左のプレビューで確認が可能です。
フッターテキストを設定している場合、全てのページにフッターテキストが表示されます
おわりに
さて、今回はXMindを活用してサイトマップを作成する方法についてご紹介しました。
無料版でも便利な機能が充実しているため、作業効率がアップする事間違いなしです！
皆様も是非、利用してみてはいかがでしょうか。