Adobe XDの新しいスタイリングツール:シャドウ(内側)、パスのアウトライン化、円錐形グラデーション

このたびのアップデートでは、シャドウ(内側)パスのアウトライン化機能、円錐形グラデーション、Presentation for Adobe XDプラグインなど皆さんが待ち望んでいた機能やサポートが追加されました。

By Keisuke Todoroki

Posted on 06-08-2021

今回も、皆さんが待ち望んでいた機能を搭載しました。本日、美しく、より複雑なデザインを作成し、UIデザインの新しいトレンドを取り入れるのに役立つ、新しいスタイリングツールをいくつかリリースしました。

この記事でご紹介する新ツールを利用するには、Adobe Creative Cloudデスクトップアプリを経由してXDの最新バージョンにアップデートする必要があります。まだお持ちでない方は、Adobe XDを無料でダウンロードいただけます。

本日のリリースで提供される新機能は、世界中のデザイナーコミュニティからのご要望を反映したもので、Adobe XD UserVoiceに寄せられた機能リクエストのうち上位のものが含まれています。私たちのチームは、コミュニティからの新しいアイデアやフィードバックを常に求めており、今後のリリースではさらに多くのご要望に応えるべく努力しています。

シャドウ(内側)

シャドウ(内側)は、デザインに奥行き感を出すのに役立ちます。これはその名の通り、選択したオブジェクトの内側に影をつけるエフェクトです。XDでオブジェクトを選択すると、画面右側のプロパティインスペクタの「アピアランス」セクションに新しい「シャドウ(内側)」プロパティが表示されます。シャドウ(内側)は、デザイン内のシェイプ、テキスト、イメージ、ブーリアングループに適用でき、PhotoshopやSketchなどの他のツールからデザインを読み込む際にもサポートされます。

オブジェクトがカンバス上の他のレイヤーの上に浮かんでいるように見える「シャドウ」によるドロップシャドウ効果とは逆に、シャドウ(内側)では、オブジェクトがカンバスの中に落ち込んでいるように見せることができます。これを使えば、よりリアルな照明効果や、3Dコンポーネントやニューモーフィズムなど、UIデザインの新しいトレンドを作品に取り入れることができます。

パスのアウトライン化

パスのアウトライン化機能を使えば、ストローク(線や境界線)の見た目を維持してシェイプに変換することができます。シェイプに変換したストロークは、カンバス上の他のオブジェクトと同様に、その形状やサイズの変更、グラデーションやシャドウ、ブレンドモードの適用など、さまざまな編集が可能になります。この機能は、XDでのベクター描画の新しい可能性を広げ、カスタムシェイプやテキストスタイルの作成に活用できます。

この機能の最も重要な使い方のひとつは、書き出し用のSVGアセットの準備です。シェイプに変換されたストロークは、SVGへの書き出し後にも同様に機能するため、拡大縮小のクオリティはストロークよりもはるかに優れ、異なるブラウザやデバイスタイプでもシームレスにレンダリングされます。SVG書き出しの準備のためにXDとIllustratorの間を行ったり来たりする必要はもうありません。

円錐形グラデーション

UIデザインでは、グラデーションが生み出す美しい色のエフェクトが多用されるようになりました。これまでXDでは線形と放射状のグラデーションを作成できましたが、本日、円錐形グラデーションのサポートが追加されました。これは、円の中心から形状を一周するカラーグラデーションで塗りつぶしを適用する機能です。

円錐形グラデーションは、XDの他のグラデーションと同様に動作し、グラデーションの塗りつぶしを移動または回転させたり、カラーストップを追加して独自のスタイルにすることができます。これを使えば、円形のプログレススピナー、円グラフ、カラーホイール、スピードメーターといったデザインコンポーネントに新しいスタイルを取り入れることができます。

注目のプラグイン:プレゼンを簡単に作成し、美しく表現する「Presentation」

デザインの背後には、語るべきストーリーがあります。しかし、デザイナーなら誰でも知っているように、そのために使うプレゼンテーションツールはデザイナーの作業を楽にするものではありません。Presentation for Adobe XDプラグインは、成果物の書き出し、魅力的なスライドのデザイン、グラフィックの検索、最新のデザインを追加するための延々とした行き来などの煩雑な作業を集約して簡単にするために開発されました。

PresentationはAdobe XDに対応した新しい強力なプラグインで、デザインツールの中でデザインワークを簡単かつ美しくプレゼンテーションできます。そして、プラグインを起動するだけで、プロがデザインしたテーマ、スライド、オブジェクトをXD上で選択できます。PresentationとXDの組み合わせなら、ブランディングの維持もアセットパネルでフォントやカラーを変更するだけで完了します。Presentationには、エレガントなベクターベースのアイコン、シェイプ、写真、イラスト、チャートがあらかじめ用意されているので、もうビジュアルを探し回る必要はありません。

このプラグインはこちらから無料でダウンロードできます。Presentationの詳細を紹介しているAdobe Blog記事もぜひご覧ください。

Topics: クリエイティブ, UI/UX & Web, デザイン,

Products: Creative Cloud, XD,