大型案件でXDを使いました

4 min readDec 23, 2016

Adobe XD Advent Calender 24日目の記事です。

初めまして、ちひろと申します。現在、都内のweb制作会社でデザイナーをしています。大学では油絵を専攻していました。今の会社に入社してもうすぐ3年目です。

この記事では大型案件でXDを使った感想や手順を書いてみます。

80ページ超の案件で全ページXDで作りました

私の会社では長期間の大型案件を進行しています。私の担当箇所はSPサイトのデザイン、PC/SPコーディング量産、イラスト等です。

PCサイトのデザインはpsdで行ったのですが、SPサイトよりもページ数が多くデータが重い問題がありました。

プロトタイプ向きのXDで全デザインを作った大きな理由は、「軽い」「デザインからプロトタイプまで一気に作れる」ことです。

XD以外はいつも通りpsd/aiも使用しました。

あらかじめ必要な写真やアイコン、グラフィックなどはpsd/aiで作っておきました。脳もデータもすっきりします。

写真はXDの実寸の2倍で作り、コーディングの際に踏襲できるようディレクトリを分けました。

まずは全ページで使う共通部品をピックアップし、module.xdというファイルにまとめていきました。厳密に作りすぎず、必要があれば都度追加したり削除していきました。

ボタン、フォーム、ページネーションやそのバリエーションなど。リスト記事も数パターンあるのでこちらです。

そして、デザインとコーディングがある程度同時進行できるよう、コーダーさんにはモジュールから先に作ってもらいました。

記事系が多いサイトなのでリピートグリッドは助かりました。

同時進行で各ページのデザインも制作しました。当時はシンボル機能がなかったのでデザイン変更があればその度に各ページにコピーし直していました。

写真はあらかじめpsdで調整して書き出しているので作業も楽だし、（たぶん）コーダーさんも楽なんじゃないかと思います。

(追記)シンボル機能が実装されたあと使ってみましたが、ファイルを跨ぐとシンボルが維持されなくなるんですね（ですか…？）。私の場合はひとつのファイルで行き詰まったらそこで作業するのをやめて、新しいファイルからやり直すのを何度も行うため、シンボル機能はあまり使う機会がなさそうです。

すごいことになりましたが無事くっつきました！なんだかかわいいですね。

ここまでできたら細かな修正・調整を行い、コーダーさんにお渡しします。

その間にタイポグラフィをどうにかしたりアニメーションのプロトタイプを作ったり色々していました。

XDはとにかく軽く、社内で進行中のデザインのやりとりはGoogle driveですることが多いためすごく助かります。

そして、デザインからプロトタイプまでを一気に行えるのもいいなと思いました。書き出してinvisionなどのプロトタイピングツールにアップする手間が省けます。また、直感的でラフな使用感なのでワイヤー制作をするディレクターさんにも使いやすそうと思いました。

ただ、本来プロトタイピングツールなのにデザイン全てを作ってしまったのでコーダーさん的には不慣れで面倒な点もあったのでは…という反省もあります。色々アップデートされる中でおいおいはメインのデザインツールとして使えたらいいなと思います。

まとまったか不安ですがこちらからは以上です。読んでくださってありがとうございました。