Adobe XDを使って効率的なUI制作にチャレンジ!

Adobe XDを使って効率的なUI制作にチャレンジ!

Adobe XDとは?

Adobe XDは、Adobe社が提供する、プロトタイピング制作ツールです。正式には、Adobe Experimental Designの略で、2017年7月現在、まだベータ版のソフトウェアです。

プロトタイピング制作ツールとは?

WebデザインやスマホアプリのUIデザインにおいて、画面の遷移まで考えたデザイン制作ができるツールのことです。これまでのWebデザイン制作プロセスだと、PhotoshopやFireworksといった、グラフィック作成ツールでは、1画面の設計やデザインは可能でした。

しかし、グラフィックツールでは、画面間の遷移まではアプリケーション上で定義できません。実際にアンカーやボタンをクリックするとどのように遷移するか、ということは「実際にコーディングしてみないと分からない」というのが課題となっていました。

プロトタイピング制作ツールでは、画面同士との遷移まで紐付けてデザインすることが前提となり、よりスムーズで実際のWebやアプリに近いUIや画面設計を行うことができます。

Adobe XDは、このプロトタイピングを行うツールとしてAdobeから公式に発表されているもので、Adobe以外からも、下記のようなソフトウェアが提供されています。

  • Prott
  • Marvel
  • CanvasFlip
  • OrigamiStudio

などがあります。これらと比較してAdobe XDを利用するメリットとしては

  • 単体のアプリケーションとして利用できる(ProttやinVisionなどは、sketchやPhotoshopのプラグイン)
  • Adobe製なので、PhotoshopやIllustratorに慣れている人にとっては学習コストが低い

などが挙げられるでしょう。

Adobe XDの使い方

インストールするには?

Adobe XDをインストールするするには、まずAdobeアカウントが必要です。Adobeアカウントをお持ちでない方は、作成しましょう。

次に、Adobe XDのサイトへ行き、ダウンロードします。現時点では、まだベータ版(2017年7月現在)ということもあり、無料で利用できます。

ダウンロードしたインストーラーを利用し、インストールを済ませます。

起動すると下記のような画面になります。

画像

いかがでしょうか? うまく起動しましたか?

実際に、WF(ワイヤーフレーム)のプロトタイプを作ってみる

Adobe XDはPhotoshopやIllustrator譲りの優れたグラフィック機能を、部分的に備えています。従って、XDだけで、コーディングに出せる品質のデザインデータを作ることは可能です。

しかし、プロトタイピングという名前の通り、そこまでつくり込む前に、Webやアプリの全体像を把握したり、画面遷移を確認するツールとして使うことが多いと思います。

個人的には、サイトのWF(ワイヤーフレーム)を作ることに優れていると考えており、WFはいつもXDで作成しています。

ここでは、ごく小規模なサイトのWFを作成してみましょう。

トップページを作成する

新規作成画面で、「Web(1920×1080)」を選択します。ここで選択する画面サイズは、好みに応じて変更できます。(その場合は、カスタムを選択)

画像

1920ピクセル×1080ピクセルのアートボードが作成されているので、左メニュから、矩形やテキストツールを利用して、レイアウトを作って行きます。このあたりの操作は、IllustratorやFireworks、PowerPointに慣れている人なら、戸惑うことはないでしょう。

画像

各オブジェクトは、右パネルにある各種設定項目で

  • 位置とサイズ
  • 塗りと線の色
  • 整列

などを制御することができます。

便利な機能

グループ化

画像

この手のグラフィックツールでは基本ですね。複数のオブジェクトを組み合わせて、一つのアイコンやロゴ、見出しのかたまりを作る時に、設定すると良いでしょう。このスクリーンショットでは、右クリックから設定しています。

シンボル

XDには、シンボル機能があります。IllustratorやFireworksをお使いの方には、お馴染みですね。サイトやアプリの中で、複数箇所で使い回すパーツは、シンボルにしておくと便利です。後から変更が入った場合、シンボルを変更するだけで、すべての箇所の変更が適用されます。

この記事の作例では、右クリックからヘッダーとフッターをシンボルに設定しています。

リピートグリッド

画像

UIデザインにおいては、同じレイアウト設計のものが、複数個同時に表示されたり、繰り返し表示されることもあります。その場合は、1つのレイアウトを作った後で、リピートグリッド(ショートカットは、Command+R)を設定すると、ドラッグ&ドロップで、簡単に複製することができます。

オブジェクト間の間隔は、あとから変更できます。間隔上でマウスポインタを置くと、ピンク色にハイライトするので、そこでドラッグ&ドロップし、調整します。

この記事の作例では、新着情報の一覧に、リピートグリッドを適用しています。

下層ページを作る

続いて、下層ページを作成します。いくつか作り方のアプローチは考えられますが、今回は、既に作成したトップページを複製することとします。

  • トップページのアートボードをダブルクリックし、トップページのアートボードを選択
  • Command+C→Command+V(コピペ)

画像

上記手順で、トップページのアートボードを複製できます。

今回は、ヘッダーとフッターはトップページのものと共通にしたいため、ヘッダーとフッター以外のオブジェクトを削除し、下層ページのコンテンツを作成していきます。今回の作例では、まずサービスのページを作ることとします。

画像

サービスのページでは、

  • トップページの「Feature」と呼ばれる部分を流用
  • サービスのレイアウトに改変後、シンボル化
  • リピートグリッドを設定

することにより、約2分程度でレイアウトを起こしています。

Adobe XDの醍醐味? プロトタイプモードで、画面遷移を設定しよう!

画像

ここからは、いよいよXDの魅力的な機能でもある、プロトタイピングを設定してみましょう。

「トップページ」のアートボードで、ヘッダーのナビ項目である「サービス」をクリックします。すると、青いタブが表示されるので、右端をドラッグし、「サービス」のアートボード上で、マウスを離します。

画像

これの作業は「サービス」というエリアをクリックすると、サービスのアートボードに遷移するという設定になります。

では次に、同じように「サービス」からトップページへの導線を作ってみましょう。「サービス」のアートボード上で左端の「LOGO」をクリック、タブから「トップページ」のアートボードまで、線をつなげましょう。

画像

これで、トップページとサービスのヘッダーをクリックすれば、それぞれのページ(アートボード間)を遷移する設定が出来ました。

実際に画面遷移する様子を試してみる

画像

XDウインドウ右上端にある右向き三角ボタンをクリックします。

するとプレビューウインドウが立ち上がります。ヘッダーの「会社概要」と「ロゴ」をクリックしてみてください。

それぞれのページ間を遷移する様子が確認できると思います。プレビューウインドウ右上の●ボタンを押すと、プレビューの録画をすることも出来ます。画面の遷移する様子を.mp4形式で書き出すことができるので、チーム間で遷移の様子を共有したい時に便利です。

画像

Web上で、XDで作成したプロトタイプを共有する

XDウインドウ右上端にある、共有ボタンをクリックすると、ポップアップメニューが出るので、「リンクを作成」をクリックします。しばらくすると、URLが出力されるので「リンクをコピー」ボタンを押し、WebブラウザにURLをペーストし、開いてみましょう。

画像

画像

先ほどまでXD上で作成していたWFが、Webブラウザ上で表示されています。プロトタイプで設定した、リンクの遷移も、再現されています。

この機能を使うと、チームやクライアントに対して、作成したWFやデザインを、ファイルに出力せず、URLで共有することができるので大変便利です。

Web共有のデメリット

ただし、デメリットもあるのでお知らせしておきます。

  • Basic認証などのパスワード制限がかけられない
  • テキストも画像になってしまう

あくまでプレビュー用途であることを踏まえておいたほうが良いでしょう。セキュアにやりとりする必要がある場合は、Web共有でなく、ファイルに出力して、パスワードをかけた.zipファイルにするか、パスワードをかけられるファイル共有サービスを使うやりとりが必要でしょう。

なお、ファイルでの出力は、

  • PNG
  • SVG
  • PDF

が、選べます。

PhotoshopやIllustratorと比較してのメリットデメリット

私自身、PhotoshopとIllustratorでWebデザインをしてきた経験があるので、その上での比較を書いてみたいと思います

メリット

Webに特化している

Webは、レイアウトの繰り替えしが多かったり、複数の箇所で同じパーツの使い回しが多いです。Illustratorにもシンボル機能があったり、Photoshopにもスマートオブジェクトやリンク機能がありますが、XDはよりWeb的な発想で使い回しがしやすいようになっています。

軽い

ベータ版なので「今のところは」ですが、PhotoshopやIllustoratorよりも起動が早く、操作も軽快です。

共有が楽

Webでの共有が一発で出来るので、作業を終えてからチームやクライアントへの伝達が非常にスムーズになりました。これまでだと、作業を終えてから、適切なフォーマットでの書き出し(PNGなのPDFなのか…)、メールへの添付、送信という手段を踏んでいました。XDだと、作業終了後は、Web共有を終えて、URLをメール等で共有するだけなので、大変楽です(パスワード制限が必要ない場合)。

デメリット

グラフィック機能にはまだまだ課題が多い

PhotoshopやIllustratorに比べると、まだまだグラフィック機能は貧弱です。「PhotoshopやIllustoratorだと当たり前に出来るのにXDだと出来ない」ということも多いので、結局ある程度以上グラフィックを作り込もうと思うと、PhotoshopやIllustratorのお世話になるでしょう。

あくまでWF作成ツールか、プロトタイプ制作ツールであり、実際のグラフィック制作は、Photoshopでやる、という割り切りにおいて使うのが良いかもしれません(今のところ)。

ベータ版としての使用期限がある

ベータ版のため、1つのバージョンに対して、使用期限が設定されています。とはいえ、再び新しいバージョンをダウンロードし直すと再び使えるようになるので、使い続ける上では問題ないでしょう。ただ、XDを使って顧客先でプロトタイピングの実演をしたりしたい! という時に限って期限切れにならないよう、事前に気をつけておく必要はあります。

テキストを拾う機能が弱い

これは、WFとして作成する場合に顕著になると思います。OKの出たテキストをXD流しこみしても、PDFやWeb共有しても、そこからはテキストとしてコピペすることができません。テキストとして拾うには、拾う側もXDのインストールが必要で、XDファイルの受け渡しが必要となります。

せっかくXDファイルをマスターデータとして、PDFやWeb共有といった、スマートな共有方法があるにもかかわらず、ここの部分だけは、マスターデータのやりとりが必要となり、個人的にはかなり不満です。今後のバージョンアップで、改善を期待します…。

まとめ:本番のデザインには課題あるも、プロトタイプやWF程度であれば、サクサク使える

いかがでしたでしょうか。私自身、WFはXDがないと作りたくないぐらい、XDの魅力に取り込まれています。なんといっても、サイト内で使うパーツを1度作ってしまえば、後からの使い回し自由度が高い、というのが魅力的です。

例えば、20ページあるサイトがあったとして、WF作成に1ページあたり15分かかるとします。すると、20ページ×15分ということで、300分、5時間程度かかるだろうか… という見積りをします。

しかし、実際には、最初の1ページで、ヘッダーとフッター、その他のページで使い回しの聞くパーツを作っておけば、後のページになればなるほど、1ページあたりの制作時間が短くなっていきます。

以前のWF制作ではPowerPointなどを使ってWF制作していましたが、Webに特化した機能(シンボル、リピートグリッド)などのおかげで、ページ数の増えるサイトになればなるほど、WFの制作時間が短くなっていきました。

一方で、PhotoshopやIllustratorを使ったことのあるデザイナー目線としては、XDはまだまだ作り込み機能が弱いので、本番のカンプ作成用としてはXD単体では成立しません。

使いどころを考えて、うまくXDを活用し、効率的なUI制作にチャレンジしてみてください。

PR_infeed

PR_Relative

オウンドメディア運営会社の皆様へ

s

ページトップ