2018年5月1日

デザイン

まだ間に合う、XDのおさらい【これからはじめるXD】

これからはじめるXDこれからはじめるXD

目次

  1. はじめに
  2. Adobe XDとは
  3. 導入手順
  4. 基本操作
  5. まとめ

はじめに

SketchやFigmaといったUIデザインツールが使われ始める中、PhotoshopやIllustratorでお馴染みのAdobeも「Adobe XD(Experience Design)」というUIデザインツールを半年ほど前に正式リリースしました。そこで今回はAdobe XDについて導入手順から基本操作までご紹介していきたいと思います!

Adobe XDとは

ここで簡単にAdobe XDについてご説明したいと思います。Adobe XDとはAdobe社が開発したUIデザインソフトです。従来のデザインソフト(Illustrator/Photoshop)に比べてとても動作が快適でWebサイトのようなたくさんアートボードが必要になるデザインでも動作が重くなるということはありません。(筆者はXDを使用する前はIllustratorでデザインをしていたのでこの快適さには驚きました)
また、Adobe製ということもありIllustratorやPhotoshopと画面構成や操作が似ているため、普段からAdobe製品を使用している方であれば違和感なく使用することができると思います。
(下はXDの画面になります。)
Adobe XD 編集画面

正式リリース前まではSketchに機能面で遅れていることもありましたが、月に1回ペースでアップデートがくるので、他のUIデザインソフトに引けを取らないものになっていると感じます。

また、SketchやFigmaと比べてUIの日本語表記に対応しているというのも大きなアピールポイントではないかなと思います。

導入手順

Adobe XDの導入手順について解説していきます。Adobe XDはAdobe CCの管理画面からインストールができます。
Adobe CC 設定画面

Adobe CCを契約していない方は、1ヶ月の体験版が使用できます。以下よりアクセスして体験版をダウンロードしてみてください。(Adobe公式サイトより)

AdobeXD公式サイト

体験版ダウンロードはこちらから

基本操作

では、早速AdobeXDを触っていきたいと思います。
立ち上げるとまず初期の設定画面が表示されます。
スクリーンショット 2018-04-04 19.58.17.png (239.5 kB)

ここではデザインするアートボードを指定します。スマートフォンのWebサイトのデザインであればメニュー左側の「iPhone 6/7/8」を選択。任意の大きさを指定したい場合は右側の
カスタムサイズより指定します。

編集画面

アートボードが表示されるので早速操作していきましょう。

まずは四角形ツールを使い背景のデザインから始めます。左側のメニューの四角のアイコンをクリック、またはキーボードのRキーで四角形ツールになります。任意の大きさにドラッグしてみましょう。
長方形ツール

四角形を作成したら配置を調整してみましょう。左側メニューの一番上の矢印のアイコン、またはキーボードの「Vキー」
を押すことで選択ツールになります。選択ツールが選択された状態でマウスカーソルを先ほど作成したオブジェクトの角の方へ近づけることでオブジェクトの大きさや角度の変更ができます。

また、細かく大きさを指定したい場合や場所を正確に指定したい場合などは右側にプロパティがあるのでここで指定することができます。(ここら辺はIllustratorと同じですね)

メニュー
(右側のメニュー画面。上から順にIllustratorではおなじみの「整列」や「分割・拡張」機能、オブジェクトの座標や大きさのメニュー、その右側には角度の調節も可能です。その下はアピアランスの画面になります(後述))

メニュー
(上から順に、「選択ツール」「四角形ツール」「楕円形ツール」「直線ツール」「パスツール」「アートボード作成」「虫眼鏡ツール」です。)

色も右側のメニューに表示されている「アピアランス」の画面より設定ができます。「塗り」と「境界線」が指定できます。
クリックすることで詳細設定ができます。
アピアランス設定

文字入力に関しては左側の「文字ツール」かショートカット「T」で選択します。
文字入力

文字を選択すると右側のメニューにテキストの項目が追加されるので、
ここでフォントサイズやフォントの種類字間の調節が行えます。
文字設定

まとめ

今回は導入事例や簡単な操作についてご説明しました。
Bageleeでは【これからはじめるXD】という名前で今後もXDの機能等についてご紹介していきたいと思います。ぜひ今後の学習に役立ててください。

1

0

AUTHOR

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP