画面遷移図つくるのって、結構大変ですよね
階層が深い時は特に、「あそこからここ行って⋯⋯ここからあそこ行って⋯⋯で、これはモーダルで出して⋯⋯リクエストのたびにモーダルは出ちゃってよくて⋯⋯」などなど、自分でやってても動線をひとつ忘れてしまったり⋯⋯なかなかにひと手間ですよね。
一番悲しい＆危険なのは、一生懸命作ったつもりでも、伝えるべき人にうまく伝えられなかった時です⋯⋯(´；ω；｀)
理解してもらえてないと、伝えてないのと同じ事態につながりかねないので、最低限のことはやはりちゃんとシェアしなければ、と思います。
エクセルベースで作っていた頃は⋯⋯
「Adobe XDってのは、カンプやワイヤーを引くのにphotoshopよりも便利らしいよ」
ってなお話を聞いたのは、2年くらい前でしょうか⋯⋯
以前、自分にしてはちょっと大きめの画面遷移図を作る機会があり、エクセルベースで作っていたのですが
「あー、キャプチャいっぱい撮って、一個ずつ矢印でくっ付けるなんて面倒だし、一目でわかるサイズに収まらないから、見させられる方も分かりにくいんじゃないかなー⋯⋯」
などと思っていました。
「XD、いっちょやってみっか（某戦闘民族サイヤ人風）」と思って、Adobe公式チュートリアルを漁ってみたところ、以下のような素敵なアイテムであることを学びました！
ディレクターがワイヤー引く時にXDが便利な理由
- ターゲットデバイスからワイヤーフレームを引ける
- ファーストビューはここまで、のように、実際の表示状況を想像しやすい
- 画面遷移の全体像を把握しやすい
- 遷移の階層が深くても、アートボードを増やしてインタラクションを設定するだけでOK
- インタラクティブな要素もブラウザで確認できる
- スライダーやアコーディオンメニューなど、アニメーションのイメージもしやすい
- クライアント向け、エンジニア向けにファイルを共有する機能が便利
- ブラウザ上でファイルを共有するURLを発行できる
- 使い勝手はほぼ Photoshop なので馴染みやすい
ブラウザ上でボタンをクリックしてみて「あ、こんな感じでこっちへ遷移するのね、おけ！」のような具合でシェアできるのは、言葉で説明するよりずっと具体的でイメージしやすいですね！
というわけで、自分でも作ってみました！
架空のECサイトの画面遷移図を想定して作ってみました。
階層としては、
- グランドトップページ
- 商品詳細ページ
- 販促企画一覧ページ
- カテゴリ一覧ページ
- よくある質問一覧ページ
のようなイメージです。
また、グランドトップページに持たせる機能として、
- スティッキーヘッダー
- PCでは、ホームボタンとサインインページへのリンクを設置
- SPでは、ホームボタン、サインイン、キーワード検索、カテゴリ検索を設置
- チャットボットを画面下部に常時表示
を想定してみました！
※文字にすると、なんか「あたしちゃんと考えて作ってますから」感を全面に出していやがるように見えますが⋯⋯何せXDデビュー作なので、暖かい目でご覧いただければ幸いです⋯⋯(๑´ڡ`๑)てへぺロ♡
具体的な機能についての覚書はこちら
※GoogleDriveに格納したパワーポイントの資料にリンクしています
こんな便利なXD、使わない手はないですね！ 実際の業務でも活かせるように、練習を積んでおきたいと思います！