Webデザインで使用するAdobeXD操作画面から基本機能まで解説

ロードマップ
Ui ux design advanced tips isometric landing page. User experience, adaptive interface mobile phone layouts, website platform on screen. Gadget software application development, 3d vector web banner

「Webデザイン作成ツールのAdobeXDを導入したけれど、操作画面の見方もよくわからない…」
「機能がたくさんありすぎてなにがなにかもよくわからない…」

Webデザインでよく使用するAdobeXDを導入してみたけれど、操作画面の見方もわからなければ、機能を調べたくても調べ方もわかりませんよね…

そこで本記事では以下についてまとめました。

  • AdobeXDの操作画面の解説
  • デザイン作成画面ワークスペースの解説!

この記事をみるだけで、Webデザインで使用するAdobeXDの操作画面の構成、パーツの呼び方、デザイン作成画面の詳細まで知ることができます。

Webデザイナーとして仕事をスムーズに進められるAdobeXDの機能を理解してWebデザインを効率よく作成していきましょう!

ぜひ最後まで読んでみてください。

AdobeXD起動画面の見方、新規画面を作成しよう!

Designed by Creativeart / Freepik

AdobeXDのアプリをダブルクリックして起動しましょう!

起動後に開かれた画面を解説していきます!

  1. 新規ファイルの作成
  2. 最近使用したもの
  3. 学ぶ
  4. ドキュメントの管理について

新規ファイルの作成

スマートフォンサイズやWEBサイズがあらかじめ選択できるようになっているので、作成するものに合わせてクリックするだけです。

  1. 上部の赤枠内のマークを押すと更に細かい種類のサイズが見れますので、作成サイズにあったものをクリックしてください。
  2. 今回はWeb1920サイズをクリック!
  3. 作業を開始できるWeb1920サイズのアートボードが作成されました!

最近使用したもの

最近作成したデータ等がある場合はこちらに表示されていきます!

表示したいデータをクリックするだけで過去のデータ編集画面に飛ぶことができます。

学ぶ

左の赤枠「学ぶ」をクリックすると、アドビ公式の XD 学習コンテンツが表示されます。
ここのコンテンツをクリックすると YouTube 動画に遷移するのですが、どれも英語版なので、英語版でも良い方は「学ぶ」から、日本語で学習したい方は下記から学習動画を見るのがおすすめです!

日本語学習動画ははこちらから>>AdobeXD動画学習

ドキュメントの管理について

XDのデータの保存場所はAdobeのクラウドに保存する「クラウドドキュメント」と、自分のパソコンに保存する「ローカルドキュメント」の2種類があります。

クラウドドキュメントにあるデータは他のメンバーと共同で編集する事ができます。

 デザイン作成画面(ワークスペース)を理解しよう!

Designed by Creativeart / Freepik

AdobeXDでデータを開いたり新規作成をすると、表示される画面をワークスペースと呼びます。

実際にAdobeXDで編集できる画面です。

ワークスペースのまわりには、たくさんのメニューやアイコンが表示されています。

名前と機能を解説していきます。

  1. メインメニュー
  2. デザインモード
  3. プロトタイプモード
  4. 共有モード
  5. ドキュメントに招待
  6. デバイスでプレビュー
  7. プレビュー
  8. ツールバー
  9. ライブラリ
  10. レイヤー
  11. プラグイン
  12. プロパティインスペクターツールバー

①メインメニュー

ファイルメニュー、編集メニュー、オブジェクトメニュー、プラグインメニュー、表示メニュー、ウィンドウメニュー、ヘルプメニュー、および各メニュー内のサブメニューにアクセスできます。

②デザインモード

新規のデザインを作成する、白いアートボードにデザインを作成していくモードです。

③プロトタイプモード

アートボード同士をリンクしたり、動きのあるデザインのデモを作成したりすることができるモードです。

④共有モード

デザインレビュー、開発、プレゼンテーション、テスト用のデザイン共有のリンクを作成することができるモードです。

⑤ドキュメントに招待

共同編集者を招待すると1つのワークスペースに同時にアクセスして共同編集することが出来るようになります。

XDドキュメントに同時にアクセスして編集できます。

⑥デバイスでプレビュー

モバイルとパソコンをUSBで繋ぎ、モバイルデバイスでプレビューするためのデータ転送設定ができます。

⑦プレビュー

このアイコンをクリックすると、実際のホームページのように画面の確認が出来る別画面が開き、プレビュー画面が表示されます

⑧ツールバー

赤枠の箇所をツールバーといいます。

デザインを作成していく為の機能がたくさんあるので、一つずつ上から順番に説明していきます。

a.選択ツール

アートボードに配置したものをクリックしたり、図形のサイズ変更などの操作を行うのに選択して指定できるツールです。

一番頻繁に使用します。

b.長方形ツール

⻑方形ツールを選択し、アートボードにドラッグすると⻑方形を描くことができます。

シフトキーを押しながらドラッグすると正方形を描くことができます。

c.楕円形ツール

楕円形ツールを選択し、アートボードにドラッグすると、円を描くことができます。

シフトキーを押しながらドラッグすると、正円を描くことができます。

d.多角形ツール

多角形ツールを選択し、アートボードにドラッグすると、三角形を描くことができます。

シフトキーを押しながらドラッグすることで、正三角形を描くことができます。

e.ラインツール

ラインツールを選択し、アートボードにドラッグすると、線を描くことができます。

f.ペンツール

ペンツールを選択し、アートボードにドラッグすると、直線や曲線を描くことができます。

g.テキストツール

テキストツールを選択し、アートボードにクリックすると、テキストを書くことができます。

文字を入力するのに使用するツールです。

h.アートボード

アートボードツールを選択すると、画面右側に様々なサイズのプリセットが表示されます。

新規のアートボードを作成することができます。

i.ズームツール

ズームツールを選択し、表示したい範囲をクリックもしくはドラッグすることで拡大することができます。

オプションキーもしくはオルトキーを押しながらクリックすると縮小することができます。

⑨ライブラリ

Adobeクリエイティブクラウドライブラリで共有された写真などがある場合にアクセスすることができます。

⑩レイヤー

レイヤー内容の確認、名称変更、グループ化、削除、順番の入れ替えができま す。

レイヤーとは?に関してはこちらの記事を御覧いただくと理解できます。>>Webデザイナーが解説!Photoshopの起動から書き出しまで

⑪プラグイン

プラグインとは拡張機能の事なのですが、こちらから、プラグインの使用、インストール、管理ができます。

⑫プロパティインスペクターツールバー

⑧ツールバーで作成した図形や文字等のサイズや色などを細かく変更できる場所です。

 

まとめ|Webデザインで使用するAdobeXD操作画面から基本機能まで解説

Designed by Creativeart / Freepik

本記事では、Webデザインで使用するAdobeXD操作画面から基本機能まで解説!について以下の内容をご紹介しました!

  • AdobeXD起動画面の見方、新規画面を作成しよう!
  • デザイン作成画面(ワークスペース)を理解しよう!

いかがだったでしょうか?

Webデザインで使用するAdobeXDの操作画面の構成からデザイン作成のツールまで、AdobeXDで利用できる機能を知ることができたと思います。

AdobeXDの機能を理解してWebデザインを効率よく作成していきましょう!

コメント

タイトルとURLをコピーしました