Work guide

職種別お仕事ガイド

Webディレクターには必須?AdobeXDの特徴まとめ

2019.01.22

Webディレクターも要チェック!AdobeXDの活用方法を知ろう!

AdobeXDは多くのデザイナーが愛用するPhotoshopやIllustratorとは少し違い、UIデザインだけでなくUXデザインにも特化したツールです。WebディレクターはAdobeXDをどう活用できるのかご紹介いたします。

AdobeXDってどんなツール?

AdobeXDは2016年にベータ版がリリースされ、現在もマイナーアップデートによる成長を続けています。

当時の正式名称は「Adobe Experience Design CC」。ベータ版リリース当時はMac OS版だけしかありませんでしたが、2016年12月にWindows版が配信されました。その後、アップデートを重ね、2017年10月にAdobeXD CCとして正式にリリース。まだまだ新しいツールではありますが、レスポンシブなデザインやアニメーションなどを取り入れることでリアルなデザインを表現できます。

また、Webサイト、モバイルアプリのデザインやプロトタイプの作成が可能です。感覚的に操作できるだけでなくチュートリアル動画も充実しているため、短期間で使いこなせるようになります。操作方法もわかりやすくおすすめのツールです。

AdobeXDで使える機能は?

AdobeXD CCの機能で代表的なものとして、プロトタイプをWeb上に公開し、関係者が閲覧してコメントできるように公開または非公開のリンクを提供できるものが挙げられます。
これにより、実際のWebサイトをクライアントに提示しながら意見をもらうことが可能です。さらに、iFrameをサポートするWebサイトにプロトタイプを埋め込むこともできます。自動的にフルスクリーンで開く設定のほか、クリック可能な領域をわかりやすく示すホットスポットのヒントを表示する機能も魅力的です。
また、開発者は計測値や色、文字スタイルのデザインスペックを登録できます。クライアントをはじめとした関係者にデザインスペックを確認してもらい、コメントをもらうことも可能です。

グリッドオプションには方眼グリッドとレイアウトグリッドの2種類があります。方眼グリッドにはオブジェクトとテキストを整列できるガイド機能があり、レイアウトを行いながら計測情報を素早く理解できるのがメリットです。一方、レイアウトグリッドを使用すると、デザインの基本構造とそのなかのコンポーネントが異なるブレークポイントに対してどのように応答するのか定義できます。

また、シンボルを使えばドキュメント内に要素のコピーを複数配置し、まとめて変更できます。同じ要素の組み合わせが繰り返し登場するときはとても便利な機能です。シンボルの上書きや削除、再利用など、作業時間の大幅な短縮ができるでしょう。

さらに、デスクトップと同期されているファイルやCreative Cloud対応のモバイルアプリで作成されたアセット、Creative Cloudの各種ライブラリが「作品」で参照できます。
ファイル、ライブラリ、公開済み、共有されたアイテム、削除済みといったカテゴリ別に整理されるので、直感的で理解しやすいのも特長です。また、ウィンドウ上部の検索ボックスから簡単に検索することもできます。

アセットは名前の変更や別のフォルダーへの移動、コピー、削除、更新、以前のバージョンからの復元など、そのときの状況に応じて管理できるのがポイントです。
Adobe Creative Cloud アカウントそのものにオンラインストレージが付属しているため、どのデバイスやコンピューターでもアセットできるほか、Photoshopとの連携機能も備わっています。

WebディレクターがAdobeXDを使うメリット

AdobeXDを使えば、デザインと同様のキャンバスサイズで作成が可能です。さらに、デザイナーとしての基礎知識がなくても操作がしやすく、クライアントからのフィードバックを受けやすいのもメリットと言えるでしょう。

また、Illustratorなどのデザインツールとの互換性が高いのもポイントです。感覚的な操作が多く、短期間で使いこなせるまでになる操作性の高さにも注目したいところ。動作もそれほど重くなく、ストレスフリーで使えるツールであると言えます。

AdobeXDを活用するケース

ワイヤーフレームからプロトタイプ作成までを一元管理するときなど、AdobeXDを活用できます。デザインの方向性の指針を示しつつプロトタイプを作成できるので、クライアントとのコミュニケーションがとりやすいのもポイントです。
オンライン上で共有しながらフィードバックがもらえるので意見の食い違いも少なくてすみます。何か要望があればリアルタイムで応えることができるので、無駄な時間がかからず作業を進められるのは双方にとってのメリットです。 また、案件の進捗を明示化したいときもAdobeXDを活用できます。クライアントや関係者にわかりやすく進捗を示せるのはうれしいですよね。

AdobeXD導入時の注意点

AdobeXDを導入するにあたり、文字組みや文字周りの調整がほとんどできないことを頭に入れておきましょう。アンダーラインや縦書きには対応していません。さらに、文字だけでなく、写真のレタッチや色補正もできないので注意が必要です。画像編集をしたいときはPhotoshopなど別のツールを使用しましょう。

しかし、AdobeXDは日々アップデートが繰り返されているツールです。今後改善されることを期待しましょう。

スムーズな作業管理や進行に役立つツール!

AdobeXDはまだまだ新しいツールですが、日々アップデートされています。作業管理や作業進行がスムーズに行えるだけでなく、クライアントや関係者に進捗状況をわかりやすく明示し、リアルタイムでコミュニケーションを図れる便利なツールです。Webディレクターならチェックしておいて損はありません。ぜひ導入を検討してみてくださいね。



派遣で働く!Webディレクター/Webプロデューサーのお仕事

正社員で働く!Webディレクター/Webプロデューサーのお仕事

事業会社のWebディレクター/Webプロデューサー求人をチェック

ポートフォリオセミナー あなたのライフスタイルに合わせて働きたい方は、WSハケン 1つの会社で長くはたらきたいかたは、WSキャリア

人気の記事

システムエンジニアの働き方

1

コーダーとは?コーダーの業務と求められる能力

2

サーバーエンジニアを目指すために!必要な勉強情報まとめ

3

フロントエンドエンジニアが20代で勉強しておきたいこと

4

2019年はいったいどうなる?IT業界の今後の動向

5

システムエンジニアの働き方

1

コーダーとは?コーダーの業務と求められる能力

2

サーバーエンジニアを目指すために!必要な勉強情報まとめ

3

フロントエンドエンジニアが20代で勉強しておきたいこと

4

2019年はいったいどうなる?IT業界の今後の動向

5

ポートフォリオセミナー UXのスペシャリスト森田雄氏に学ぶ初級ワークショップ 正社員で働きたい方へWSキャリア ハタラクを発見 他では経験できないNHKのシゴト メタフェイズ で働く

他の職種も見る

  • Webデザイナー

  • コーダー/フロントエンドエンジニア

  • Webディレクター/Webプロデューサー

  • Webマーケター

  • システムエンジニア/プログラマ

  • Webオペレーター/サイト運営

  • サーバー・ネットワークエンジニア

  • DTP・グラフィックデザイナー

Career advice

転職のアレコレ。プロに相談したい方へオススメ!

最新のIT・Web業界動向を知るキャリアカウンセラーが行う
「キャリアアドバイス」

ある程度経験を積んだので次のステップにキャリアアップしたい、しばらくWeb業界を離れていたが再度業界に戻りたい、 未経験・経験浅めだがどのように転職活動を行っていったらいいかなど、ウェブスタッフでは様々なご要望に対応したキャリアアドバイスを行っております。

お申込みはこちら

WEB STAFF ウェブスタッフ株式会社

ウェブスタッフは、IT・Web業界専門の求人を取り扱う人材エージェントです。
IT・Webクリエイター・エンジニアの派遣・転職はお任せください。在宅勤務・フリーランスへのキャリアチェンジもサポート。

ページトップへ ページトップへ