デザインの効率を上げるAdobe XDの画面設計と考え方

みなさんこんにちは！デザイナーの井斉です。

突然ですが、みなさんはデザインファイル内で作成中のデザインをどのように管理していますか？毎度「今回こそは最後まで綺麗に管理するぞ！」と意気込むものの、ページ追加、変更・修正対応などが重なってくると全体像が手に負えなくなり、だんだんとカオスな状態に…。そんな経験、誰もが一度や二度はあるのではないでしょうか。

今回はそんな「デザインファイルのデザイン」に着目して、今私が考えているベストプラクティスをまとめていこうと思います。基本1プロジェクトに1デザイナーの体制で取り組んだ受託制作の例を扱っているので、似たような立場の方や新人さんの参考になれば嬉しいです。

普段1つのファイルに内包しているもの

1プロジェクトごとに、だいたい以下のような要素を管理しています。

• プロジェクトサムネイル
• アートボードサイズ・使用グリッド記載エリア
• テイストイメージの展開エリア
• サイトマップ・ページ設計エリア
• コンポーネント・ページレイアウトまとめエリア
• アセット一覧

※以降のスクリーンショットはアップルップルサイトや社内用のXDファイルのものを使用しています。

プロジェクトサムネイル

これはAdobe XDならではのちょっとした工夫です。Adobe XDでは、アプリケーション起動時にファイル内の一番左上にあるアートボードがサムネイルとして表示されるようになっています。しかし規定の正方形に収まる形で縮小されるので、一覧で表示した時にお目当てのものが見つけにくいこともしばしば。そのため、正方形のプロジェクトサムネイルを用意しています。

ちなみにこのサムネイルが用意されていても、ファイル内の別の箇所で共有リンクが作成されればそのリンク内の一番左上のアートボードがサムネイルに置き換わってしまうので、これを取り入れる際はサムネイル単体で共有リンクを発行する必要も出てきます。

アートボードサイズ・使用グリッド記載エリア

ファイル上の画面設計において一番最初に取り組みます。弊社はたいてい情報量の多い更新型のWebサイトを扱うので、Bootstrapなどでお馴染みの12分割のグリッドを使い、フレキシブルな画面設計をすることが多いです。そのグリッドがデバイスの幅によってどのように変化するかのシミュレーションも兼ねて、デザイン基準幅以外でも目安になるブレイクポイントでいくつか用意しています。

余談ですが、モバイルサイズのアートボードは幅375pxが標準となっているところ、ちゃっかり376pxに変更して使っています。実機プレビューでもさほど影響が出ず、画面分割時の数字も綺麗にできて便利です。

テイストイメージの展開エリア

トップページやファーストビューを想定してテイストイメージを複数展開するためのエリアです。お客様との方向性のすり合わせが主な目的なので、ここではあえてカラーやコンポーネントなどのアセット管理は気にせず、真っ白なアートボードに手放しで発想を広げていきます。

サイトマップ・ページ設計エリア

Webデザイン工程において8割以上をこのページ設計に費やしています。パソコンとスマホのアートボードは、エンジニアさんがファイルを見た時に効率よくそれぞれの違いを確認できるよう、標準の70px間隔で並べて配置しています。

これに加えて、サイト構成に関してお客様から事前にPDF資料などをいただいている場合は、XDの画面上で同時に確認できるようにAcrobatで画像化して並べています。このようにすることで、打ち合わせ時に画面を共有しながら「資料に記載のあるこちらの箇所をこのように反映しています。」などと伝えやすくなります。

また内包コンテンツ名や該当ページ名は、アートボード上にバーのような形で設置しています。以前はただの長方形のオブジェクトで用意していたのですが、アードボードの再配置が必要になった時にアートボードと一緒にドラッグで移動できず少し不便に感じたので、今はこれらもアートボードとして用意しています。ちなみにアートボード自体にレスポンシブリサイズを適用すると、横幅を伸ばした時にテキストが自動で中央にレスポンシブ配置してくれて気持ちいいです。

コンポーネント・ページレイアウトまとめエリア

正直プロジェクトの規模感や保守体制により取り組み具合はまちまちです。ただクリックエリアを伴うコンポーネントはhover効果などの用意も必要なため、基本的には洗い出して一覧化しています。

またフォーム画面は例外的にページフッター下にそのままコンポーネントステートを一覧化しています。理由としては、使用ページが限られていること、デザイン時にコンポーネントの参照がしやすいこと、実装時に確認が容易なこと、フッターより上の画面までを表示すればページビジュアルの確認においてもさほど影響がないことなどです。

アセット一覧

favicon、noimage、メインビジュアルなどを用意します。これはIllustratorで作成することも多いので、Adobe XD上ではあくまで配置イメージのみです。弊社ではSNSシェアの画像などがシミュレーションできるプロジェクトテンプレートを用意しているので、そこに画像を当てはめて最終確認をすることもできます。

デザイン作業の効率化は「アセット機能」と「レイアウト機能」で

さて、ここからはもう少し細部にフォーカスして、効率のいいデザインファイルの管理方法を考えていきましょう。

デザイン及びデザイン思考は本来「効率的」とは真逆のアプローチを指す言葉なので、これらの言葉の組み合わせに少し違和感を覚える方もいらっしゃるのではないでしょうか？（かくいう私もそうです＾＾；）そのため、はじめにこの記事で扱う「効率的」の意味を定義しておきたいと思います。

私は、Webサイトのデザインフェーズにおける効率の良さは以下のような部分が大きいと考えています。

• 頭に思い描いたものや浮かんだアイデアなどを具現化する時の「素早さ」
• 後工程において広範囲に一括変更が入った時の反映の「素早さ」

まとめると、頭をうごかすことなく手で調整するような部分に対するスピード感ですね。

Adobe XDでこれらを配慮しようとすると、カラーやコンポーネントなどの「アセット機能」、そしてスタックやパディング、レスポンシブリサイズなどの「レイアウト機能」をうまく活用していく必要が出てきます。現時点で私が実践しているのは次のようなものです。

カラー

弊社で使っているScss変数を基準に命名しています。最近アップデートではカラーのサブグループ機能が搭載されたので、「color-primary」などとフォルダを作って管理することも増えてきました。

以前はぱっと見でカラーコードが読み取れない部分が気になり命名していなかった時期もあったのですが、久しぶりに過去の案件のファイルを開いた時にどんな法則でカラーリングをしていたか分からず困った経験をしてから、アセットでも命名をするように心がけています。

コンポーネント

「エンジニアさんには実装が必要なコンポーネントをしっかり伝える」をモットーに、ファイル内ではデザイナーファーストでかなり大胆に活用しています。規模感により様々ですが、フルリニューアル案件であれば1ファイルにつき200コンポーネント以上は作っています。

また登録する単位についても長いこと検証&改善して、今は次のようなグループに落ち着きました。

1. 同じスタイルを複数回使うグループ
2. 同じデータを複数の箇所で使うグループ

例えばフッターにおいては、テキストリンクやSNSアイコンなどを「同じスタイルを複数回使うグループ」としてコンポーネント化、さらに全ての実データが入っている大きな単位を「同じデータを複数の箇所で使うグループ」としてコンポーネント化する感じです。

こうすることで、スタイル情報・データ内容ともにサイト内で一括管理できるので、変更対応の効率も大きく変わりました。コンポーネントのネストの機能さまさまです。

スタックとパディング

言わずと知れたレイアウトの自動調整機能です。単純なリスト項目の配置でも、ページ全体のセクションの並びでも活用できそうなところはとにかく導入しています。

スタックは項目自体に余白を設定し、間隔を0として並べていく形が多いです。ただコンポーネント内にスタックを入れ込む場合はコンポーネントで間隔の管理をファイル内で共通化できるのでこの限りではありません。

セクションごともあまり細分化しない程度に使っています。（以下のスクショはわかりやすいように10pxの間隔を開けました。）スタックを使う範囲がページの大部分に及ぶほどレイヤーの階層が深くなっていく問題は、下層にあるテキストなどを1クリックで選択できるダイレクト選択（command+クリック）を使って乗り越えています。

パディングはボックスやカード内の要素などによく適用しています。ただ、これらを使えば使うほど実装ライクなデザインに寄っていく感覚もあるので、あくまでアイデアを出し切った後の収集・調整の面で活用していくのが良さそうです。

まとめ

今回はデザインの効率を上げるAdobe XDの画面設計と考え方についてご紹介しました。私自身も普段のデザイン工程を改めて見つめ直す機会にもなり、綺麗に管理されたファイル設計への意欲がより一層高まりました！願わくば外部のデザイナーさん視点でも設計思想を伺ってみたいです。

今後もより管理しやすいファイル設計ができるよう、日々アップデートに取り組んでいきます！