knowledge

コミュニケーションを円滑にする、web担当者向け「Adobe XD」の使い方

webサイトのデザインや共有が簡単にできるAdobe XDは、デザイナー向けのソフトと思われがちですが、実はチームでweb制作を行う時にとても便利な機能が満載なのです。特に、全体をまとめるwebディレクターやマーケター、web担当者にとって、作業の効率にもつながるでしょう。

今回は、チームで利用する際や制作会社と企業との連携で使用する際のAdobe XDの使い方をご紹介していきます。

そもそも、Adobe XDとは?

web制作の指示を出す立場の場合でも、利用するソフトについて詳しくなければ、デザイナーやエンジニアとのコミュニケーションがスムーズに進みません。Adobe XDの利用を考えている場合は、最初にどのようなソフトか知ることから始めましょう。

web制作を直観的に行えるソフト

Adobe XDは、デザイン技術や知識がなくても簡単にweb制作ができてしまうソフトです。具体的に何ができるかは、後程詳しく解説しますが、難しい操作が必要なく直観的な作業だけでwebサイトを1から作ることが可能です。webブラウザ上での動きをソフト内で確認しながら作成できるので、完成形がイメージしやすくなります。

また、費用がほとんどかからないのも特徴でブラウザ上でソフトやアプリをダウンロードするだけで利用できます。試しに導入なんていうことも気軽にできるでしょう。

Adobe XDを使って何ができるのか?

webデザインといっても、写真の加工などがメインのPhotoshopなどの有名なソフトもあります。では、Adobe XDを使うと具体的に何ができるのか、ご説明していきます。

WF、デザインの作成

Adobe XDでは「ワイヤーフレーム(WF)」や、クライアントに見せるデザインの完成形である「デザインカンプ」の作成をすることができます。これらの作成で使用できる機能は、多数あり、デザインの編集はもちろん、シンボルの作成なども可能です。中でも便利なのが、他のツールには備わっていない「リピートグリッド」。要素の繰り返しがドラッグ一つでできる特殊な機能です。

webサイトのページレイアウトを定めるための設計図であるワイヤーフレームは、デザインを決める前の枠組みですが、Adobe XDを利用すると写真も同時に組み込みながら作業することができるので効率良く進められます。

プロトタイプ作成

プロトタイプとは、完成形をイメージしやすくするために作成するモックのこと。Adobe XDでは、作成したデザインカップに対して、webブラウザ上で直接動きを再現ができます。使える機能は、遷移時のアクションやアニメーション設定、PSDデータの読み込などです。

さらに、スマホにAdobe XDのアプリをインストールすることでリアルタイム実機確認をすることも可能です。

共有とコメント

ワイヤーフレームやデザインカップを作成したら、デザインレビューを共有し、クライアントや社内で確認する必要があるでしょう。

他のツールの場合、レビューとは別に、修正用のメモがあり、いくつもファイルを開かなければならず手間がかかり、管理も面倒です。その際に便利なのが、「公開(共有)」と「レビュー(コメント)」機能です。プロトタイプをURL一つで共有できるだけでなく、共有したものに対して、直接コメントを記入できる機能が付いています。

Adobe XDが選ばれている理由とは?

デザイナーによってはソフトの好みがあるので、Adobe XDだけが良いとは言い切れません。しかし、デザインを専門に行っていない人でも操作が簡単で、Photoshopよりもできることが多いなど、さまざまな魅力があります。
ここでは、なぜAdobe XDが選ばれているのか、その魅力を伝えます。

軽量かつ操作が簡単

Adobe XDにあって、Photoshopにはないもの、それは操作が簡単ということです。web制作をする時にすごく便利な機能で、「リピートグリッド」が挙げられます。

リピート、つまり繰り返し行いたいデザインを選択し、ドラッグするだけで操作が簡単にでき、作業が早く進みます。Photoshopの場合、一つ一つ選択しなければならないので面倒です。画像加工においては、Photoshopの方ができる機能が多いですが、webサイト全体を作る時にはAdobe XDの方が作業がスムーズに進むでしょう。

「ここからここまでをPhotoshopで、あとはAdobe XDで」という様に、得意分野に分けて作業を分担すると、よりクオリティが高いwebサイトを制作することができるでしょう。

直観的に作業できるのが良い

webサイトを制作する時は、デザイナーやエンジニア、webマーケターなど、チームを編成して行うことがほとんどです。
しかし、デザイナーの中でも画像加工しかできない場合や、できるデザインが限られてくる場合があり、全てのデザインをお願いすることが無理なこともあります。

また、急なクライアントからの依頼で、デザイナーの確保が難しい状況もあり得ます。そんな時、Adobe XDを利用できれば、知識や技術がなくても簡単にデザインすることが可能です。これからの時代には、さまざまなスキルが求められるので、直観的に作業できるAdobe XDを取り入れることで、一人ひとりのできることも増えていくでしょう。

チームで仕事する時には、Adobe XDが便利

先ほどから、何度か話にもでていますが、Adobe XDはweb制作をチームで行う時にとても便利なソフト機能が多く備わっています。では、なぜチームでの作業に向いているのか、具体的に見ていきましょう。

1. Adobe XDの利用で作業効率が向上

他のソフトでは、「使える人が限られている」「別の形式で保存し直して送るから面倒」「どこを修正すればいいのかわかりづらい」などといった問題点がありました。しかし、Adobe XDではこれらの問題を解決し、チームでの作業を効率良く進めることが可能です。ここでは、作業効率がアップする理由をご説明します。

2. シンプルな操作で誰でも簡単

Adobe XDの特徴は、誰でも簡単に操作ができるということ。例えば、背景カラーの変更はボタン一つで可能で、クリックするボタンの配置はドロップするだけで調整できます。

直観的に作業できるので、デザイナーが修正することが無理な場合でも変わりにチームの誰かが修正することが可能になります。

3. マルチデバイスに対応している

Adobe XDはマルチデバイスに対応しているので、パソコン画面上だけでなく、スマートフォンでも確認することが可能です。専用のアプリをインストールして、パソコンとUSBてつなぐだけだから操作も簡単です。

この機能を利用すれば、webサイトだけでなく、スマートフォン用のアプリ作成時にも役に立つでしょう。

4. コミュニケーションが取りやすくなる

web制作をする上でよく問題視されているのが、コミュニケーションが取りづらいこと。特に、IT業界は在宅やリモートで仕事する人が多いので、メールやチャットだけでは限界があるでしょう。

Googleスプレッドシートなど、ファイルを共有できるものもありますが、デザイン系は一人で作業したものを共有することが多いです。しかし、Adobe XDを利用することで、コミュニケーションをスムーズに取ることが可能です。

5. 制作会社と企業の理解が深まる

完成形ではなく、デザインの段階からクライアントに見せることができるので、お互いのイメージしているものが直接目で見てわかるようです。そのため、お互いの理解が深まり、企業などのクライアントも「もっとこうしてほしい」などの意見を言いやすくなるでしょう。

具体的なイメージを双方が理解し合うことで、理想とするwebサイトが作成でき、クライアントの満足度もアップします。

6. デザイナー、エンジニアとの架け橋になる

webサイトはデザインができれば作成できるというものではありません。webサイト作成に欠かせないエンジニアですが、デザイナーとコミュニケーションがスムーズにいかず、作業が進まないこともしばしば。

しかし、Adobe XDを利用することで、デザインが見える化され、エンジニアも修正点を伝えやすくなります。また、一人で作業しなければならなかったものが、同じファイルをリアルタイムで共有できるので共同作業も可能になり、作業効率が向上することにつながるでしょう。

7. 指示書の作成が省ける

デザインレビューを確認して、修正項目のメモを別ファイルで作成してデザイナーに送るのは手間がかかります。また、ファイルが複数になるので、確認する側もデザインを作成する側にとっても作業や管理がしづらいです。

Adobe XDには、URL一つで共有し、直接webブラウザ上でコメントできる機能があるので、ソフトを利用するだけで指示書の変わりにもなります。

まとめ

最近注目されつつあるAdobe XD。Photoshopでは作業ができない機能が満載で、特にチームでweb制作を行う時に便利なソフトです。デザイナーだけでなく、webディレクターやマーケターでも簡単に操作ができるので、一度活用してみることをおすすめします。

webサイト制作作業の効率化や、チームのコミュニケーションの不足に悩んでいる方、制作会社との連携が上手くいかない企業の方は、ぜひ一度、Adobe XDを利用してみてはいかがでしょうか。

  • WEB制作
  • ホームページリニューアル

この記事を書いた人

UNIONNET Inc. /

UNIONNETの制作実績