今回はAdobe XDで音楽サイト風の3Dギャラリーを作成してみました。
最近流行っているUI/UXなので基本となる考え方とデザイン表現の見本になって頂ければ幸いです。
最後に動画でも説明してますので文章だと分かり辛いて方はそちらをご覧下さい。
3Dギャラリーの作成（ミュージックアプリ風）
今回作成する3Dギャラリーの完成品は以下です。
image画像のリストから画像をクリックすると3Dギャラリーが展開し、そのギャラリーのimage画像をクリックすると詳細ページに遷移します。
作成の仕方
①まずは四角形ツールで適当な場所に正方形を作成して、オブジェクトをダブルクリックします。すると線の編集が出来るので、立体感を出すために角度を調整して台形に変形させます。この時にShift＋十字キーで等間隔で角度を変えれます。
②先ほどの四角形オブジェクトに画像を挿入します。そして下記の様に画像上部に黒いオブジェクを配置します。その黒オブジェクトを「オブジェクトのぼかし」から20%程度ぼかしを入れときます。
③先ほどの影付きの画像を複製してそれぞれ任意の画像に差し替えます。複製した全ての画像をグループ化して縦スクロール効果を付けます。
④ここまで出来たアートボードをまるっと複製します。そして2番目以降の画像を上に詰めていきます。
（この設定が最終的にクリック後に3Dに展開する動きとなります。）
*この時に全てグループ化されているのでグループ内での操作になります。グループを外すと最終的に動作しなくなるので注意
⑤全ての画像を完全に透明化します。（薄ら残っていても大丈夫）
⑥5で作成したアートボードを複製します。真ん中のアートボードの画像は中央に配置します。右側のアートボードの画像は左上あたりに配置します。
真ん中のボードは3Dの動きを実現するためのデザインです。右のボードはリスト一覧ページです。
⑦同じ要領で好きなデザインを作成していきます。今回は下記の様な感じにします。
⑧最後に、これら全てをプロトタイプで繋ぎます。プロトタイプの詳細設定は次です。
▼プロトタイプの詳細設定
トリガー：タップ
アクション：自動アニメーション
イージング：無し
デュレーション：0.1秒
トリガー：時間
ディレイ：0秒
アクション：自動アニメーション
イージング：イーズイン/アウト
デュレーション：0.1秒
トリガー：タップ
アクション：自動アニメーション
イージング：イーズイン/アウト
デュレーション：0.6秒
トリガー：時間
アクション：自動アニメーション
イージング：イーズイン/アウト
デュレーション：0.1秒
プロトタイプを繋いだら完成です。
しっかりと動くかプレビューで確認してみましょう。
以上が「XDで超簡単に3Dギャラリーを作成（ミュージックアプリ風）」でした。
アプリのUI/UXで使えるとお洒落感があって覚える価値はあると思います。
もう少しデザインを凝ったものにすれば最近流行りの3Dエフェクト付きのギャラリーが出来ます。
