デザイナーのCynthia Fong氏はプロトタイプで動的に変化するインタラクティブな画像を作成し、デザインをテストします。この短いチュートリアルでは、Adobe XDでモバイルアプリ用のアイデアを形にするFong氏の手法を紹介します。

Adobe Studioチームのデザイナー、Cynthia Fong氏は、あらゆるクリエイティブプロジェクトに情熱を注ぎ、人々を刺激する制作に取り組んでいます。

必要な情報

このサンプルファイルは、このチュートリアルの学習内容の練習に使用できるAdobe Stock素材です。このチュートリアル以外でサンプルファイルを使用する場合には、Adobe Stockのライセンスを購入してください。このサンプルファイルの使用に適用される利用条件については、フォルダー内のReadMeファイルを参照してください。 

アートボードをダブルに

Larson氏は、2つ目のアートボードを複製することから作業を開始します。アートボード名をクリックして、Alt(Windows)またはOption(macOS)キーを押しながらアートボードを右側にドラッグします。

アイスクリームのモバイルアプリデザイン用3つのアートボード1スクープと3スクープのアイスクリームコーン、1つ目にタイトル、2つ目と3つ目に金額を表示

追加と削除

Adobe XDのアートボード間でオブジェクトをアニメーション化するには、レイヤー名が一致している必要があります。アートボードを複製すると、レイヤー名を維持して複製されます。2つ目のアートボードから上のアイスを削除し、アイスクリームコーンを上に移動します。次に、新しいScoops - 2用に文字と金額を更新します。

2つのアートボードを表示するUXデザイン、レイヤー名パネルのコールアウト、右側のアートボードは2スクープのアイスクリームコーン

さらに追加

プロトタイプは最終的に5つのアートボードになります。前の手順と同様にアートボードを複製していきます。複製したアートボードから2つ目のアイスを削除してコーンを上に移動し、文字と金額を更新します。さらにこのアートボードを複製して、最後のアートボードから文字を削除します。

モバイルアプリ用3つのアートボードデザイン、1つ目は2つ、2つ目と3つ目は1つのアイスクリーム、3つ目は価格と文字なし

コンポーネントを含むデザイン

アセットパネルのコンポーネントセクションには再利用可能な要素があり、このアプリデザインでいつでも使用できます。注文を促すコピーテキストとボタンのグラフィックスを最後のアートボードにドラッグします。

Adobe XDコンポーネントパネル、アイスが1つのアートボード、アートボード上に緑の枠でハイライトされた注文を促すコピーテキストとボタンのグラフィックス

インタラクションをアニメーション化

プロトタイプモードに切り替えて、インタラクションを定義します。最初のアートボードをクリックして、ワイヤーを2つ目のアートボードにドラッグします。次に、トリガーを「タップ」に、アクションを「自動アニメーション」に設定します。XDではアニメーション設定が保持されるため、効率的に繰り返し同じ設定を適用できます。各アートボードから次のアートボードにワイヤーをドラッグし、最初のアートボードに戻します。最後に、デスクトッププレビューでインタラクションをテストします。

青いワイヤーがインタラクティブプロトタイプの各アートボードを接続、5つのアートボードとインタラクション設定のダイアログ

楽しくトッピング

モバイルアプリ用に楽しいインタラクティブアニメーションをデザインしましょう。

スマートフォンを持つ手のクローズアップ、Adobe XDで作成したアプリデザインのモックアップを表示したプレースホルダー画像

注意:このチュートリアル付属のプロジェクトファイルは練習目的でのみご利用ください。

01/28/2020

アーティスト:Cynthia Fong

Adobe Stock提供元:Subbotina Annapamela_d_mcadamsrawpixel

このページは役に立ちましたか。