技術 technology

日本のUXデザインプロセスを支援するXDプラグイン「Quick Mockup」

Adobe XDはシンプルな操作で直感的にデザインができるデザインツールです。

今ではPhotoshopやIllustratorを使わず、Adobe XDでデザインをすることが多くなりました。

クライアントやエンジニアに確認してもらうために、PDFで書き出して、プリントしてなどの作業がありましたが、Adobe XDで作成したデザインはインターネット環境さえあればブラウザからプレビューを共有できるのでとても便利です。

そんなAdobe XDについて、まだわからない方はAdobe XDについてまとめた記事がありますので、ぜひこちらをご覧いただければと思います。

 

 

Adobe XDは便利なうえに、魅力的なプラグインがたくさんあります。

プラグインを使用することで、人物の画像を生成したり、イラスト素材が無料で利用できたりと、さらに作業効率をあげることができます。

そんな魅力的なプラグインの中から、日本のUXデザインプロセスを支援する「Quick Mockup」を紹介します。

Quick Mockupとは

Quick Mockupは、日本のデザイン現場でユーザーとの対話から生まれ、デザインリサーチ、インターナショナル・デザイン、グローバリゼーションチームによって設計された日本市場向けUXソリューションです。

Adobe Blogより

 

日本の独特なデザインプロセスを支援するプラグイン

Adobeデザインチームの調査によると、日本ではデザイナー以外がワイヤーフレームなどの作成を行うことがわかりました。

実際に弊社の場合でも、ディレクターがワイヤーフレームを担当することがしばしばあります。

デザイナー向けに設計されたAdobe XDを、日本のデザイン現場でより有効に活用するために誕生したのが、日本のUXデザインプロセスを支援するプラグイン「Quick Mockup」です。

Quick Mockupを活用することで、ワイヤーフレームやモックアップの作成がより効率的に行えるため、よりスピーディーにアイデアを形にすることができます。

 

Quick Mockupをインストール

日本のUXデザインプロセスを支援するプラグイン「Quick Mockup」を早速インストールしてみましょう

 

previous arrow
next arrow
Slider
  1. Adobe XDホーム画面で、【アドオン】を選択して、【プラグインパネル】を起動します。
  2. ツールバーの【プラグイン】をクリックし、「プラグインを見つける」をクリックするか、XD Add-onの紹介「プラグイン」をクリックして【プラグインパネル】を起動します。
  3. 【プラグインパネル】で、【Quick Mockup】を検索します。
  4. 【Quick Mockup】の【インストール】をクリックしてインストールします。

 

誰でも簡単にすばやくデザインできる

Quick Mockupには使用頻度の高いUI要素のボタン、アイコン、画像、テキストなどのサンプルが内臓されて、簡単にワイヤーフレームやモックアップを作成できます。

Quick Mockupを使えば、デザインの作業効率をあげるのみでなく、ディレクターやデザインツールに慣れていない人でもワイヤーフレームやモックアップを簡単にすばやく作成できます。

 

Quick Mockupを表示する

インストールしたQuick MockupをAdobe XDで表示してみましょう。

  1. ツールバーの【左下にあるアイコン】をクリックします。
  2. インストール済みのプラグインが表示されるので、【Quick Mockup】をクリックします。

Quick Mockupの使用頻度の高いUI要素のサンプルが表示されます。必要に応じてサンプルをクリックしてオブジェクトをアートボードに追加できます。

また、各サンプルのスタイル、ステート、サイズなどを変更することでカスタマイズも簡単に行えます。

 

Quick Mockupの動画紹介

どれだけすばやくワイヤーフレームやモックアップが作成できるか、動画ご覧いただければわかると思います。

使用頻度の高いパーツがあり、あっという間に完成してしまいます。

 

 

まとめ

日本のUXデザインプロセスを支援するXDプラグイン「Quick Mockup」はいかがだったでしょうか。

現在はベータ版で、ユーザーのフィードバックを経て、2020年春に正式バージョンリリースを予定しているそうです。

今後のさらなるQuick Mockupの進化に期待しましょう。

 

一覧ページへ 

Other contents
その他のコンテンツ

Go to Top

Contact
お問い合わせ