XDで3Dの地球オブジェクトと都市名をリンクさせてピン立て

WEB

今回は、Adobe XDで3D調の地球オブジェクトと「Paris」や「New York」などの都市名をリンクさせて、地球がリアルタイムで回転し該当部分にピン立てしてくれるアニメーションを作りました。

何かの参考にして頂けたらと思います。

XDで3D調の地球オブジェクトと都市名をリンクさせてピン立て

今回作成するアニメーションの完成系は以下の様な感じです。
「Paris」「New York」「Chinatown」のイメージ画像をクリックすると、その該当場所にピン立てしてくれるイメージのアニメーションです。

作り方を紹介します。

作り方

①まずはスマホデザインのアートボードを用意して、アプリ系の適当なデザインの上に円形ツールで正円をオブジェクトを中心に置きます。

②適当な世界地図をXDに配置して4回程複製して横に重ねて長い1枚にします。

③世界地図の画像グループに対して横スクロールの設定をします。そして①で作成した円形の下に重ねます

④横スクロール画像をクリップボード内に納めます。横スクロール画像と円形オブジェクトをシェイプでマスクをします。

⑤これで地球オブジェクトの完成です。地球に影と光を付けてリアリティを出したり、下部にあるイメージ画像を付けたら基本のデザインが完成です。

⑥最後にクリップボードを丸々複製して、各イメージ画像に対応した場所にピンをおいたデザインにします。それぞれをプロトタイプで繋げて完成です。


以上が「XDで3Dの地球オブジェクトと都市名をリンクさせてピン立て」でした。

最近流行のお弁当マップやなんちゃらマップなどのマップ連動型のローカルアプリなどで使えそうなUI/UXなのでぜひ覚えて活用してみて下さい。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

WEB
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました