最近、私はAdobe XDでWEBサイトのサイトマップを作成する事が多いです。
今までExcelやテキストエディタでテキストベースでサクッと作っていました、XDを活用する事でより繋がりが視覚的に分かり易くなり、導線のイメージが沸き易く良いなと感じています。
WEB制作、ブログサイト運営など複雑な導線を整理する際に、今回紹介するサイトマップ作成法を参考にして見て下さい。
XDで作ったサイトマップ
以下のGIF動画は今回作成したサイトマップです。
XDで作成するメリットは超シンプルに仕上げる事が出来る点です。
上記の様にマウスをホバーした時だけ細かな導線が表示されるのでごちゃごちゃした感じを無くす事が出来ます。
以下のダウンロードボタンでは上記GIFのXDデータが入っています。ご自由にダウンロードして下さい。
XDでのサイトマップの作り方
今回の作成方法はコンポーネントのステートの切り替えのみという非常にシンプルな作り方をしています。
①まずは以下の様なデザインを四角形ツールと手書きツールだけで作成していきます。
②下階層部分と線を全てグループ化します。（①）
その後にそのグループと親階層となる部分をグループ化します（②）
③そのグループを丸々コンポーネント化します。そしてステートを一つ追加します。
④そしたら、初期設定のステートを選択した状態で下階層となる部分のグループを選択してグループ毎透明化します。値としては0%にします。（完全に消えるまで）
⑤すると③で追加したステートでも透明になってしまうので、この部分は100%の値に戻します。
ここまでの流れで1つの導線が完成です。残りはこれを複製して、テキストを変えていけばサイトマップの出来上がりです。
以上が「XDでサイトマップを作成するのが便利で分かり易い」でした。
サイトマップはサイト設計の中でかなり重要な役割を果たします。それなのに結構雑にやりがちな部分でもあります。
今回紹介した方法は、そんなに大変な作業じゃ無いのに非常に見やすいものになるので、是非活用して見て下さい。
