Blog スタッフブログ

【XDでワイヤーフレーム作成 Vol.1】Quick Mockupプラグインを活用する

Category | Blog
/ 12,263views

こんにちは。ディレクターの池原です。
秋は過ごしやすく一番好きな季節なのですが、夏から冬へ移行するこの時期は、日照時間が減少することで脳内のセロトニンが減り「秋うつ」を引き起こす可能性が高くなるのだとか。
秋うつには、気の落ち込み、だるさ、十分な睡眠をとっても眠くなる、気力低下、焦燥感などの症状がみられるそうです。
体が資本ですので、この時期は「朝に日光を浴びる」「定期的な運動」「規則正しい生活」「バランスのよい食事」などを普段よりも意識して取り入れたいですね。

さて、WebサイトやアプリなどのUI/UXデザインのために開発されたツールであるAdobe XDですが、実はWebディレクターがWebサイトのワイヤーフレームを作る際にも適しています。
今回から、Adobe XDを使用してWebサイトのワイヤーフレームを作成する方法を何回かに分けて紹介していきます。

Vol.1ではまず、Adobe XDでワイヤーフレーム作成するための環境をつくっていきます。

それでは参りましょう。

Table of contents

  1. ワイヤーフレーム作成をはじめる前に
  2. Quick Mockupプラグインを導入する
  3. すべてのショートカットキーを表示できるようにしておく
  4. まとめ

ワイヤーフレーム作成をはじめる前に

Adobe XDはもともとUI/UXデザインのために開発されたツールですが、以下の2つを準備しておくことで、Webサイトのワイヤーフレームも難なく作成できるようになります。

  • Quick Mockupプラグインを導入する
  • すべてのショートカットキーを表示できるようにしておく

それぞれ詳しくみていきましょう。

Quick Mockupプラグインを導入する

Quick Mockupはワイヤーフレームやモックアップを作成する「UXデザイナー以外のビジネスユーザー」向けに開発されたAdobe XDのプラグインです。
Quick Mockupを使うことで「使用頻度の高いUI要素のサンプル」を簡単に挿入できるようになり、ボタンやダミー画像、タブなど、ほとんどのUI要素をゼロから作成する必要がなくなります。ワイヤーフレーム作成の効率が飛躍的に向上しますので、ぜひ活用されることをオススメいたします。

導入手順


Adobe XDホーム画面で、ツールバーの「プラグイン」をクリックし、「プラグインを見つける」を選択します。(※私のPCの言語設定の影響で、上の画像では「プラグインを見つける」が「Discover Plugins」となっています。)


プラグインパネルが起動しますので、『Quick Mockup』を検索します。
検索結果にQuick Mockupが表示されたら「インストール」をクリックしてXDに取り込んでください。

プラグインの表示とインストールについては、Adobe公式サイトでも解説をご覧いただけます。


Quick Mockupのインストールが完了したら、XDデザイン画面のサイドパネルから、双眼鏡のアイコンをクリックしプラグイン一覧を表示します。


Quick Mockupが表示されていればインストール成功です。

Quick Mockupでできること

実際にAdobe XDデザイン画面のサイドパネルのプラグイン一覧からQuick Mockupをクリックしてひらいてみてください。

はじめにテーマ一覧が表示されるかと思います。
Webサイトのワイヤーフレームは主に構成を確定する目的で作成しますが、装飾は不要なことが多いため、私はモノトーンのMinimalテーマを使用しています。

UI要素を個別で挿入もできますし、テンプレートを使用することもできます。


UI要素


テンプレート

各UI要素も細かく設定することができます。


たとえばボタン要素は、Active、Hover、Disabledなどのアクションを指定したり、アイコンの追加など、さまざまな設定が可能です。


はじめに指定したテーマの色がデフォルトとして反映されますが、個別でもカラーやフォントなどを自由に変更できます。


アイコンも種類が豊富なので、素材サイトで探してダウンロードして貼り付けて…といったプロセスが一気に短縮されます。

以下の動画では、Quick Mockupを使ったワイヤーフレーム制作の流れを見ることができます。

すべてのショートカットキーを表示できるようにしておく

Adobe XDではショートカットキーがデフォルトで使用でき、使い慣れるとよりスピーディに操作できるようになります。
ショートカットキーは、ツールバーの各メニューのコマンド名の横に表示されていますが、「Keyboard Shortcuts」というプラグインを導入すると、Shift + ⌘+f(Windows の場合:Shift+Ctrl+f)を押すだけですべてのショートカットキーを表示できるようになります。

ショートカットキーを覚えるまでは頻繁に確認することになりますので、事前にインストールしておくと良いでしょう。

「Keyboard Shortcuts」の導入手順は、先に紹介したQuick Mockupプラグインの導入手順と同じです。

ショートカットキー一覧はAdobe公式サイトでもご覧いただけます。

まとめ

さて、これでAdobe XDでのワイヤーフレーム作成のための環境が整いました。
今回のポイントは3つ。

  • Adobe XDでワイヤーフレームをつくるならQuick Mockupプラグインはmust-haveアイテム
  • Quick Mockupプラグインを使えば、テンプレートや使用頻度の高いUI要素を簡単に挿入できるようになる
  • 覚えるまではショートカットキーをすべて表示できるようにしておくと◎

準備の一手間でワイヤーフレームが効率よく作成できるようになりますので、ぜひやってみてくださいね。

次回は、実際にトップページのワイヤーフレームを作成する手順を紹介いたします。

Category | Blog
Author | Shiori Ikehara / 12,263views

Company information

〒650-0024
神戸市中央区海岸通5 商船三井ビルディング4F

Contact us

WEBに関するお問い合わせは
078-977-8760 (10:00 - 18:00)