2022.04.04
動画で学ぶ XDでできること

今までWEBサイトやランディングページのデザイン・レイアウト全てをillustratorで行っていたのですが、効率化のため、現在他ツールへの移行・まずはXDの使い方を習得中です。
まず、XDはillustratorやPhotoshopのように細かいデザインはあまり得意ではないため、全体の枠組みはXDで作成し、パーツはillustratorで作成するという方法で使い分けて行うのが良いとされています。
具体的に、XDでは何ができて、何ができないのかをまとめてみました。
目次
XD・illustrator・Photoshopの違いとは?
AdobeXDとは、UI/UXに優れたウェブサイトやアプリなどのデザインを簡単に作成することのできるデザインツールですが、
IllustratorやPhotoshopは画像・デザインの編集の幅の広さが特徴なのに対し、XDは効率重視で、ワイヤーフレームを作る場合や、UI/UXのデザインの作成に向いています。
XDでしかできないこと
1.レスポンシブデザイン機能
今までPCの場合・スマホの場合のデザインを個別に作成することもありましたが、XDを使えばレスポンシブデザインが短時間で効率的に作成できます。
2.リピートグリッド機能
WebサイトやUIデザインに多い、繰り返しのコンテンツ配置の作成に便利な機能です。
1.プロトタイプ機能
作成したデザインのページ間の遷移のリンクを指定してプロトタイプを作成、プレビューすることができます。
ホバーやクリック、スクロール時のアニメーションなどサイトを開いたときにどのような動きをするのかといった、実際の動作も確認することができます。
クライアントへはもちろん・チームでの作業時に動きを口で説明するのは大変ですし、伝わりにくいものですが、デザイン段階で実際に動きを共有することで認識のズレを防ぐことができます。
プレビュー機能
USBでスマホやタブレットなどのデバイスを繋ぐと、修正箇所をリアルタイムで反映させながらデザインの表示確認ができます。
できないこと
一方、XDではできないこともあります。
レイヤー効果や画像補正
Photoshopのレイヤー効果機能や画像補正機能はXDにはありません。
そのため、画像の編集はPhotoshopを併用し行う必要があります。
テキストの細かい調整
テキストの縦書きや、1文字1文字のカーニングなど細かい調整をする機能もありません。
文字周りのデザインを細かく行いたい場合には、Adobe XDは不向きのようです。
XDでおおまかなWebデザインは出来ますが、バナーのデザインなどには不向きとなっており、PhotoshopやIllustratorとの連携が必要なようです。
また、カラーマネジメントができないなどデメリットも踏まえた上で上手に活用していけば、よりスムーズに、より高品質な制作が可能となります。
プランニングA WEBチーム 野々下
Adobe XDの便利だったこと そして予想以上につまずいたこと
求人作成のポイントは「ターゲット」と「仕事内容」を明確にすること
UAからGAに以降する際の知識に関してあまり知られていない事
Adobe AcrobatでPDFの差分チェックを行うデジタル検版の仕方
花味弁当@花見の季節
誠実さ・信頼感のあるWEBサイトデザイン参考事例
Google広告/拡張テキスト広告廃止!レスポンシブ検索広告のメリットや効果的な作成法!
動画で学ぶ XDでできること
プラグイン不要!ワードプレスがデフォルトでLazy-load(遅延読込)をサポート
kintoneで毎週や毎月繰り返しリマインダ通知する。
「求人原稿」は自社作成をオススメしたい3つの理由