XDでサイトマップを作成するのが便利で分かり易い

WEB

最近、私はAdobe XDでWEBサイトのサイトマップを作成する事が多いです。

今までExcelやテキストエディタでテキストベースでサクッと作っていました、XDを活用する事でより繋がりが視覚的に分かり易くなり、導線のイメージが沸き易く良いなと感じています。

WEB制作、ブログサイト運営など複雑な導線を整理する際に、今回紹介するサイトマップ作成法を参考にして見て下さい。

XDで作ったサイトマップ

以下のGIF動画は今回作成したサイトマップです。

XDで作成するメリットは超シンプルに仕上げる事が出来る点です。
上記の様にマウスをホバーした時だけ細かな導線が表示されるのでごちゃごちゃした感じを無くす事が出来ます。

以下のダウンロードボタンでは上記GIFのXDデータが入っています。ご自由にダウンロードして下さい。

XDでのサイトマップの作り方

今回の作成方法はコンポーネントのステートの切り替えのみという非常にシンプルな作り方をしています。

①まずは以下の様なデザインを四角形ツールと手書きツールだけで作成していきます。

②下階層部分と線を全てグループ化します。(①)
その後にそのグループと親階層となる部分をグループ化します(②)

③そのグループを丸々コンポーネント化します。そしてステートを一つ追加します。

④そしたら、初期設定のステートを選択した状態で下階層となる部分のグループを選択してグループ毎透明化します。値としては0%にします。(完全に消えるまで)

⑤すると③で追加したステートでも透明になってしまうので、この部分は100%の値に戻します。
ここまでの流れで1つの導線が完成です。残りはこれを複製して、テキストを変えていけばサイトマップの出来上がりです。


以上が「XDでサイトマップを作成するのが便利で分かり易い」でした。

サイトマップはサイト設計の中でかなり重要な役割を果たします。それなのに結構雑にやりがちな部分でもあります。
今回紹介した方法は、そんなに大変な作業じゃ無いのに非常に見やすいものになるので、是非活用して見て下さい。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

WEB
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました