【Adobe XD】Quick Mockupを使って瞬時にワイヤーフレームを作る

Quick Mockupでワイヤーフレームを作る

みなさんこんにちは。しゅん(@shun_webdesign)です。

皆さんはWebデザインを考える際にワイヤーフレームがどのようにして作っていますか?

手書きで描く方もXDなどのツールを使って作るなんて方もいらっしゃると思います。

XDで作るのはわかりにくくて面倒くさい

なんて方もいるのではないでしょうか。

今回はAdobe XDを使ってワイヤーフレームが手軽に作ることができるプラグイン

「Quick MockUp」について使い方を紹介します。

ワイヤーフレームとは?

Webサイト上のテキストや画像などコンテンツの配置位置を決める設計図の役割を担っています。

デザインを作る前に重要な作業の1つです。

デザインを作る前のラフや下書きのようなものです

合わせて読みたい

Web制作の工程については以下の記事で紹介しています。

Quick Mockupでできること

ワイヤーフレーム(モックアップ)を作ることができるXDのプラグインです。

ワイヤーフレームを作るためのコンポーネントがセットされているのでアートボードにコンポーネントを配置するだけで素早く作成することが可能です。

テンプレートも用意されており、eコマース、サービス、サインアップ画面など作りたいページ合わせてカスタマイズができます。

Quick mockupをインストールする

使い方

プラグインをインストールするだけ使え、難しい操作は一切必要ありません。

以下について紹介していきます。

使い方手順
  1. インストール
  2. テーマの選択
  3. 個のエレメントの選択
  4. コンポーネントを配置
  5. テンプレートの使い方
STEP.1
インストール

Quick Mockupをインストールします。

下記ボタンをクリックしてインストールページへ飛んでください。

Quick mockupをインストールする

合わせて読みたい

STEP.2
テーマの選択

プラグインのボタンをクリックすると[テーマを選択]と表示されます。

明るいテーマ、暗いテーマから計8種類のテーマからイメージに近いものを選べます。

STEP.3
個のエレメント

テーマごとの[個のエレメント](コンポーネント)が表示されます。

表示されたコンポーネントを元にワイヤーフレームを作っていきます。

STEP.4
コンポーネントを配置

コンポーネントをクリックしてアートボード上に配置します。

STEP.5
テンプレートの使い方

テーマを選択し、[テンプレート]のタブをクリックしてください。

作成したいページに合わせたテンプレートをクリックすると自動的にアートボードが作成されます。

テンプレートを編集することもできます。

SPのサイズでテンプレートを使う

スマートフォンのアイコンをクリックするとSPのテンプレートが表示され選べるようになります。

合わせて読みたい

まとめ

今回はQuick Mockupの使い方について紹介させていただきました。

  1. テーマの選択
  2. 個のエレメントの選択
  3. コンポーネントを配置
  4. テンプレートの使い方

最後まで見ていただきありがとうございます!是非記事の共有をよろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA