Week2』のお話です。Challenge、3ヶ月に渡って毎月2つずつ課題がオープンされていきます。旅行サイト』の2つです。詳しくはこちらのAdobeブログをご覧ください。レストラン検索アプリWeek2の1つ目の課題はレストラン検索アプリです。『レストラン検索アプリのデザインにチャレンジしてみよう!』という内容です。自動アニメーション音声トリガーの3つ。音声トリガーで遊ぶの楽しいwちなみにXDが指定した内容をしゃべってくれる機能もあるんですが、こちらの声は男性の声が「たくみ」、女性の声が「みずき」という名前。Alexaの声と同じです。今回もどういう動きにするか迷って作っていたのもあるのでプレビューには含まれていないアートボードもあります。あとは同じデザインのアートボードでも音声の返しがあるのとないのでアートボードを分けていたり。ヘッダー、フッターのリンクは同じ動きになるので、その設定用のベースとなるアートボードも用意しています。共通パーツのリンクを全ページでつけるのはかなり大変な作業なので、まずプロトタイプモードでこのベースとなるアートボードからそれぞれのアートボードへリンクを設定し、それを他のアートボードにコピペしていくとペースト先のアートボードでもリンクが引き継がれます。ペースト先のアートボードにもともとある共通パーツは削除してからペーストしましょう。デザインモードでコピペしてもリンクは消えてしまうので、必ずプロトタイプでコピペしてください。コピペの際、コピー元のアートボードと同じ座標にペーストされるので、ペーストしたいアートボードをすべて選択してからペーストするとまとめて同じ位置にペーストすることができます。(フッターは位置の調整が必要になりますが、全ページにリンクを設定するより位置の調整のほうが簡単だと思います。)ちなみに、別のアートボードを用意している理由は、自分のアートボードへのリンクは設定できないため、例えばホームのアートボードからコピペしてもホームへのリンクが設定されていないものがペーストされてしまうので、それを防ぐためです。(このあたりはまた別の記事で詳しく書きます。)プレビューはこんな感じ(音声再生されないけど...)↓https://smile.mio-log.com/wp-content/uploads/2019/05/FindRestaurant-ja.mp4音声トリガーを試すときはスペースキーを押しながら話しかけます。こちらのプレビューから音声トリガーも試すことができます。旅行サイトWeek2の2つ目は旅行サイトのデザイン。『旅行サイトのデザインに挑戦してみよう!』という内容です。チャレンジするXDの機能は、マスクタイマートランジション自動アニメーションです。タイマートランジションは今のところアートボードに対してしか設定できないので注意しましょう。こちらのアートボードはこんな感じ↓ペーストボードに使う予定の写真を置いています。この状態からマスクで配置するには、写真を『コピー』⇒配置したいところで『アピアランスをペースト』でできます。配置後の写真の表示位置の調整もできます。写真の配置をやり直したいときは、アピアランスの『塗り』を変更すればマスク前の状態に戻せるので、もう一度配置し直すことができます。最初の写真が3枚並んでいる部分はコンポーネントを使っているので、マスターコンポーネントを置いておく用のアートボードも用意しています。マスターコンポーネントは左上に緑の『◆』がついています。マスターコンポーネントから複製したコンポーネントはそれぞれ個別で編集が可能ですが、マスターコンポーネントを変更すると複製したコンポーネントも変更が反映されます。すべてに反映されても問題のない変更なら問題ありませんが、意図しない変更をした場合に事故が起こりかねないので、マスターコンポーネントは通常のデザインとは別のアートボードかペーストボードに配置しておいたほうが安全です。旅行サイト最初の画面遷移のときに背景の白がなぜか濃くなる...。アピアランスで背景のぼかしを使っているのでそれが原因だとは思いますが、このへんはよくわかってませんwちゃんと調べておきます。ちなみに、1枚目の写真は自分で撮影した写真です。Week2のまとめでした。解説動画もあるので、見てみると参考になると思います。作った作品はハッシュタグ#AdobeXDと#ChallengeでTwitterで投稿されているので、他の方が作ったものを見てみるのも楽しいと思います。各課題には締切があるので投稿の期間が終わってしまっているものもありますが、XDの使い方やUI/UXの勉強にもなりますのでチャレンジしてみてはいかがでしょう?特にXDが気になってはいるけど使ったことがないという方にはオススメです。