adobe xd preview 3

連載  /  

Adobe XD Preview 3 リリース!アートボードのスクロールやテキストの部分スタイリングなど

BY 公開

この記事は、2016/5/23 にポストされた May Update of Adobe Experience Design CC を翻訳したものです。

最も要望の多かった3つの機能追加

Adobe Experience Design CC(以下、Adobe XD)の5月のアップデートが提供開始されました。

まず最初に、好意的なご意見やフィードバックを多数お寄せいただき、誠にありがとうございました。UserVoiceには、700件以上の機能に関するリクエストをいただきましたが、その中で最も要望の多かった上位5つの機能のうち、以下の3つを実装しました。

  • スクロール可能なエリア:まずはスクロール可能なアートボードに対応しました。
  • ルーラーとグリッドガイド:グリッドの初のイテレーションを4月に追加し、さらなる機能追加を準備中です。
  • タイポグラフィー:この機能に関する要望のほとんどを実装しました。

TwitterFacebookパブリックフォーラムに加え、99U、Front Conf、UX London、Creative Jamなど世界中で開催されるカンファレンスやMeetupを通じて、ユーザーの皆様と交流できることを楽しみにしています。

Adobe XDチームは、UIデザイナーやUXデザイナー向けのエンドツーエンドのソリューションの開発に注力しています。デザイナーはUX関連の課題解決のために、複数の異なるツールやサービスを併用する必要がなくなりますので、今後の進展にぜひご期待ください!

今回のアップデートの最新機能

スウォッチ付きのAdobe XDカラーピッカー

アプリケーションを一から開発するにあたって、まずしっかりとした基盤を作り、次にあらゆる基礎ツールを使って進めていきます。しかし、これには時間がかかります!開発の時間だけではなく、それまでに、リサーチ、共感、ブレインストーム、プロトタイプの制作、テスト、検証など、繰り返し多くの労力が求められます。今までこのようなプロセスを重ねてきましたが、今回スウォッチ付きの最新のカラ―ピッカーをリリースできました。Adobe XDカラーピッカーの使用法は、ベクターシェイプを選択して、プロパティーパネルのカラーボックスをクリックし、色を選択するだけです。HSB(色相、彩度、明度)値またはスライダーを使用して、色の範囲と透明度(アルファチャンネル)を調整するとともに、プラス(+)アイコンをクリックしてお気に入りのスウォッチを保存できます。スウォッチの削除は、対象のスウォッチをパネルの外にドラッグするだけです。近々、グラデーションが追加される予定ですが、それまではIllustratorからグラデーションのベクターをコピーし、XDにペーストして使用できます。

テキストの改善点:部分スタイリング

最新のテキストエンジンへの改良の一環として、テキストの一部を選択して、そのフォント、サイズ、文字スペースを変更できるようになりました。テキストの一部を選択してから、プロパティーパネルで設定を変更するだけです。まもなく、テキストの一部の色が変更できるようになる予定です。

複数のアートボードおよびグリッドの選択

複数のアートボードを選択するか、シフトキーを押したまま複数のアートボードをクリックしてから、右側のプロパティーパネルでグリッドを有効にして編集できるようになりました。

オブジェクトまたはグループをアートボードに配置

これまでのAdobe XDリリースでは、整列ツールを使用して各オブジェクトを相互に関連付け、整列させることが可能でした。今回は、オブジェクトを1つ、または複数のオブジェクトのグループを1つ選択すると、同じ整列ツールを使用して、選択したオブジェクトまたはグループを当該のアートボードに整列させることができます。複数のアートボードを選択すると、それらの整列や割り当てが可能です。

スクロール

スクロール可能なコンテンツは、User Voiceで最も要望の多かった機能でした。今回のリリースでようやく実現しました!プロトタイプ内でスクロール可能なコンテンツを制作する最初のステップとして、長いアートボードをスクロールできるようになりました。この機能を使用するには、あらかじめ設定されたテンプレート(iPhone 6、iPad、またはWeb 1920など。開始画面から使用、またはアートボードツールを使用する際に表示されるリストから使用)でアートボードを作成し、高さを伸ばすだけです。その後、折り畳みを示す破線が現れます。プレビューウィンドウまたはWebプロトタイプを使用して自身のプロトタイプをテストする場合、スクロールできます。折り畳みの調整に関しては、スクロール可能なビューポートを介しての固定エレメントや水平スクロールを準備中です。ご期待ください!

Webプロトタイプ用の全画面表示

プレゼンの時や、プロトタイプのテストを集中して行いたい時のために、Webプロトタイプを全画面表示できるようにしました。この機能を有効にするには、右上の全画面アイコンをクリックするだけです。終了するには、エスケープキー[Esc]を押してください。

下記の動画で、すべての機能の動作をご覧いただけますので、是非ご覧ください。

まもなく追加予定の機能

インタラクティブなプロトタイプの埋め込み

テストや検証、理解を早くするために、プロトタイプのリンクを貼って共有できるようにします。まもなく、HTMLのコードをコピーし、BehanceのようなあらゆるWebサイトに自身のプロトタイプを埋め込むことが可能になります。

ぼかし

iOS上での背景のぼかしなど、ネイティブプラットフォーム上に存在するエフェクトの一部をデザイナーが再現しなければいけないことがあります。オブジェクトのぼかしや背景のぼかしを、オブジェクトまたはグループ上で設定できるようになります。

測定

位置を確認する機能も、UserVoiceで最も要望の多かった機能の一つです。まもなく、ホットキーとしてOptionキー[Alt]を使用してエレメントの選択や測定が可能になります。現在はエッジケースをいくつか微調整しているところですが、こちらでプレビューをご覧いただけます。

製品に対するフィードバック

これまでにも説明したとおり、アドビは透明性が高く反復的なアプローチを採用し、毎月Adobe XDのアップデートをリリースしています。この透明性により、コミュニティとのオープンなやり取りが可能になり、フィードバックを得てデザイナーが必要とする適切な機能を見極めることができます。皆さんのご協力に感謝いたします。

機能に関するご要望やバグなどがございましたら、Adobe XD UserVoiceページからご連絡ください。

例えば、先月は数名のユーザーから、Illustratorからアートワークを読み込む際の問題をご報告いただきました。この問題を検討した結果、Aiシンボルをサポートしていないことが分かり、ただちに修正しました。

Twitterでのご連絡も可能です。ハッシュタグ#AdobeXDを使用して投稿していただければ、チーム全員がツイートを確認できます。また、Facebookパブリックフォーラムからもご連絡いただけます。

XDで作成したプロトタイプをBehanceで共有する場合のハッシュタグは#MadeWithAdobeXDで、「使用ツール」から「Adobe Experience Design」を選択してください。

最後に質問です。

現段階ではXDは初期ベータ版であり、改善すべき点も数多くありますが、実際のプロジェクトにおいてXDを使用しはじめる際に、不足しているものは何でしょうか?率直なご意見をお聞かせください。

  AUTHOR

Keisuke Todoroki

アドビ システムズ 株式会社 / デベロッパーマーケティングスペシャリスト。 1999年、早稲田大学理工学部を卒業後、大手印刷会社に勤務。主にEC分野で J2EE開発に携わるが、Flexとの衝撃的な出会いを機にRIAの世界へ。 2008年4月、アドビシステムズ入社。 アドビのWebツール全般のマーケティングを担当。