Adobe XDとは?

ITリテラシー学習
ITリテラシー学習

WEBサイトやモバイルアプリのプロトタイプを制作できる
Adobe XDの特徴や使い方についてご紹介します。

XDとは

XDはAdobe社が提供しているWEBサイトやモバイルアプリのプロトタイプ制作ツールです。プロトタイプとは試作版という意味になります。WEBサイトやモバイルアプリの場合、構成案やデザインの制作、または実際の画面と同じようにページ遷移をさせたりすることができます。

XDの特徴

XDではWEBサイトやモバイルアプリのワイヤーフレームやデザインを制作することができます。Photoshopでもデザインの制作を行うことが出来ますが、XDとPhotoshopの大きな違いとして、XDではプロトタイプを制作することができます。
またXDの場合は制作したワイヤーフレームやデザインをAdobe社のサーバにアップすることができ、URLを共有するだけで、周りの人も確認することができます。
ただ画像の加工などデザインに関する機能はPhotoshopの方が豊富に用意されています。そのためXDで作業を進める場合でも、Photoshopと併用して進めることは多くあります。

XDの使い方

実際に構成案のプロトタイプを作ってURLで共有してみましょう。

XDはこちら
※「Adobe creative cloud(有料)」で制作を進めていきますが、XDには「Adobe XD スターターキット(無料)」があります。講座はスターターキットで操作できる範囲内のため、どちらをご利用頂いても問題ございません。

Adobe XD スターターキットはこちら

*「Adobe creative cloud(有料)」「Adobe XD スターターキット(無料)」はPCにインストールする必要があります。
*社内でツールダウンロード利用が禁止されている場合は、事前に情報システム部等へお問い合わせください。

(1)最初にアートボードのサイズを選びます。Web 1920(赤枠)を選択してください。

(2)□アイコン(赤枠)を選択して、画像と同じように四角形を作ってください。

(3)タイトル(赤枠)を選択して、コピー(Ctrl + C)してペースト(Ctrl + V)してください。画像のようにアートボードごとコピーできます。

(4)文字ツール(赤枠)を選択して、画像と同じように文字を入力してください。これで簡易ですが、ボタンを作成しました。右のアートボードの四角形を削除してください。

(5)プロトタイプタブ(赤枠)をクリックしてください。またお問い合わせをこちら(青枠)をクリックして右のアートボードに伸ばしてください。

(6)右上の再生ボタン(赤枠)をクリックするとプレビューが開きます。実際に「お問い合わせはこちら」をクリックすると、2枚目のお問い合わせフォームに遷移します。試してみましょう。

(7)共有用のリンクを作ってみましょう。共有タブ(赤枠)を選択してください。右側で共有リンクの設定ができます。リンクを作成(青枠)をクリックしてください。

(8)生成されたリンクをクリックするとブラウザに作成したXDの内容が表示されます。このURLを共有することで他の方も作成したデザインや構成案を確認することができます。また右側からコメントを記載することもできます。

POINT

共有URLやコメントはAdobeアカウントでログインしていなくても閲覧したり記述したりできます。お客様にご確認いただく際に有効ですが、情報の扱いには注意しましょう。

menter_logo

[転職希望者限定]
『MENTER PERSONAL』
3ヶ月間 0円キャンペーン!!

「MENTER PERSONAL (メンターパーソナル)」は、ITスキルを身につけることでこれまで未経験であった職種への転職、副業、独立、スキルアップを支援するサービスです。
転職希望者に限り3ヶ月間サービスを0円でご利用頂けるキャンペーンを実施中!

*教材/リモート面談/転職支援サービスを提供
*キャンペーン適用条件1:WHITE㈱の転職支援サービス利用
*キャンペーン適用条件2:期間内に指定カリキュラムの受講
*適用条件に満たない場合はサービス提供中断させて頂く場合がございます(料金請求することはありませんのでご安心ください)

店舗販売員、飲食業などオフィスワーク未経験から転職も。
サービス詳細や転職成功者のストーリーを‍見る
*お問い合わせ時に「ブログを見た」と備考欄に入力ください。

menter_logo

[法人向け]
文系DX人材育成なら『MENTER』

「うちの会社はITリテラシーが低い...」
「DXを行うには人材育成から始めなくては...」
「自動化やAI理解できる社員が増えたらな...」

デジタルに強い人材育成を行うオンライン学習サービス『MENTER』が、そんなお悩みを解決します!

・マンガで楽しくインターネットについて学習
・ショートカットキーからAIの設計まで
・大手企業の導入事例/成功事例あり
・DX人材育成について相談/事例集請求/無料トライアル/ITリテラシー無料診断可能

MENTER紹介ページを‍見る
お問い合わせは ‍こちら

ITスキルアップ相談室

コメント

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