株式会社I-SEED(アイシード)|大阪・心斎橋のWEB制作集団

【第2回 XD講座】Adobe XD 初心者のための使い方をご紹介!

【第2回 XD講座】Adobe XD 初心者のための使い方をご紹介!

HiroHiro
この記事は、2020年2月10日に編集し、約 4 分で読めます。

Adobe XDを初めて使う人のために、今回は初心者向けに実際に画面の見方や便利な機能などを紹介していきたいと思います!

前回の講座ではデザインの共有アニメーションなど、Adobe XDをオススメする理由をご紹介しているので、「Adobe XDって何?」って人は是非見てください。

Adobe XDをまだダウンロードされてない方は、こちらからダウンロードできます。無料で使えます!
Adobe XD体験版ダウンロード | UI/UXデザインと共同作業ツール
Adobe XDスタータープランを無料でダウンロードできます。XDは、webサイトやモバイルアプリのデザインに適した、UI/UXデザインのソリューションです。webデザインからプロトタイプ、共有まで無料でおこなえます。

画面の見方からアートボードの作成まで

Adobe XDを開いたら以下のような画面が出てくるので、まずはアートボードの大きさを決めましょう。

1

iPhone、iPad、webの他、カスタマイズで任意の大きさで作成可能です。

また、横の下矢印のマークをクリックするとiPhone6/7/8やiPhone5の大きさなど細かく指定することも出来ます。

今回はWEB(1920px x 1080px)の大きさを選択しました。

Adobe XDの画面の各部位を解説

それでは細かくAdobe XDの操作画面を見ていきましょう。

中央のアートボードから、上部、左右のメニューに分かれていますね。

2

上部メニューでは文字や図形などを作成するデザインモードと、アニメーションを作成するプロトタイプモードの選択から、全画面のプレビューやデザインの共有ボタンなどがあります。

左側のツールバーには図形やテキスト、ペンなど、主にツールの選択を行い、右側のメニューで色や大きさなどのアピアランスの変更を行います。

アートボードの追加と大きさの変更

新しくアートボードを作成する場合は左側のツールバーから「アートボード」のアイコンを選択した後、右側のメニューでアートボードの大きさを指定します。

3

また、アートボードをクリックし選択することで、端をドラッグして自由に大きさを変更できます。

アートボードの選択は、アートボードの白い背景をダブルクリックでも選択可能です。

アートボードを下に広げると青い点線が出てきましたか?

これは一画面で見える範囲を表しており、右側のメニューの表示領域の高さを変更することで、指定した高さ以降の部分はスクロールして見えるようになります。

実際に確認したい場合は、上部メニューの右側にあるプレビューボタンでスクロールの具合が確認できます。

アートボードのグリッド作成とガイドの作成

バランスよく文字や画像を配置したい場合はグリッドを使用しましょう。

Adobe XDでは右側のメニューから簡単にグリッドを作成することができ、間隔などの変更も行えます。

また、以下のようにアートボードの端から内側に向かってドラッグすることでガイドを自由に作成できます。

作成したガイドは誤ってクリックすると移動してしまうので、アートボードのどこでもいいので右クリック→ガイド→ガイドをすべてロックを選択して移動しないようにしておきましょう。

以上がアートボードの基礎的な操作になります。

次に画像とテキストを並べて配置していきます

まずは左側メニューから長方形ツールとテキストツールを使いグリッドに合わせて図形と文字を配置してみます。

リピートグリッドで等間隔に複製

テキストと作成した図形を同時に選択し、リピートグリッドを選択。

リピートグリッドは選択したオブジェクトを等間隔に複製できます。

また、間隔はマウスでドラッグすることで自由に変更できます。

並べた図形から複数の画像を一括変更

今回は動物の画像を用意しました。

フォルダから予め並べ替えておいた複数の画像を選択し、作成した図形に向かってドラッグ&ドロップし、全ての写真を一度に変更することが出来ます。

リピートグリッドでデザインの一括変更

全ての画像に影をつけてみます。

リピートグリッドが有効の状態で、何れかの画像をダブルクリックし、アピアランスで影をつけます。

このように一箇所のアピアランスの変更を行うことで全ての画像に適用されました。

今回の講座は以上になります。

Adobe XD初心者のための基礎講座だったので細かく解説しましたが、いかがだったでしょうか?

次回はプロトタイプモードで画面遷移の方法やアニメーション作成の解説を行います!

この記事を書いた人
Hiro

ねこアレルギーだけどねこ好き

Hiroをフォローする

WEBの事でお悩みなら、まずは一度 I-SEED にご相談ください!

I-SEED は 「デザイン」「SEOマーケティング」「システム開発」を併せ持つWEB制作会社です。

コーポレート、オウンドメディア、ECなど様々な分野のサイト制作を得意としています。システム開発も自社で行っているので、様々なプロジェクトに柔軟かつ迅速に対応できるのが強みです。

大阪に良いWEB制作会社がいないとお困りの方は、是非一度 I-SEED までご相談ください。

I-SEED では随時採用も行っています。各種エンジニア、ディレクター、デザイナー、ライター、マーケターの全職種を募集しています。ご興味がある方は採用ページもご覧ください。

ブログページに戻る