ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

ついに正式版リリースされたAdobe XDを今からでも簡単マスター!便利な機能を紹介します

| カテゴリー : Webデザイン

こんにちは!アイドットデザイン、デザイナーの林です!

朝晩がグッと寒くなりましたね。ちなみに僕はタートルネックなのにノースリーブのセーターの女性に恋していた矢田亜希子世代です。

今回はAdobe社が2016年6月にベータ版がリリース(日本語)した「Adobe XD」の紹介と、実際に使ってみた感想をレポートします。

リリースされて1年以上が経ち、先日ようやく正式版がリリースされたので、すでに使ってみたよ、もう導入しているよという方もいらっしゃると思います。

Adobe XDってなに?

参照:http://www.adobe.com/jp/

Adobe XDとは、「Adobe Experience Design (アドビ エクスペリエンス デザイン )」の略。
Adobe社が2016年6月にベータ版リリース(日本語)した、新しいUXデザインツールです。

ADOBE EXPERIENCE DESIGN CC

なぜXDが必要なのか

もう「動かないワイヤー」ってムダじゃないですか?

インタラクティブな機能が前提となった昨今のWebサイト、アプリ制作の現場。
デザインの第一歩であるワイヤーフレームが「静止画で提出」なんて……、と感じています。

従来のパワーポイントやエクセルなどで作り込んだワイヤーフレーム。
クライアントにデザイン案を提出し、

「このページのこのボタンを押しますとこのページにリンクして…」

なんて資料を行ったり来たりしながらでは何とも伝わりづらい。

さらにプロジェクトが進むにつれ、似たような画面がいくつも存在し無駄が多かったり、膨大な資料に埋もれて検討が漏れていた要素が多発……、非効率な男はカッコ悪いぞっ☆(上からマリコですいません)

だから私はXDを使う

  • 従来の作成時間と同じ、もしくはそれよりも短い時間で「ワイヤー」と「プロトタイプ」を作成可能
  • より本物のWebサイトに近い状態でクライアントに提出できる
  • チームでの共有がらくちん
  • 操作がかんたんで学習コストが低い

XDのオススメ機能

Adobe XDにはデザインモードプロトタイプモードという2つのモードがあります。
実際に使ってみて「最高かよ」なオススメ機能を紹介します。

デザインモード

シンボル

シンボルは再利用が可能なオブジェクトです。
シンボルに変更を加えると、配置されたシンボルすべてにその変更が反映されます。

画像をポイ!っとするだけで

画像をあらかじめ用意しておいたシェイプにドラッグ&ドロップすると、シェイプ全体を塗りつぶすように画像が配置されます。

ちなみにフォトショップのようにトリミングができません(惜しい)

リピートグリッド

テキストと画像の組み合わせのように、リピートさせたい単位を選択して水平に、あるいは垂直にコンテンツを素早く繰り返すことができます。

XDといえばコレ!と言っていいぐらい、最強の機能です。フォトショップやイラストレータにも搭載してほしいですね。

プロトタイプモード

アートボード遷移

ボタン等のオブジェクトから任意のアートボードにドラッグして線を引いて、そのオブジェクトをクリックした時の遷移先を指定できます。

プレビュー機能

ウィンドウ内に表示された画面デザインをクリックしながら遷移の様子を確認することができます。
操作を録画しておいて、ビデオとして書き出す機能も付いています。

ついでにその他にも…

コメント機能

デザイナーがプロトタイプをオンラインでシェアした際に、Adobe IDでログインしなくても、ゲストとしてプロトタイプ上にコメントできます。

素早くフィードバックを受け取る事が可能になり、修正した後にわざわざ書き出してメールに添付して…などという面倒なこともありません。

モバイルデバイスでのリアルタイムプレビュー

モバイルデバイスにiOSとAndroid用アプリをDLして、USBケーブルでパソコンに繋ぎ、XDプロジェクトを開くだけで実機でのリアルタイムプレビューが可能。

スマホやタブレット上でプレビューを目の前で触ってもらいながら、フィードバックを聞いてその場ですぐ修正!なんてことができます。

おったまげ〜!ぶっ飛び〜!ですね。

XDのメリット・デメリット

メリット

  • 直感的なデザインが素早くできる
  • 複数人とデザイン構想を細かく共有できる
  • まだ改善段階なので今なら覚えることが少ない(覚えるなら今!)

デメリット

  • スライス機能や書き出し機能がまだ不十分
  • ガイドが引けない
  • パスワード制限などを掛けることができないのセキュリティ問題
  • Photoshop/Illustratorとの互換性が低い

XDの最新アップデート

ほぼ毎月のようにアップデートが発表されているXD。10月に正式版もリリースされ、力の入れようが伺えます。

詳しくはAdobe Creative Stationの記事をご参照ください。

さかんなXDコミュニティ

東京では「ほぼ毎月Adobe XD勉強会」というユーザーコミュニティさんが、最新アップデート情報や使い方のTIPSなどを共有する勉強会を開催していたりと、積極的な情報交換が行われています。

一度行ってみたいですね。

ほぼ毎月Adobe XD勉強会(仮)

まとめ

昨年のリリース直後から注目をしていて社内の制作物などで試用していたXD。

制作から実機確認、フィードバックまでが非常に効率的で便利なツールだと思いました。

周りでもディレクターの方などが使っているという声も聞きますし、いよいよ制作ツールの定番として浸透してくるのかなあという印象です。

そして正式版がリリースされたばかりなので「今からブレイクするバンドをインディーズから知ってるぜ」ようなドヤ感があります。

何言ってるかわからないですね!ではまた!

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。