今回は、Adobe XDで3D調の地球オブジェクトと「Paris」や「New York」などの都市名をリンクさせて、地球がリアルタイムで回転し該当部分にピン立てしてくれるアニメーションを作りました。
何かの参考にして頂けたらと思います。
XDで3D調の地球オブジェクトと都市名をリンクさせてピン立て
今回作成するアニメーションの完成系は以下の様な感じです。
「Paris」「New York」「Chinatown」のイメージ画像をクリックすると、その該当場所にピン立てしてくれるイメージのアニメーションです。
作り方を紹介します。
作り方
①まずはスマホデザインのアートボードを用意して、アプリ系の適当なデザインの上に円形ツールで正円をオブジェクトを中心に置きます。
②適当な世界地図をXDに配置して4回程複製して横に重ねて長い1枚にします。
③世界地図の画像グループに対して横スクロールの設定をします。そして①で作成した円形の下に重ねます
④横スクロール画像をクリップボード内に納めます。横スクロール画像と円形オブジェクトをシェイプでマスクをします。
⑤これで地球オブジェクトの完成です。地球に影と光を付けてリアリティを出したり、下部にあるイメージ画像を付けたら基本のデザインが完成です。
⑥最後にクリップボードを丸々複製して、各イメージ画像に対応した場所にピンをおいたデザインにします。それぞれをプロトタイプで繋げて完成です。
以上が「XDで3Dの地球オブジェクトと都市名をリンクさせてピン立て」でした。
最近流行のお弁当マップやなんちゃらマップなどのマップ連動型のローカルアプリなどで使えそうなUI/UXなのでぜひ覚えて活用してみて下さい。
