UI/UXデザイン界の新しい風!Adobe XD CCを便利に使い倒す!

  • このエントリーをはてなブックマークに追加

UI/UXデザインがラクラク!カンプデータが簡単に作れる Adobe XD


サービスを立ち上げる時、まずは、画面の仕様や動作遷移の確認に、画面の設計を行うと思います。
いわゆるプロトタイプですね。(より完成品のイメージがしやすいよう、紙芝居のようなものを作ります。)

  • iPhoneアプリ
  • Andoroidアプリ
  • Webサービス など…

AdobeXDは、プロトタイプが簡単に作成できるアプリケーションです。
操作が非常に直感的で、画像をドラッグドロップするだけでマスクされたり。
必要最低限のデザイン機能なので、ノンデザイナの人でも扱いやすいです。
完成品をを共有するのも簡単。


さらに、AdobeCCのプラン内に含まれているため、現在CCを契約中の方は追加料金などは不要で使用できます。これは使わない手はない、といった感じです。
Sketchもいずれ不要になってしまうんでしょうか。



AdobeXDの操作感

オブジェクトの配置

AdobeXDを触ってみると、ガイドの表示がとても丁寧です。

02gif
余白の調整が簡単。どこの要素から何pxかまで、ていねいに表示されます。



画像のマスクもドラッグするだけ

写真を丸く切り抜きたい時も、円形のオブジェクトを作り、その上にコンピューター上の画像をドラッグドロップするだけです。

03gif


同じ要素を並べたい!リピートグリッド機能

一覧画面などは、同じ要素が複数並びます。
そんな時にはリピートグリッド機能が便利です。

04gif

スクロールの設定

スクロールの設定をして、アートボードを縦に伸ばすだけでスクロールの設定になります。

05gif

画面遷移の設定を行う

画面遷移の設定も簡単です。線をつなげてアニメーションを設定していくだけ。

06gif


プレビュー

こちらが完成品。すぐにプレビューできます。(Flashを作っていた時のよう!)

07gif

完成品を共有する

プロトタイプが完成したら、完成品を共有することができます。

01gif とってもカンタン。

URLはCreativeCloudで出力されます。
共有後にコメントのフィードバックを受けて同じURLのままファイルを更新できます。
閲覧にパスワードをかけることも可能です。

削除する際は、Creative Cloudのマネージャから、[アセット]>[ファイル]で確認できます。
出先からはブラウザからAdobeのアカウントでログインすれば同じ操作ができます。

手元の実機で確認

AdobeXDにはiPhone、Androidの両方にプレビュー専用のアプリがあります。
CreativeCloudを介して確認することもできますし、実機をUSBで接続して都度落として確認することもできます。(こちらはMacのみ対応機能)

アプリが無くても、前項の共有URLを使用すれば確認できるようなので、クライアントにささっと確認してもらうなんてことも可能です。

Illustrator、Photoshopとの連携

リリース時にはIllustratorやPhotoshopとの連携がイマイチという評判がちらほら聞こえていたのですが、
先日アップデートされsvgやpdfでの出力が可能になりました。

プロトタイプ完成後のデザインワークも、きちんと行えます。


====

Adobe XDが現場で使用されていく機会は今後どんどん増えていくと思います。CCをご利用中の方は気軽に試せると思うので、ぜひ一度使ってみてください。





執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

マークアップ

背景に画像や動画を置いてパララックス効果で見せる

サイトを作っているとスクロールした時に背景画像などを固定させておきたい、パララックス効果を使いたいという時があると思います。 簡単なものであれば簡単なcssで実現できます。 目次1 背景画像をパララックス効果で見せる1.1 DEMO1.2 HTML1.3 CSS 背景画像をパララックス効果で見せる DEMO See the Pen Untitled by kkdd (@kk8kk) on CodePen. なんとなくよく見る感じの表示になっていると思います。 HTMLとcss […]

スマホアプリ

Android Studioでベクター画像を登録しよう

Androidアプリを作成しているとアプリ内のアイコン画像を追加したい、ということありますよね。 そんな時は画像の解像度を気にせず使用できる、ベクター画像を使用すると便利です。 Android Studioでは、ちょっとした手順を踏めばベクター画像をdrawableリソースの中にxmlファイルとして生成してしてくれます。 簡単なので、早速進めてみましょう。 目次1 Android Studioを開こう2 ベクター画像の登録画面を開こう3 クリップ・アートで登録してみよう4 ロ […]

マークアップ

属性セレクターを使ってファイルごとにアイコンをつけよう!

例えばpdfのアイコンをつけたいときに『pdfIcon』をというclassをつけて表示させる、という方法があります。 ただ動的に表現したい場合などにちょっと不便だなと思うこともあるかと思います。 そんな時は属性セレクターを使ってファイルごとにアイコンをつけることができます。 早速属性セレクターを使ってみよう 属性セレクターはを使えば指定された値が存在していたら指定されたcssを適用する、という感じの動作をしてくれます。 書き方としては「属性$=”値”」 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。