サイドスリーブログ

いまさら!XDはじめました


                いまさら!XDはじめました
こんにちは、きたむんです。
コロナ禍でインドア生活が続いていますが、自粛生活をした結果銭湯めぐりができないこと以外は今までとそこまで変化なかったです、かなしい。
そんなインドアデザイナー(しかもずぼら)が重い腰を上げ、ついに「Adobe XD」を活用しはじめました。
使ってみた感想などお伝えできればと思います。

Adobe XDってなに?

みんなにっこり
Adobe XDは、共同作業を促進するパワフルで使いやすいプラットフォーム。
webサイトやモバイルアプリ、音声インターフェイス、ゲームなどのデザイン制作をチーム全体でスムーズにおこなうことができます。(Adobe公式より抜粋)
いままでは、ディレクターはディレクターで、デザイナーはデザイナーで、それぞれ違うツールを活用していたものを、全員で使えるようなツールとして誕生した、という印象です。
さらにお客さまとも共有することで、リアルにサイトの完成図を確認でき、またチェックバックなどもXDに記載してもらうことで「あのチェックバックが書いてた資料、どこだっけ?」ということが軽減されそうです。

私が使って感じた、いいところ

まずはさわってみる、が大事

Adobe CCに入っていなくても。機能制限はあるものの無料でダウンロード可能

まずはさわってみたい!という方、まずは無料でお試し可能です。機能制限はあるのでフル機能とはいきませんが、よさを実感するには十分ではないでしょうか。

Adobe XDについて知る

やっぱりXD、100個作っても大丈夫!(保証しません)

データ軽い!アートボードいっぱい作っても軽々だよ!

今までphotoshopを使っていたのでこれはしみじみ実感しました。photoshopの重さはいわずもがな、ですが1枚のXDにアートボードを たくさん入れても、軽いです。逆にIllustratorやPhotoshopほど繊細かつ緻密な画像作り込みなどはできないので、うまく役割を使い分けていけるといいですね。
初心者は迷わない

アートボードはよく使われるサイズで作成可能

いままでだとよく検索していたキーワード「webデザイン サイズ」…。
デバイスの環境は常に変化しており作成サイズも都度変わってきている中で「どのサイズで作成しよう?」と悩むことも多かったのですがAdobeのデザインツールは よく使われるサイズがデフォルトで用意されています。私はPCなら1920pxか1366px幅、スマホは750pxを使用することが多いですが、スマホは375px幅で作る方が多い気がします。
画像の配置も楽々です

リピートグリッドで簡単配置、レイアウト爆速

ディレクターの方は、ワイヤーフレームを作るときに便利だと思うのがリピートグリッドです。
並べて配置したいパーツをリピートグリッドにして、あとはハンドルをドラッグして好きなように並べるだけ!各余白も設定できるので、レイアウト作成がとても楽です。
また、こちらは画像やテキストエディタなどでまとめたテキストを流し込むことで一気に配置もできるのでその分思いっきりデザインに注力できますね。
リピートグリッドの使い方
  1. 配置したいパーツを選択
  2. 右にあるプロパティインスペクター(編集パネル的なもの)で「リピートグリッド」を選択
  3. 右側と下側にある緑のハンドルをドラッグし、配置する
  4. パーツの間にカーソルを置くとピンクに変化するので、そこで各パーツの余白を調整可能!
会社でよく使うパーツは1つのファイルにまとめておくと使いやすいかも

繰り返し使うものはコンポーネント(部品)化

CMSやECサイトのテンプレートなど、ある程度レイアウトが決まっているものや、よく使うアイコン類などはコンポーネント化しておくことで、いろんな案件で使うことが可能です。
使い方はマスターコンポーネントだけを集めたデータを作り、それをアセットをリンクさせることで読み込むことが可能です。
コンポーネントを複製したインスタンス(※コンポーネントのコピーのこと)は、マスターとなるコンポーネントのスタイルを継承しますが、インスタント単位で変更することも可能です。
ちなみにインスタントで行った変更はマスターコンポーネントには影響しません。全てに反映したい変更はコンポーネント、案件オリジナルの変更はインスタンスと分けられるのもありがたいです。 私はECサイトのよく使うテンプレートをコンポーネントにしたデータを作成してみましたが、これがあるだけでかなり作業効率が上がった気もします。
また自分で作らなくても使える、とても素敵なワイヤーフレームUIキット「Wires jp」も見てるだけで勉強になります!
ちょこっとメモ
コンポーネントとインスタンスの見分け方は選択した際に左上の菱形が緑になっているかどうか。
緑のものはコンポーネント、緑の淵の白がインスタンスです!
余白のこと、忘れちゃってもいいんです

グループ化されているものはパディングの設定が可能!

パーツをグループ化(もしくはコンポーネント化)しておくと、その要素にパディングを設定することが可能です!
コンポーネントなどで、決まった余白を開ける必要がある場合設定しておくだけでかんたんにレイアウトできちゃいます!(インスタンスでは設定できません)
お客さまもイメージをつかみやすい

プロトタイプで、実際のサイトのイメージがつかみやすい!

プロトタイプで画面遷移のリンクを指定することで、プレビュー画面で実際のサイトの動きを体験することが可能です! ステートでホバーステートを活用すると、ホバー時の挙動も楽々作れちゃいますし、自動アニメーション機能などでスライドっぽい動きをさせることもできるので便利!
XDから探せます

プラグインも増えてきて、便利な機能がたくさん!

「こういう機能があればもっと楽に作業できそう!」という痒い所に手が届くようなプラグインもどんどんリリースされています! 個人的に入れてみて「おお!」と思ったのは下記プラグインです。
  • Google Sheets(CSVデータから情報を流し込める!)
  • Remove Decimal Numbers(いつのまにか小数点が入ってしまったオブジェクトデータを修正できる!)
  • Resize Artboard to Fit Content(アートボードを自動でサイズ合わせできる)
  • Split Rows(テキストボックスの文章を1行ずつに分解できます)
  • Stark(色のアクセシビリティチェックができます)
該当箇所にピン留めもできるので修正もしやすい

お客さまもわかりやすい!共有とレビュー

デザインが完成したら、お客さまや社内でチェックしてもらうにも便利です! プレビューにはいくつか種類があります。
  • デザインレビュー(デザイン時の確認の時に。修正箇所にコメントをピン止めできて便利)
  • 開発(コーディングをお願いするときに。カラーやスタイルなど把握・コピーできて便利)
  • プレゼンテーション(デザインを実際にどう見えるか把握したいときに)
  • ユーザーテスト(フルスクリーンで見たいときに)
  • カスタム(上記の各機能を組み合わせて使いたいときに)
パスワードも設定できるのでとても便利ですね。 デザインレビューで見てもらうことで、チェックバックを集約できてよさそうです。

おまけ:XD検定に挑戦!

まだまだ使えてない機能がたくさんありました
最近リリースされた「XD検定」にチャレンジしてみました!
結果は…初級は満点。中級はまだまだ使いこなせていない機能もあり厳しい結果に…
(これでも結果のキャプチャを取り損ねて何回目かのチャレンジです・苦笑)
今後、これを全部満点にしたいと思います!
ぜひ使ってみてくださいねー

その他の Web制作ネタ帳 ブログ一覧