BLOG

CMAブログ

株式会社シーエムエーホーム CMAブログノンデザイナー必見！2分で分かるAdobe XDの使い方！

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

浜松本社ディレクター深谷
2018.11.15

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

目次
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は単なるデザイン作成ツールではなく、サイト制作する上で業務の効率化・スピード化が図れ、
また社内外でもコミュニケーションの円滑化が図れる優れものだと思います。

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

浜松本社ディレクター深谷

Tweet

人気の記事ランキング

posted on 2024/08/02Google広告がX(旧:Twitter)に表示されている!?～配信設定の方法もご紹介～
posted on 2023/02/082023年度版 Google PageSpeed Insights（ページスピードインサイト）を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた
posted on 2024/10/02構造化マークアップはSEO対策に効果があるのかやってみた（2024年度版）
posted on 2019/12/02FacebookのAudience Networkってどこに配信されるの？ターゲティング設定と動画広告の相性抜群でクリック率が静止画広告の2倍にUP！
posted on 2018/10/31無料でGoogleマイマップの配色とアイコンを自由にカスタマイズ！Webサイトのデザインテイストに合わせるやり方とは！？

おすすめの記事

メンバー

おすすめタグ