Adobe XDで仕様書・指示書を書く方法まとめ

Adobe XDで仕様書・指示書を書く方法まとめ

  • このエントリーをはてなブックマークに追加

Adobe XDがアップデートされてどんどん使いやすくなっていますが、XDを使っているとどのように書こうかと少し迷うのが仕様書・指示書の書き方です。社内だけで共有するなら、アートボード外にでも仕様を書き込めばいいのですが、ブラウザ上で仕様をクライアントにも共有する場合にはこの方法だと機能しません。

そんなわけで、XDの仕様の書き方についていくつかの方法についてのメリット・デメリットについてまとめてみました。

関連:Adobe XDのキートリガーでプレビュー画面の移動を爆速にする方法

目次

アートボード外に書く

一番思いつくのは、このアートボード外に仕様や指示を書き込むことでしょう。
Adobe XDの仕様書の書き方/アートボード外に書く

メリット

  • 手軽に書き込める
  • 社内で共有しやすい

デメリット

  • ブラウザで共有した場合やプレビューでアートボード外の仕様が表示されない
  • PC向けデザインで画面内のボタンなどの要素が多い場合には、細かく指示しづらい場合がある
  • アートボード外からアートボード内に線を引いて細かく指示をしようとすると見づらくなる

アートボードを拡張する

続いては、アートボードを拡張する方法です。下記のサンプルだとiPhone 6向けサイズの枠を追加し、右横にアートボードの幅を拡張しています。これにより、レイアウト構成を確認しつつ、ブラウザやプレビュー上でも仕様を確認することができます。
Adobe XDの仕様書の書き方/アートボードを拡張する

メリット

  • ブラウザやプレビュー上でも仕様を確認できる
  • 社内・社外で共有しやすい

デメリット

  • レイアウト構成や導線への集中を阻害する恐れがある
  • スマホの場合には、実サイズで確認できなくなる

マスターコンポーネントを利用する

続いてはマスターコンポーネントを利用する方法です。

まずは前準備をします。下記のように「長方形」と「エリア内テキスト」を一つにしたマスターコンポーネントを作成します。「エリア内テキスト」はレスポンシブを手動で上下左右を固定します。
Adobe XDのマスターコンポーネントを編集

そしたら、マスターコンポーネントをコピーしてアートボードのそれぞれ配置します。これが基本です。
Adobe XDのマスターコンポーネントをコピーして指示を書く

仕様が邪魔な場合は、マスターコンポーネントをダブルクリックで編集モードにして、すべてのオブジェクトを選択した状態で不透明度を0にします。
Adobe XDのマスターコンポーネントの不透明度を下げる

するとコピーしたコンポーネントはすべて非表示になりますので、これでレイアウト構成や導線に集中できます。
Adobe XDのコンポーネントを活用した仕様書

メリット

  • ブラウザ上、及びプレビューで仕様が確認できる
  • 細かく指示が書き込める
  • ファイル共有のみでも可能な場合の社内プロジェクトに向いている

デメリット

  • ブラウザ上で確認して貰う場合には、マスターコンポーネントを編集する手間がいる
  • プロジェクトそのものをコピーしてマスターコンポーネントの表示版、非表示版を作成するのも手

Web上のコメント機能を利用する

使い方が少し違うかもしれませんが、共有リンクを作成したWeb上のコメント機能を利用するのも手です。
コメント機能を利用したAdobe XDの仕様書

メリット

  • ブラウザやプレビュー上でも仕様を確認できる
  • 社内・社外で共有しやすい
  • 仕様の変更を把握しやすい

デメリット

  • 制作サイドが画面の切り替えをしながら確認作業をする必要がある

オーバーレイを使う

最後はオーバーレイを使う方法です。メインのアートボード横に仕様用のアートボードを追加して、プロトタイプモードでボタンをタップしたらオーバーレイを表示させる設定をすることで簡単に仕様の表示切り換えをできるようにする方法もあります。
Adobe XDのオーバーレイを使って仕様書作成

Webやプレビューした際には、仕様ボタンクリックで簡単に仕様や指示の表示切り替えが簡単にできるようになります。
Adobe XDのプレビューで仕様を表示

ボタンが邪魔な場合は、半透明にしてキートリガーで操作できるようにするといいでしょう。
Adobe XDのキートリガーでプレビュー画面の移動を爆速にする方法

メリット

  • 社内・社外で共有しやすい
  • 指示を細かく指定できる

デメリット

  • 画面数によってはアートボードの数が多くなる
  • 指示内容の位置調整をしてオーバーレイのアートボードに貼り付ける手間が必要

以上、5パターンによる方法を紹介しましたが、どれもこれも一長一短があります。Adobeさんが、そのうちアップデートでさらに便利な仕様書を書くための機能を追加してくれる日を待ちたいと思います。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

ビールが好き。 でも最近はワインと日本酒もいいなぁと思える今日この頃。

関連するSONICMOOVのサービス

Webデザイナー募集!

イラストーレーター募集!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter

Webデザイナー募集!

新着の記事

mautic is open source marketing automation