Adobe XDには、サイトの動きを伝えるのに便利な機能が備わっています。以前にこちらのブログでもAdobe XDについてご紹介しました。
今回はAdobe XD入門編として、簡単ですがwebサイトでもよく使われている、ページ遷移とボタンのホバーの動きを再現してみましたのでご紹介いたします。
これからAdobe XDを使う方や、まだどのようなソフトかよくわかっていない方にも、このような工程で動きが再現できるというのを知って頂ければと思います。
ページ間の遷移
今までページ遷移を他の方に伝える際に、別途何か指示書に記入したりと、手間がかかることが多かったと思いますが、XDでは画面上ですべて完結できます。
ページの遷移を設定しておくと、他の方がページの確認を行う際にも、簡単でわかりやすく、実際の操作と同じような感覚で確認できるので大変便利です。
設定方法
プロトタイプの項目から、ページ遷移する時にクリックしたいオブジェクトを選択すると、青色の丸い矢印が出てくるので、そちらをクリックすると、青色のコネクタが表示されます。
コネクタを移動したいアートボードにドラッグ、もしくは、右パネルの「移動先」の項目から移動したいアートボード名を選択すると、オブジェクトとアートボードがコネクタで結ばれます。これでオブジェクトとアートボードの連結ができました。
プレビューでチェックしていただくと、先程指定したオブジェクトをクリックすることで、別のアートボードへ移動するようになります。
これで実際にページ遷移をしているかのように見せる事が出来ます。
ページ内の遷移も再現できる
ランディングページなど縦長デザインのwebサイトを制作する際に必須なのが、ページ内遷移ですよね。もちろん、こちらもXDでは再現可能です。
先程と同じ工程ですが、移動したいアートボードではなく、同じアートボード内の移動先のレイヤーを選択することで、ページ内遷移が可能です。
このように指定したオブジェクトをクリックすると、スライドして目標の場所へ移動してくれます。
ボタンのホバー
リンクの場所やサイト内の動きを出すのに、ホバーでボタンなどに動きを付けることがあると思います。こちらもXDでは再現が可能です。イメージを伝えるための手段として使うのに向いています。
設定方法
デザインの項目で作業を行います。ホバーしたいオブジェクトを選択した状態で、右パネルの「コンポーネント」の横のプラスをクリックしてください。
「初期設定のステート」の表示が現れますので、隣のプラスをクリックします。「新規ステート」と「ホバーステート」が選べるので、今回は「ホバーステート」を選択してください。
「ホバーステート」を選択した状態で、オブジェクトをホバーした際のデザインにします。これで初期値のデザインとホバー時のデザインが用意できました。
「ホバーステート」を選択した状態のままだと、プレビューで見た際に、ホバーが実行されないので、「初期設定ステート」に戻してから、プレビューで確認してください。マウスオーバーした際に先程指定した「ホバーステート」のデザインに切り替わります。
これでボタンのホバーは完成です。
ボタンのホバーの動きは完成しましたが、さらにボタンをクリックしてページ遷移も再現可能です。
こちらは、プロトタイプの右パネルにある「インタラクション」の右にあるプラスをクリックすると新たな動きを追加できます。さらに「トリガー」の箇所を「タップ」に指定します。
「移動先」から移動したいアートボードを指定すると、コネクタがアートボードと連結されて設定は完了です。
ボタンにマウスのカーソルを合わせてホバー状態に変化し、クリックするとページへ飛ぶという動きになります。
追求できるアクション
ここまで簡単に、ページ遷移とボタンのホバーの再現をご紹介いたしました。実際に思うような動きに設定するには「プロトタイプ」の右パネルにある「インタラクション」や「アクション」の箇所で細かく設定を進めていきます。
こちらのそれぞれの動作などはまたご説明できたらと思います。
仕事をスムーズに進めてくれるAdobe XD
今までAdobeのソフトを使ったことが無い方や、デザインの知識が無い方でも、ＸＤは視覚的な操作がメインなのである程度感覚で進められます。
例えば、webディレクターの方がワイヤーフレームを制作したときに、このボタンをクリックしたら、このページに飛びたい、という動きも実際に画面を操作しながら相手に伝える事が出来ます。
デザイナーの方も、コーディングの知識が無くても、このような動きにしたい、という事をわかりやすく視覚的に伝える事が出来ます。
Adobe XDは操作性だけでなく、仕事をする上でのコミュニケーションもスムーズに進められる、とても利便性の高いソフトだと私は思います。
さらに、Adobe XDは定期的に機能の追加やアップデートも多いので、さらに便利になっていくことでしょう。機能が増えると便利になる半面、その都度に覚えることも増えるので大変ですが、いろいろ試す事が出来て楽しみです。
