Adobe XDをもっと使いこなすヒント! 第32回 マスクを使った便利な表現

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、マスクの便利な使い方に関する7つのツイートを取り上げます。

Tip 1. シェイプでオブジェクトをマスクする

XDでは任意のシェイプをマスクとして使うことができます。上のビデオのように、ビットマップ画像の上にシェイプを移動して、シェイプと下の画像を選択した状態で、macOSの場合はオブジェクトメニューから、Windowsの場合はコンテキストメニューから、「シェイプでマスク」を選択します。ショートカットキーは、Shift+Cmd+M (Mac)、もしくは Shift+Ctrl+M (Win) です。

ベクターのシェイプもマスクすることが可能です。操作方法はビットマップ画像のときと同じです。選択されたシェイプの中で、重なりの一番上にあるシェイプがマスクとして使用されます。実際の動作は上のビデオをご覧ください。

なお、マスクの解除はグループ解除と同じ操作です。ショートカットキーは、Shift+Cmd+G (Mac)、もしくは Shift+Ctrl+G (Win) です。

Tip 2. マスクしたオブジェクトを編集する

マスクしたオブジェクトの扱いは、基本的にグループと同じです。マスクをダブルクリックすると、マスクされているオブジェクトを自由に扱えるようになります。他にもは、Cmd (Mac) か Ctrl (Win) キーを押しながらクリックしても編集モードに移行できます。

編集が終わったら、Escキーを押下すれば、編集モードから抜けられます。

ビットマップ画像をマスクした時も扱いは同様です。ショートカットキーかダブルクリックで編集モードに入り、表示される場所を変更することが可能です。

XDでは、シェイプに画像をドラッグして背景として配置することができます。この場合も、実際にはマスクした画像と同様の扱いです。そのため、上のビデオのように編集モードに入り、表示位置など調整することができます。

Tip 3. プロトタイプでクリック可能な領域を大きくする

プロトタイプでクリック可能な領域を指定するときは、指定対象のオブジェクトのサイズが、クリックできる領域になります。もっと大きなクリックエリアが欲しい!というときは、上のビデオのように、対象のオブジェクトよりも大きなシェイプをつくってマスクすれば、マスクの領域全体がクリック可能になります。

Tip 4. マスクしたオブジェクトをアニメーションさせる

マスクしたオブジェクトをアニメーションさせることが可能です。例えば、上のビデオのように、2つのアートボード間でマスクしたオブジェクトの位置を変えると、マスクした画像がスクロールするアニメーションが生成されます。


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2019.04.11

Products Featured

  • Adobe XD

Tags

タグはありません