Adobe XDで簡単にワイヤーフレームやモックアップを作成できる無料素材 -Quick Mockup

12/3にパシフィコ横浜で開催された「AdobeMAXJapan」に合わせて、Adobe XD用の便利なプラグインが登場しました!

プラグインは通常、英語圏内に特化されたものが多いですが、「Quick Mockup」はなんと日本のデザイン現場向けに特化されたもので、簡単にワイヤーフレームやモックアップが作成できます。

Adobe XD Quick Mockupのキャプチャ

日本のUXデザイン用に開発されたAdobe XD用プラグイン「Quick Mockup」

Quick Mockupの特徴

Quick Mocukupは、日本のデザイン現場で使用頻度の高いUI要素のサンプルから簡単にワイヤーフレームやモックアップを作成、さらにスタイル、ステート、コンテンツのカスタマイズで簡易プロトタイプをすばやく簡単に作成できます。

サイトのキャプチャ

Quick Mockup

2019/12/3現在ベータ版で、ユーザーのフィードバックを経て、2020年春に正式バージョンとなる予定です。

Quick Mockupのインストール

Quick Mockupのダウンロード・インストールは、下記ページのちょい下から。

サイトのキャプチャ

Quick Mockup

「プラグインをインストールする」ボタンをクリックすると、「Adobe XDを開くことを許可しますか?」と表示されるので、「許可」をクリックします。

サイトのキャプチャ

「許可」をクリック

Adobe XDが自動で開くので、あとは「インストール」ボタンをクリックするだけで、Quick Mockupが利用できるようになります。

サイトのキャプチャ

「インストール」をクリック

Quick Mockupの使い方・動画

さっそく、Adobe XDにQuick Mockupをインストールしてみました。
Quick Mockupの起動は、メニューバーの「プラグイン」から「Quick Mockup」を選択します。

Adobe XDのキャプチャ

Quick Mockupの起動

ワイヤーフレームやモックアップで使用頻度の高いUI要素が、簡単に利用できます。

Adobe XDのキャプチャ

Quick Mockupのサイドバー

UI要素は、簡単に配置できます。もちろんレスポンシブ対応なので、便利ですね。

Adobe XDのキャプチャ

画像を配置

ダミーテキストも日本語で用意されており、見出しや本文やラベルなどで利用できます。

Adobe XDのキャプチャ

見出しと本文を配置

初期配置が常に左上が、、、ドラッグ&ドロップに対応してくれると嬉しい。
Quick Mockupのフィードバックは、メールで受け付けられています。

Quick Mockupの使い方を解説した動画も公開されています。

sponsors

top of page

©2024 coliss