Adobe XDで簡単にワイヤーフレームやモックアップを作成できる無料素材 -Quick Mockup
Post on:2019年12月4日
12/3にパシフィコ横浜で開催された「AdobeMAXJapan」に合わせて、Adobe XD用の便利なプラグインが登場しました!
プラグインは通常、英語圏内に特化されたものが多いですが、「Quick Mockup」はなんと日本のデザイン現場向けに特化されたもので、簡単にワイヤーフレームやモックアップが作成できます。

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

2019/12/3現在ベータ版で、ユーザーのフィードバックを経て、2020年春に正式バージョンとなる予定です。
Quick Mockupのインストール
Quick Mockupのダウンロード・インストールは、下記ページのちょい下から。

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

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

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

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

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

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

見出しと本文を配置
初期配置が常に左上が、、、ドラッグ&ドロップに対応してくれると嬉しい。
Quick Mockupのフィードバックは、メールで受け付けられています。
Quick Mockupの使い方を解説した動画も公開されています。
sponsors