技術 technology

【Webデザイナー必見】あっという間にワイヤーフレームが完成!? XD「Quick Mockup」テンプレート機能

みなさんXDは使っていますか。

XDはシンプルな操作で直感的に操作ができるため、Webデザインには欠かせないツールの一つです。

さらに便利なプラグインがたくさんあり、追加することで作業効率が向上できます。

今回はあっという間にワイヤーフレームが完成できるQuick Mockupのテンプレート機能を紹介します。

このテンプレート機能を使えばWebデザイナーだけでなく、Webディレクターも簡単にワイヤーフレームが作成できるので、役に立つこと間違いなしです。

あっという間にワイヤーフレームが完成

まずはどれだけあっという間なのかを確認するため、ワイヤーフレームを作成してみましたのでご覧ください。

quick_mockup

秒数にしておよそたった5秒でワイヤーフレームが完成しました。

本当にあっという間です。

 

Pick a theme

Quick Mockupには様々なテーマが用意されています。

この中から目的にあったテーマを選択します。テーマはいつでも変更できます。

テーマ一覧

Minimal
Minimal

Foundation
Foundation

Fluo
Fluo

Kyoto
Kyoto

Malibu
Malibu

Monumental
Monumental

Pink Elegant
Pink Elegant

Radiance
Radiance

Elements

テーマを選択するとElementsTemplatesのタブが表示されます。

テーマを選択した直後はElementsが表示されています。

アイテムの中から任意のものをクリックすると、アートボードにオブジェクトが追加されます。

追加されたオブジェクトはスタイル、タグなどを変更することで大きさやデザインの変更ができます。

Elements一覧

Typography
Typography
Background
Background
Badge
Badge
Button
Button
Calendar
Calendar
Card
Card
Checkbox
Checkbox
Circle Button
Circle Button
Date Picker
Date Picker
Dropdown
Dropdown
Icon
Icon
Image
Image
Input
Input
List
List
List Item
List Item
Pagination
Pagination
Progress Bar
Progress Bar
Radio
Radio
Rating Item
Rating Item
Slider
Slider
Tab Item
Tab Item
Tabs
Tabs
Tag
Tag
Textarea
Textarea
Toggle
Toggle
Tooltlp
Tooltlp
Video
Video

 

Templates

一番おすすめの機能がこのTemplatesです。

Templatesのタブをクリックするとテンプレートの一覧が表示されます。

トップページやブログ、会社概要などのテンプレートが用意されています。さらに、スマホのアイコンをクリックするとモバイル用のテンプレートに切り替わります。

目的にあったテンプレートをクリックするとアートボード が追加され、あっという間にワイヤーフレームが完成します。

テーマごとにアイテムのカラーがそれぞれ違うので、イメージ合うテンプレートを選択すれば作業時間をグッと短縮できます。

Templates一覧

About
About
Blog – Desktop
Blog – Desktop
Blog Detail - Desktop
Blog Detail – Desktop
Classic Home – Desktop
Classic Home – Desktop
Contact – Desktop
Contact – Desktop
Ecommerce Classic – Desktop
Ecommerce Classic – Desktop
Marketing Home – Desktop
Marketing Home – Desktop
One Page – Desktop
One Page – Desktop
Portfolio Home – Desktop
Portfolio Home – Desktop
Pricing – Desktop
Pricing – Desktop
Services – Desktop
Services – Desktop
Sign in – Desktop
Sign in – Desktop
Sign Up
Sign Up
Subscribe - Desktop
Subscribe – Desktop

 

 

まとめ

Quick Mockupのテンプレート機能はいかがだったでしょうか。

本当にあっという間にワイヤーフレームが完成できるので、びっくりしたのではないでしょうか。

Quick Mockupはとても便利なプラグインなので、実際にインストールして試していただければと思います。。

 

一覧ページへ 

Other contents
その他のコンテンツ

Go to Top

Contact
お問い合わせ