株式会社シーエムエー

053-459-1510

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ホームページ制作 > ノンデザイナー必見!2分で分かるAdobe XDの使い方!

ホームページ制作 ノンデザイナー必見!2分で分かるAdobe XDの使い方!

  • このエントリーをはてなブックマークに追加

こんにちは。クリエイティブプランナーの深谷です。
今回はUXデザインツール、「Adobe XD」をご紹介いたします。

Adobe XDとは?

「Adobe XD」の正式名称は「Adobe Experience Design CC」。
ワイヤーフレーム作成からデザイン、ページ遷移のシミュレーションができる、多目的なデザイン作成ツールです。

Adobe XDは、こちらから無料でダウンロードできます。
https://www.adobe.com/jp/products/xd.html

基本的な使い方

今回は簡単なワイヤフレームの作成方法をご紹介します。

【1】画面サイズ選択

まずは、Adobe XDを立上げ、デザインを作成する画面サイズを選びます。
今回は、Web用の1920×1080サイズで作成します。

【2】ページ名変更

画面が立ち上がったら、作成するページの名前に変更します。


※画面サイズは後から変更することも可能です。

【3】グリッドライン表示

続いて配置の基準線を表示します。右クリックから「レイアウトグリッドを表示」を選択すると
画面上にグリッドラインが表示されます。

【4】ツールメニュー

基本準備が整いましたら、実際に内容の作成を行います。

基本メニューは、「長方形」「楕円形」「線」「ペン」「テキスト」が用意されていますので、
必要に応じて使い分けながらワイヤーフレームを作成していきます。

【5】ワイヤーフレーム完成

簡単なワイヤーフレームが完成しました。
操作に慣れてしまえばここまでなら10分程度で作成出来ると思います。

便利な機能

【1】リピートグリット

同じ内容を繰り返し並べたい場合には、この「リピートグリット」機能がとても便利です。
繰り返し並べたい要素を選択し、「リピードグリット」を選択、あとは並べたい方向(縦・横)に伸ばすだけ。
これだけで要素が均等に並べられます。

【2】デザインスペック共有

作成したデザインは、公開し共有することが出来ます。

「デザインスペックを公開」メニューから、「公開リンクを作成」をクリックすると
公開用のURLが作成されますので、そのURLから作成したデザインの共有が出来ます。
パスワードも設定出来るので、セキュリティ面も安心です。
またコメント機能もありますので、社内やお客様とのやりとりがこのAdobe XD上で可能となります。

【3】その他

この他にも、Photoshopとの連携が出来ますので、本格的なデザインの作成も出来ますし、
ページ遷移のシュミレーションができるプロトタイプの作成も可能ですので、利用機会はますます広がると思います。

まとめ

今回使用してみた感想は、印象としては全体的に動作が軽いのでとても快適でした!
Adobe XDは単なるデザイン作成ツールではなく、サイト制作する上で業務の効率化・スピード化が図れ、
また社内外でもコミュニケーションの円滑化が図れる優れものだと思います。

ノンデザイナーの皆さん、一度使ってみることをオススメします!

人気の記事ランキング

  • posted on 2018/07/05まだ間に合う!? 7月16日以降もGoogle Maps APIの地図を無料で使い続ける方法とは?

  • posted on 2018/05/23Google Chromeで動画が再生されない

  • posted on 2018/04/11構造化マークアップはSEO対策に効果があるのかやってみた

  • posted on 2018/05/30HTML5広告でクリック率が3.1倍にUP!

  • posted on 2018/09/05Zapierを使ってブログとSNS(Twitter・Facebook)を自動連携!トラフィック増大でSEO対策も

Top