はじめに
Xdの強みといえばUIがシンプルで直感的に使いやすいという点が挙げられます。
特にチュートリアルを見なくてもできるというのは、初心者にとってはうれしいでしょう。
しかし、逆にベテランになってくると今までPsやAiで行えていたことができず、少々モヤモヤしてしまう経験もあるのではないでしょうか？
ですが、Xdはプラグインを入れることで強化できます。
そこで今回は、デザインを行う上で重要な色関連のおすすめXdプラグインを紹介いたします。
【色のオールインワンプラグイン】Colorsinspo
色を扱うXdプラグインは様々な種類がありますが、これさえあれば他はいらないのではないかと思わせるほどの多機能プラグイン。
また、Xdだけでなく、PhotoshopやIllustratorなどでもプラグインの開発を進めているそうなので、リリースが楽しみです。
ちなみにプラグインだけでなく、Webツールとしても公開されているので、他のツールで使用したいときでも使えるのはうれしい。
Colorsinspo-色に関するすべてを見つけるためのオールインワンリソース| Colorsinspo
https://colorsinspo.com/
機能は下記の10種類があります。
カラーパレットを表示してくれる機能。
ベースの色を指定することもできるため、目的のカラーパレットが探しやすいです。
そして、目玉の機能は、Xdのカラーアセットへカラーパレットをまとめて登録できる機能。
カラーパレットを表示してくれるWebサイトツールはたくさんありますが、わざわざコピペしてアセットを登録する必要がありました。しかし、この機能のおかげでコピペして持ってくる手間がなくなり面倒な作業から解放されるのです。素晴らしい。
色のコントラスト比を調べて文字の視認性を数値で判定してくれる機能。
淡い色を使った表現や同系色でまとめたりするときに客観的に判定してくれるため、クライアントチェックの際に文字読めないと言われる心配が減ります。
ランダムでいい感じのカラーパレットを用意してくれる機能。
インスピレーションがわかなかったときに役立ちそうです。
既存のアートボードを色盲の方が見ているような配色にして複製する機能。
色盲というのはあまり一般的に感じないかもしれませんが、実は男性では20人に1人が 色盲を患っていると言われています。
先天色覚異常は、不変的なものであり本邦では男性の約５％（20 人に 1人）女性 の約 0.2％（500 人に 1人）の割合でみられる。
引用元：「色覚異常について」 – 神奈川県医師会 – 日本医師会
自身では判断がつきにくいので、こういうツールがあると安心ですね。
指定した色を基に、配色の類似色やトライアドなどのルールでカラーパレットを生成する機能。
また、カラーパレットがまとめて表示されるため、そのまま使わなかったとしても、どの配色ルールが良さそうか事前に検討するといった用途にも使えるのは便利。
有名企業のブランドカラーを見れる機能。
もちろん検索機能にも対応しているため、すぐに目的の配色が確認できてありがたい。
単色カラーやグラデーションをランダムに生成する機能。
完全にランダムなので仕事だとあまり使う機会がないかも。
配色の練習でランダムに出てきた色をベースにデザインを行うといった用途で使うと面白いかもしれません。
指定した2色でグラデーションする間の色を指定したステップで単色の塗りとして生成する機能。
イラレのブレンドツールに似た機能ですが、色を取得したいだけであれば、こちらの方がお手軽なのでおすすめ。
様々なデザインやイラストで使用されているカラーパレットコレクションを見れる機能。
また、こちらの機能は他とは異なり、コピーボタンでコピーした後、ペーストを行いXd内にSVGオブジェクトとして配置するという機能になっています。
特定のカラーライブラリを表示してくれる機能。
こちらも「 Palette Collection 」と同様にXd内にペーストする仕様。
数も多いため、規模の大きいUIの配色ルール作成で非常に参考になります。
【塗りと線を入れ替え】Swap Fill and Border
https://adobe.com/go/xd_plugins_discover_plugin?pluginId=eddfdae4
ショートカットcommand ＋ shift ＋ Xでオブジェクトの塗りと線を入れ替えるプラグイン。
シンプルですが、標準になぜないのかと思うほど便利な機能です。
【作成したグラデーションを編集】Complex Gradients
「 Complex Gradients 」はグラデーション機能を強化できるプラグイン。
オブジェクトにグラデーションを適用後にこのプラグインを使用することで、様々な変化を付けることができます。
グラデーションを指定した数でリピートしてくれます。
グラデーションをべた塗りに分割し、ストライプにしてくれます。
また、もし3色以上あった場合も分割可能。何気に便利な機能です。
グラデーションをランダムで生成する機能。
本当にランダムなので使う機会は少ないかも。
グラデーションを反転してくれます。
地味ですが、 「 Complex Gradients 」 の中では一番使うことが多いです。
こういう単純なものほど使い時多いんですよね。
【線形グラデの角度を確認・指定】GradientAngle
Xdの標準機能でグラデーションの角度を確認しようとした場合、「開発用に共有」という機能を使わねばならず少し手間がかかります。
しかし、「 GradientAngle 」を使用すると簡単に角度を確認でき、さらに数値による指定まで行えるようになります。
この指定できるというのがかなり良い。
Xdの線形グラデーションは直感的に行える反面、PsやAiでは当たり前にできる正確な角度で指定したい場合に難しくなってしまいますが、このプラグインのおかげでそのデメリットからも解放されます。
詳しくは下記をご覧ください。
【解決】XDで線形グラデの角度を確認・指定したい！
https://sttk3.com/blog/tips/xd/gradient-angle.html
コメント
コメント一覧 （1件）
[…] 【Xdの配色機能を強化】色関連のおすすめXdプラグインまとめ – Umemo […]