AdobeXDでページの管理ができるぞ

複数のデザインのパターンを持つサービスを運用する上で、どこにどんなページがあるかを管理する方法です。

目次
1. そもそもどういう使い方か
2. ダミーのプロトタイプデータ
3. 使い方とメリット
4. おまけ

1. そもそもどういう使い方か

私の携わっているサービスは、同じサービスなんだけど全然テイストが違う……ということがよくあります。SEOで上がるのを狙う、広告出稿でユーザーを集めるなどチャネルによって結構変わるんです。

すると何が起きるか。「あれ？どのチャネル用ページであのコンポーネント使ってるんだっけ？」みたいな混乱です。

この状況を打破するために作ったプロトタイプのダミーをお見せします。（さすがに現物はお見せできないのでダミーを作りました😓）

2. ダミーのプロトタイプデータ

こちらがそのプロトタイプです。実際にアクセスして触ってみてください。（ちょっと録画が上手く行かなくて一部画面がおかしくなってしまいました……）

3. 使い方とメリット

左側のナビゲーションのようなエリアにデバイスとチャネルの組み合わせでリンクボタンを作っています。それを押すと右側のエリアに各ページが描画されて操作や確認が出来るというものです。

あっちこっちURLを開いたりしなくても確認できるし、1箇所にアクセスすれば全てを見ることができます。

XDのオーバーレイとトランジションを組み合わせるとこういう動きが出来るようになります。便利ですね〜。

4. おまけ

ここから先はnoteを購入頂いた方限定です。今回作ったプロトタイプの実データへのリンクを貼ってあります。コンテンツ自体はここで完全に終わっていますので、データは特に要らないという方は購入の必要はありません。

最後まで読んでいただいてありがとうございました！