プロトタイプ制作ツールと言えばAdobe XD!特徴と基本機能!

プロトタイプ制作ツールと言えばAdobe XD!特徴と基本機能! Web

最近ではプロトタイプを制作するツールで人気を集めている「Adobe XD

この記事では頻繁にアップデートもされ益々使いやすくなった「Adobe XD」について、機能と特徴を説明していきます。

そもそもプロトタイプとはどのようなものでしょうか?

プロトタイプ(prototype)とは、製品開発を進める上で必要になるテスト品またはプログラムの試作版のことを言います。

今までは、IllustratorやPhotoshopでつくった「完成の見本」をもとに、チームメンバーやクライアントと顔を合わせて確認をするのが普通でした。

開発手法においては、要件定義、基本設計、詳細設計、プログラミング、テストの順に作業を進めるため、要件定義などの前工程ではシステムのイメージを把握しにくく、後工程のテスト段階に入って不具合が発見される場合があります。

不具合があった場合には要件定義や設計段階までさかのぼって開発を再修正しなければならないため、作業が停滞し遅延する欠点がありました。

しかし、近年では最初からページの移り変わりやアニメーションなどの動きを確認できる「サイトの立体模型」をつくり、チームで同時にUIを評価しつつデザインを進めていく「プロトタイピング」という手法が主流になってきています。

この方法をとることで、全員がユーザーの視点を共有でき、段階的に合意を得ながら進めていけるため、効率的な制作ができるようになります。

スポンサーリンク

プロトタイプ制作アプリと言えばAdobe XD!特徴と機能を説明!

①Adobe XDとは?

Adobe XDは、アドビ システムズ 株式会社が販売しているデザインとプロトタイプの制作ツールです。

Adobe XDには、webサイト、モバイルアプリ、音声インタラクション、タッチスクリーンのためのデザインとプロトタイプの作成に必要なすべてが揃っています。

例えば、各ページの動きやボタンリンクなどを設定して実際の操作を検討・検証することが出来ます。(プロトタイプ作成)

またWeb上に公開して、共有が可能となり、プロジェクトチーム内で修正箇所などのコメントを書いたり、クライアントと意見交換などが出来ます。。

Adobe XD利用プラン

Adobe XD CCが利用できるプランは3つあります。

※Adobe XD CCの「CC」とはクリエイティブ クラウドの略称で、アドビのクラウドを利用して、ソフト間の連携やストレージが利用できることを意味しています。

Creative Cloudで連携できるアプリの詳細はこちらをご覧ください。

Adobe XD CC 価格
スタータープラン 無料
単体プラン 月額1,180円(税抜)
コンプリートプラン 月額4,980円(税抜)

スタータープランでは、デザインとプロトタイピングに関するすべての機能が使用可能です。

作成できるXDドキュメントの数に制限はなく、作成したコンテンツを公開するためのデータをエクスポートしたり、作成したコンテンツの動作を共有するための動画作成も可能です。

※エクスポートとは作成したデータを、他のアプリケーションでも利用できる形式でファイルを保存する機能。

スタータープランと有料のXDプランやCreative Cloudコンプリートプランとの違いは、一度に共有可能なプロトタイプやデザインスペックが1つに制限される事や、ストレージ容量が2GB(有料プランは100GB)に制限されます。

また、フォントライブラリの「Typekit」も、一部のフォントセットのみ使用できます。

※デザインスペックとは、Adobe XDで作成したデザインの仕様を他の人にブラウザで共有する為の機能です。

②Adobe XDの機能と特徴

xd

Adobe XDの特徴

  • Adobe XDは、Webサイトやモバイルアプリ画面のプロトタイプを作ることが可能です。
  • Adobe XD内でデザインしたページ同士をリンクで繋ぎ、Web上での動きをシミューションや確認もできます。
  • 作成したプロトタイプをURLで共有することができ、複数人で確認、またはクライアントと共有なども可能です。
  • 他製品のスライド作成、文書作成、イラスト作成のツールを比べると、Web制作に適した機能が充実しています。
  • Adobe製品である、PhotoshopやIllustratorなどと連携が可能です。

UI/UXデザイン用プロトタイプ作成ツール

アプリやwebサイトなどのアイデアをすばやくプロトタイプにして開発を高速化できる、唯一のUI/UXデザインツールです。

デザインを作成、プロトタイプ化、デザインスペックを開発チームに送信すれば、すばやくフィードバックを集め、反映できます。

シンボル機能

シンボルはWEBサイトのヘッダー、フッター、サイドバーのようにどのページでも固定して配置される項目を作る時に利用される機能で、全てのページのシンボルを一括で変更することができます。

例えば、複数あるページのヘッダーを一部分だけ変更しようと考えています。

その場合、全ページのヘッダーを変更させなくても、基のページを変更させるだけで全てのページが変更されます。

リピートグリッド

リピートグリッド機能とは、見出しやテキスト、画像などを1セットと考え、それらを複製する機能です。

リピートグリッドボタンを押すだけで、増やしたい方向にドラッグして簡単に複製できます。

画像やテキストでリピートグリッド機能を使うには

  1. 基となる要素を作成する
  2. グループ化した要素を選択する
  3. リピートグリッドボタンを押すと要素の周りに枠が出てきます。
  4. その端を引っ張ることで複製させることができます。

増やしたい方向に引っ張ると簡単に複製が出来る。

さらに、各要素は等間隔なっており、間を選択すると幅を操作することが出来ます。

画像のドロップ配置

リピートグリッドで複製した要素に画像を1つにドラッグすると、画像が自動的に切り取られて配置されます。

そしてすべての画像を選ぶと、画像1つ1つがそれぞれに配置されます。

そのため、複数の画像を配置したい時は、ドラッグ&ドロップが簡単です。

さらに、リピートグリッド機能と組み合わせることで複製させた要素の全てに反映させることも可能なので非常に便利です。

アセットパネル

※アセットとは英語で「資産」や「資源」「財産」といった意味の語であり、IT関連の分野では「資産」と呼び得るデータを指して用いられることのある言い方である。

登録されている要素を右クリックして「カンバスでハイライト」を選択すると、カンバス上でそのアセットがハイライトされるようになり、使われている箇所が簡単に確認できます。

また、カンバス上で要素を右クリックし、「アセットのシンボルを表示」や「アセットの文字スタイルを表示」すると、アセットパネル上でハイライトされます。

※カンバスとは画像ウィンドウ内にある、既存の画像周りのワークスペースのこと。

例えば、デザイン制作で色の数を3つか4つに限定して作ることが多いと思います。

メインカラー、サブカラー、アクセントカラーなど、何度も使用する色は左側のアセットパネルに登録しておくことで、クリックひとつで他の要素にも適用できます。

カラー以外にも、文字スタイル(ヒラギノ角ゴなど)も登録することが可能です!

インターネット上で共有

画面右上の「デザインスペックを公開」ボタンを押すことでネット上のクラウドサーバーにファイルをアップロードでき、離れていてもチームメンバーやクライアントと共有が出来ます。

また、共有する際にパスワードを設定することもできるためセキュリティの心配もありません。

さらに、共有画面ではコメント機能もついているので、遠隔でデザインの修正点を指摘したり追加の要望をしたりできます。

・Adobe XDを学ぶ!

Udemy のオンライン講座では「Adobe XD」の基礎という入門講座があるので、一から学びたい人にはオススメです。

・まとめ

Adobe XDはプロトタイプ制作をするのに優れているため、Webディレクターにとっては魅力的な機能が揃っていると思います。

また、Adobeユーザーであれば他のソフトとの連携も出来るので作業効率も上がります!

さらにはAdobe XDは早いペースでバージョンアップがされているので、常に最新の機能を使うことができます。

おすすめオンラインスクール
1,300円から学べるUdemy
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
Web
スポンサーリンク
シェアする
CreaveGraffitiをフォローする
Creavegraffiti | Webマーケティング情報

コメント

タイトルとURLをコピーしました