blog
ブログ

これだけ覚えればあなたもxdマスター!?

こんにちは、デザイナーの角谷です。
今年も残り1ヶ月を切り、日ごとに寒さも増してきましたね。
愛猫のたらちゃんが、寝る時間になると布団に潜り込んでくるのでずっと冬ならいいのにと思ってしまいます。

前回のブログ「XDの使い方勉強会を社内で開催しました!」では、デザイナーはもちろん、ディレクターにもつかいやすい機能を紹介した社内勉強会の様子をブログにまとめました。

今回はその中で紹介しきれなかった、xdの使い方についてまとめてみました。
この機能を知っているだけでも「xd使ってよかった!」と思えるかもしれません…!
かわいいたらちゃんとともにお届けします🐱🐱🐱

  1. 画像の配置
  2. リピートグリッド
  3. コンポーネント

 

1.まずは画像の配置

画像配置の方法は大きく2つあります。

①画像を直接ドラッグ&ドロップで読み込む方法

ファイルから配置したい画像を選んで直接アートボードにドラッグ&ドロップ!
あとはサイズを調整するのみ。

②四角や円などのオブジェクトを作成してマスクする方法

必要なオブジェクトを作成し、そのオブジェクトめがけて配置したい画像を
ドラッグ&ドロップ!トリミングも自由自在です。

また、オブジェクトと配置したい画像をアートボードに重ねて配置し
「シェイプでマスク」を選択して切り抜く方法もあります。

2.次にリピートグリット

xdの代表的な機能の1つ「リピートグリッド」。
規則性のあるレイアウトを必要とする場合に便利です。

対象の画像とテキストのグループをまとめて選択し、xd画面右上の「リピートグリッドボタン」をクリック。
リピートしたい方向(右または下方向)につまみを引っ張って作成。
写真とたらちゃんテキストが繰り返されましたね。かわいい。

また、規則性のある写真とテキストのコンテンツを一括で変えたい時ってありますよね。
そんな時、リピートグリッドと画像配置を組み合わせて使うととっても便利です。

変更したい画像を複数選び、ドラッグ&ドロップ!で一括画像置換。
テキストは改行して入力したテキストファイルを事前に準備しておき、
テキストエリアにドラッグ&ドロップ!で一括テキスト置換。

3.最後にコンポーネント


Webサイト内で何度も使用する要素をパーツ化し管理しやすくする機能です。
複数ページで同じパーツを使っていると、一部修正が入った時に全てを変えていくのは大変ですが、
パーツ化しておけばサクッと修正ができて便利です。
コンポーネントを制すれば、作業効率格段にアップすること間違いなしです!


パーツ化したい画像とテキストグループを選択して右上のコンポーネント「+」で作成する。
コンポーネントしたパーツをリピートグリッドで複製する。
サイズの変更などあれば必要に応じて大元のコンポーネントを編集。(上記のgif画像でいうと一番左のたらちゃん)
複製したコンテンツも同時に変更できる!
*コンポーネント化すると画像やテキストの一括置換はできなくなるみたいです

まとめ


今回ご紹介した機能はとても簡単な活用方法でしたが、初めて触った時は、
自分やってる感が出て「おおー!」っとなりました!やる気の原動力ですね。

xdの他にも、似たようなツールとして「Figma」「Sketch」などあるみたいですが、
弊社では他部署との連携のしやすさも加味しxdを使うようになりました。
xdのいろいろな機能を駆使することでxdも自分の可能性も最大限に引き出せると思います。

以上、愛猫たらちゃんとともにお届けしたxdの機能説明でした🐱🐱🐱

自社のサービスや商品をより売り上げアップさせたい方へネット集客を学ぶ無料メルマガ配信中自社のサービスや商品をより売り上げアップさせたい方へネット集客を学ぶ無料メルマガ配信中

facebookでも情報を発信しています

facebookをフォロー
ブログ一覧に戻る