Adobe XDをもっと使いこなすヒント！ 第28回 Photoshopユーザーのためのデザインスペック入門
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、特別編として、Phtoshopユーザー向けに書かれたデザインスペックについてのブログ記事の内容を元に、デザインスペックの主要なメリットを紹介します。
メリット 1. 仕様を自分で作成する必要がない
デザインスペックは、デザイン仕様書をXDが自動的に生成してくれる機能です。Photoshopの作業が終了したら、まずPSDファイルをXDに読み込みます。あとは、アートボードを選択してパブリッシュすれば、上の図のように、レイアウト情報やフォント情報を表示するWebドキュメントが自動生成されます。この手順なら、開発者のための仕様を、ひとつひとつ自分の手で書き込む必要はありません。
デザインスペック公開後にデザイン修正が行われた場合は、パブリッシュし直すことにより、デザインスペックを最新の状態に更新できます。
メリット 2. 簡単に共有できる
デザインスペックは数クリックの操作だけで共有リンクを生成できます。
- まず、画面右上の「共有」ボタンを押して、開発のための共有を選択
- パネルが開いたら、「リンクを作成」ボタンをクリックしてURLを生成し、パネル上部のアイコンをクリックしてリンクをコピー
開発者は、送られてきたURLをブラウザで開くだけでスペックを確認できます。特別なソフトウェアは必要ありません。
リンクを保護したい場合は、共有パネルの「パスワードを設定」をチェックすると、パスワード入力フィールドが表示され、URLにパスワード認証をかけることができます。
さらに厳密に管理したい場合は、メールで招待された相手だけに公開することもできます。その場合は、共有パネルのプルダウンから「招待されたユーザーのみが閲覧できます」を選択します。「招待」タブをクリックすると、メールアドレスを入力するフィールドが表示されます。
メリット 3. 開発者のためにアセットを書き出す必要がない
出典: UI8によるUIキット
開発者は、デザインスペックから自分で必要なアセットを選び、SVG, PNG, PDFなどの書き出し形式を指定してダウンロードすることが可能です。デザイナーは、事前に共有したいアセットを選択しておけば、その先は開発者任せにできます。
共有したいアセットの選択は、レイヤーパネル内で行います。アセット名の右に配置されているアイコンの中から、「書き出しマークを追加」をクリックします。
共有する際に、共有パネル内の「ダウンロードにアセットを含める」オプションをチェックして、「書き出し先」ドロップダウンから対象のプラットフォームを選択すると、XDが共有時にアセットを自動生成するようになります。
メリット 4. コメント機能を使ってレビューができる
「コメントを表示」アイコンをクリックすると、コメントパネルが開きます。コメントパネルでは、入力フィールドにテキストを入力してフィードバックを伝えたり、他の人のコメントを確認することができます。パネル右上には、アートボードへの未解決のコメントの数を示す数字も表示されます。
アートボード内にピンを置いて、どの場所に対するコメントであるかを示せます。コメントをピン留めするには、入力フィールド右端の「ピン留めする」をクリックし、アートボード上のコメントに関連する場所をクリックします。ピン留めされたコメントには番号が割り当てられるため、アートボード内のピンとコメントパネル内のコメントの関係を簡単に把握できます。
メリット 5. 全体の流れを確認できる
出典: UI8によるUIキット
XDが生成したリンクを開くと最初に表示されるのが「UXフロー」ビューです。このビューでは、すべてのアートボードを画面上に表示できます。また、カーソルをアートボード上に移動して、画面間に設定されているフローを確認することもできます。アートボード数が多い場合は、Cmd/Ctrlキーを押しながらマウスホイールを使って表示を拡大縮小したり、名前で検索して表示したりもできる、開発の全体像を伝えるのに便利なビューです。
アートボードをクリックすると、詳細なスペックビューに移動します。UXフロービューに戻るには、画面上のパンくずリストを使います。アートボードが選択された状態では、矢印キーを使ってアートボード間を移動し、Enterキーでスペックビューに移動、EscキーでUXフロービューに戻るという操作が可能です。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！