Adobe XDでワイヤーフレーム制作するなら知っておくべき機能

Webディレクターの仕事において、非常に大きな比重が置かれるワイヤーフレーム制作。皆さんはどのソフトウェアを使っていますか？

多くの企業のPCに導入されているPowerPointをワイヤーフレーム制作に利用している方もいるかもしれません。Adobe XDといったワイヤーフレーム作りに特化した ツール を使うとより作業が楽になり便利になります。

今回は、Adobe XDでワイヤーフレーム制作するなら知っておくべき機能について特徴を踏まえつつ解説していきます。

Adobe XDとは

Adobe XDは、アドビ システムズ 株式会社が提供しているアプリケーションの1つです。Webサイトやモバイル アプリ のワイヤーフレーム制作、デザインに適したアプリケーションです。

PowerPointやIllustratorなどと同じ様に図形や文字、画像などを使って ページ の構成、サイトデザインを作成できます。

Adobe XDの特徴は、Webサイトやモバイル アプリ 画面のプロトタイプを作ることが可能なことです。Adobe XD内でデザインした ページ 同士をリンクで繋ぎ、 ブラウザ での動きをシミューションしたり、デザインした ページ 群を実際の ブラウザ でも確認できます。

作成したプロトタイプを URL で共有することができ、複数人で確認、またはクライアントと共有なども可能です。その他のスライド作成、文書作成、イラスト作成のツールと比べると、よりWeb制作に適した機能が充実しています。

Adobe XDはアドビ システムズ 株式会社の提供している アプリ 群、CreativeCloudに含まれています。コンプリートプランを利用している場合、すぐに利用を開始できます。また、単体プランでの利用も可能です。

Webディレクターなら使っておくべきAdobe XDの機能

Adobe XDにはワイヤーフレーム制作、Webデザイン制作に特化したユニークな機能が充実しています。次に、Adobe XDを導入した時、Webディレクターなら使っておくべき機能を解説していきます。

プロトタイプ機能

プロトタイプ機能がAdobeXDにおける1番ユニークな機能と言えるでしょう。作成した ページ 群を繋ぎ合わせ、実際のサイト内 リンク の動きをシミュレーションできます。

作成したプロトタイプを公開し、共有 URL を作成することで、 ブラウザ やスマホの実機などでも確認が可能です。Adobe XD側で設定した リンク をクリックすれば、実際のWeb ページ と同じ様に動作します。

これにより、実際のコーディングなどで HTML 化する前から、完成形をイメージしやすくなります。構成やデザインの段階で後から ブラウザ での動きをシミューションすることで、後々イメージと違うといった齟齬を避けることが可能です。また、共有したプロトタイプでは、各々がコメントを投稿することもできます。

アートボード

Adobe XDでは、1つのワークスペースに複数のページを並べて作成することが可能です。サイト上の全てのページを作って並べることで、サイト全体のワイヤーフレームを一つのワークスペースにまとめることができます。

また、アートボードのサイズは一般的な ブラウザ サイズ(1280x800、1980x1080など)や各種スマートフォンの画面サイズなどデフォルトで選択できます。 ブラウザ のサイズやスマホ版でデザインを変える場合にも、1つのワークスペースでまとめて管理できるのが特徴です。

リピートグリッド

リピートグリッド機能は、特定のオブジェクトのリピートを簡単に作成できる機能です。上図では「 タイトル 、画像、 テキスト 」の1セットを２x３で複製しています。

Webサイトの様に繰り返しのセクションが多いデザインを作成する際に非常に便利な機能です。

PowerPointからAdobeXDに切り替える際に気をつけるべきこと

Adobe XDとPowerPointを比較して、ワイヤーフレームを作成時におけるデメリットも考えてみます。

図形(オートシェイプ)が使えない

Microsoft Officeで使い慣れているような図形(オートシェイプ)を使えなくなるという点で不便に感じる方もいるでしょう。

Adobe XDで利用可能な図形は四角、丸、線の３つです。ワイヤーフレーム上で図解などをしたい際に、三角や矢印などの図形が標準装備されていない点は不便に感じるかもしれません。

対策としては、図を画像ファイルとして読み込むか、AdobeのCCライブラリから保存したグラフィックなどを呼び起こすといった方法があります。

Adobe ユーザー 以外とのファイル自体の共有ができない

ファイル自体を共有し手分けして作業したり手直しをしたいといった場合には、それぞれがAdobe XDのライセンスを所有している必要があります。当然ながらAdobe XDで作成したファイルは、Adobe XDを持っていないと開けません。

公開したプロトタイプの URL をシェアして ブラウザ で確認することは可能ですが、ファイル自体を操作できるのはAdobe XD ユーザー のみとなり、場合によっては不便と感じるかもしれません。

また、完成したワイヤーフレームをクライアントに対してファイルで提出しなければいけない場合もあります。その際には、PNGなどの画像ファイルかPDFの形式に変換すると良いでしょう。

利用にはライセンス費用がかかる

Adobe Creative Cloudを利用するにはライセンス費がかかります。Microsoft Officeはインフラとして最初に入れいている場合がほとんどですが、Adobeライセンスは誰もが標準で持っているわけではありません。

PhotoshopやIllustratorの利用頻度が低い場合は、ライセンス費を払ってまで利用するかを検討する必要があります。

まとめ：ワイヤーフレーム制作の効率化ができる

Adobe XDはワイヤーフレーム制作の効率化など、Webディレクターにとってに非常に魅力的な機能が揃っています。Adobe ユーザー であればまず試しに利用してみると良いでしょう。

ワイヤーフレームの「状態」だけで見せても、クライアント側に完成形をイメージしてもらえない、よく理解してもらえないといった課題がある場合には、プロトタイピングによって具体的なサイトイメージを伝えられるAdobeXDで解決できるかもしれません。