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サイトの様に繰り返しのセクションが多いデザインを作成する際に非常に便利な機能です。