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.jpg

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

adobexd-2.jpg

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

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

アートボード

adobexd-3.jpg

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

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

リピートグリッド

adobexd-4.jpg

リピートグリッド機能は、特定のオブジェクトのリピートを簡単に作成できる機能です。上図では「タイトル、画像、テキスト」の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で解決できるかもしれません。