こんにちは。最近の弊社はAdobe Experience Design（以下XD）を使ってデザインを作ることが増えてきました。
今回は大きめのプロジェクトでXDを使用してスマートフォン向けサイト（以下SPサイト）を作ったときの流れを書いていきます。
プロジェクトのざっくりしたワークフローです。薄い紫のエリアがXDを使った部分となり、今回はこの辺りのXDを中心としたデザインワークフローの改善事例を紹介していきます。
実際はこのようにきっちりフローは分かれておらず各フローはオーバーラップしていることが多いです。デザインを作っていく中で設計・ワイヤーフレームを見直すことも多く、ワイヤーフレーム〜デザインをXD上で行ったり来たりできてスムーズに進められました。
以前のデザインツール・フローの課題
このプロジェクトは先にPCサイトを公開しています。PCサイト制作のときはデザインをPhotoshopで作り、書き出してinVisionなどのプロトタイプツールでプロトタイプ・レビューする形式をとっていましたが、
1. psdデータが重くデータを開いたり共有するときに時間がかかりスピード感が下がる
2. 400ページ以上あるデザインを書き出して一枚一枚inVision化するのが大変
3. 大規模サイトで1ページずつデザインと実装をするのは効率がよくない
という課題があり、XDを中心にデザインシステムを取り入れてデザインフローを改善していきました。
1と2の課題に関しては、PCサイトのデザイン制作の中盤から「Sketchを試してみたい（※当時はXDリリース前）」という声が上がっていたため、SPサイトでは何らかのUIデザインツールに切り替えたいという流れになっていました。
3に関してはPCサイトでも導入していたAtomic Designを参考に引き続き使っていき、デザインの小さな部品から作っていくことになりました。
PhotoshopからXDへ
SPサイトのUIデザインツールをSketchかXDか検討するにあたり、制作チームがAdobe Creative Cloudに入っているため感覚的にも費用的にも導入の敷居が低いことなどからXDを使うことになりました。
結果的にデータの重さがだいぶ解消され、一つのアプリケーションでワイヤー→デザイン→プロトタイプまで作れるようになりました。
XDだけで全てはまかなえないため、
全体的なレイアウト＝XD
写真調整・画像作成＝Photoshop
グラフィックやアイコン＝Illustrator
アニメーション＝Animate
とアプリケーションの役割を分けました。
UIのコンポーネントを作る
先述した最小部品からデザインを作っていくAtomic Designの概念を引き続き採用し、チーム内で「パーツ」と呼んでいた最小のUIコンポーネント作りから始めました。
まずは全ページ共通のパーツであるボタン、フォーム、ページネーション、数パターンある記事リスト、それらのバリエーション違いなどをピックアップし、パーツ用のファイルにまとめて作っていきます。必要があれば修正・追加・削除を何度か繰り返しました。パーツがある程度固まった時点でエンジニアさんに渡してコーディングしてもらいました。
パーツを作りながらアイキャッチやダミー画像も作っていきました。PhotoshopでXDの実寸の2倍で作りXDに配置します。画像フォルダはコーディングの際に踏襲できるようディレクトリを分けていました。
実際のレイアウト
パーツのコーディング進行中にページのデザインも進行します。
基本的には準備したパーツを各ページに配置してレイアウトしていきます。単純にパーツをレイアウトするだけのページもありますが、パーツのデザインを改良したほうがいい感じになる場合もあります。バリエーションが増えすぎない範囲の中で作っていきました。
当時(2016秋)はシンボル機能がなかったので、パーツのデザイン変更があればその度に各ページにコピーし直していました。
シンボル機能が実装されてから使ってみましたが、ファイルを跨ぐとシンボルが維持されなくなるみたいです。私の場合はひとつのファイルで行き詰まったら作業をするのをやめて新しいファイルからやり直すのを何度も行うため、シンボル機能はあまり使う機会がなさそうです。いい使い方があれば教えてください。
グラフィカルなページはIllustratorで作ったグラフィックをXDに持ってAi・XD間を行き来していました。
プロトタイプモードでくっつける
ここまでできたら細かな調整を行い、フロントエンドエンジニアさんにお渡しします。その間に見出しのグラフィックを調整したり、アニメーションを作ったり色々やっていました。
まとめ
SPサイトからXDを導入したことで、PCサイト制作の課題だった「デザインデータが重い」「大量のデザインを書き出してプロトタイプを作らなければならない」という点はかなり改善されました。オンラインでコメントを付けてレビューしたりコーディングのお願いをしたりできるし、書き出してプロトタイプツールにアップする手間が省けます（もちろんツールを使う場合もあります）。
また、引き続きデザインシステムを採用したことで「パーツデザイン→パーツコーディング→コーディング中にレイアウトを作る→レイアウトコーディング...」とデザインとフロントエンドを分断せずに効率的に進められるようになりました。
初めはAtomic Designの概念のインストールと実際にやるのに時間がかかりましたが、自分達がやりやすいように原子と分子を合体させたりAtomic Designもどきでやっていくことで慣れていきました。また、コンポーネント単位なので再利用性が高く改修などデザイン変更に強かったり、属人的になりにくかったりするメリットを感じられました。エンジニアさんとのコミュニケーションが早くなる気もします。この辺はまた改めて記事にできればと思います。
こういったコンポーネント単位で作っていく手法はSketchと相性がいいらしいのでそちらも業務で使ってみたいです。チームや用途に合ったツールでスムーズに作っていけたらよさそうです。
ediplexでは一緒に働く仲間を募集しています。
ediplexでは一緒に働く仲間を募集しています。
気になった方はぜひ一度会社に遊びに来てください。
