XDUFes2020「今日から使えるAdobe XD Tips集」

えび🍤

2020年9月30日 10:32

今回の記事は先日のXDUFes2020で登壇させて頂いた内容を文字起こししたものになります。
オンラインの勉強会だったので、アーカイブも公開予定です。公開され次第更新します。

是非、YouTubeのチャンネルを登録してお待ちください。

早速、発表の内容に入ります！

その1 Webデザインだけじゃないスライド作成にも使える!

Adobe XDといえば、Webデザインやアプリデザインなどのイメージが強いかと思います。
しかし、実はスライド作成にも向いています！今回、制作したスライドもAdobe XDで作っています。

なぜ、Adobe XDがスライド作成に向いているのでしょうか？
Adobe XDにはプロトタイプ機能という、Webサイトデザインにページ遷移などの動きを付けることができる機能です。

これを応用することで、ページ遷移＝スライドのページめくり、のように使えます。

プロトタイプ機能の中でも「自動アニメーション」は、簡単にアニメーションを作成できる便利な機能です！

実際に、自動アニメーションでアニメーションを作ってみましょう！
まずデザインモードで2枚のアートボードを用意します。それぞれ、「アニメーションの開始時点」「アニメーションの終了時点」のデザインを用意しました。

次にプロトタイプモードに移り、アートボードをリンクさせます。
この時に、プロパティパネルからアクションを「自動アニメーション」に設定します。

たったこれだけの操作で上から下に移動するアニメーションが作成できました。
アニメーション付きのリッチなスライドも、この「自動アニメーション」があればお手軽に作成できますね！

スライドを作ったら次は共有をしないといけないですよね？
スライドの共有にもXDの「リンク共有」機能が活躍します！

リンク共有は本来、デザインやプロトタイプをクライアントやエンジニアと共有しブラッシュアップするための機能ですが、スライドの共有にも使えます。

その2 共有リンクのHTMLタグ埋め込み

デザインの変更を行う場合には、Adobe XDで変更後「リンクを更新」ボタンをクリックするだけで、変更が反映されます。

その3 Adobe XDのスマホアプリ

ほぼラグが分からないくらいのリアルタイムでスマホに変更が確認できます。
PCだけでデザインを行って、いざスマホの実装を確認してみるとイメージと違ったということが、よくあると思います。しかし、実装後に修正を行うのは効率が悪いです。
スマホ実機での表示を確認しながら、デザインを行えばそのようなイメージのズレは起きないでしょう。