デザインにまつわるあれこれのクリップと書きもの。
about.me
これは「Adobe XD Advent Calendar 2017」の14日目の記事として公開しています。
昨年末、社内でプロトタイピングツールを使い勝手とコスト面で見直す機会がありました。 ちょうど ADOBE MAX 2016 で話題になってたぽかったのもあり「Adobe XD 評判いいから使ってみよっか!」と、年明けから業務で使い始めることに。
現在、私は自社で運営するサービスサイトでデザイン(=フロントに関すること全般)を担当しています。ずっと運営続けているサイトなので基本ゼロから何かを作るということはなく、既存コンテンツの改善、新コンテンツの実装、キャンペーンページやLPの作成、機能面やUIの改善の実現部分が主な業務です。
だいたいのワークフローと使用ツールは以下の通り。
UI部分は、すっかり「XD中心で回ってます」という状態。
前述したとおり、画面遷移→ワイヤー→プロトタイプ、とすべて同一XDファイルで行い、都度「共有と確認(さらに修正)」も同時にできるようになり、プロジェクト内での進捗共有や納得度を高めることも、よりスピーディにできるようになりました。
要はこんな感じです。
画面見ながら、ああしようこうしようレビューして喋ってなんならその場でちょこちょこUI直していけるのはXDの醍醐味だわね。 #maxjapan
— Megumi M (@Zazie)2017年11月28日
また、UIを作る際には、サイト内の基本スタイル(カラー、文字スタイル)、パーツ(見出しやボタン)をシンボル化したUIパーツばかりのテンプレートファイルを作り、Creative Cloud File に置いてチーム内で共有。 テンプレートファイルをコピーして作り始め、パーツのシンボルを活用することでワイヤーがそのままプロトタイプになってしまう、ということも。 ライブラリ経由で画像ファイルの配置もできるようになったので、デザインレビュー後に画面を一緒に見ながら画像パーツを修正して即反映、そのまま再レビューすることも少なくないです。(この機能待ってた!)
そんなわけで、いろいろ手間だったことが効率化されていき「要件定義からの実現化」がスピーディになったので「細かい作り込み」の時間ができたはずなのだけど、現状はツールのおかげで早く作れるようになった分スピーディに出す(リリースする)ことが優先になってしまっていたりなのをなんとかしたい・・・(これはひとりごと)。
使い始めた頃に比べ、かなり機能が増えてすっかり「使えるツール」になりつつあるXD。ちなみに6月の勉強会時に発表した資料に「あったらいいな」と書いてあった4つの機能のうちすでに3つが実装していました!(嬉しい)
- 不要なアートボード非表示 - リンク共有時、アートボード一覧が見られる(実装!) - シンボルやカラーのライブラリ化&共有(実装!) - Ps/Aiとの連携強化(実装!) - コピぺしたアセットはWクリックで即編集&変更反映とかとか
さらに先日の12月のアップデートでは、ついに「テキストの下線」や「線の位置」、ライブラリから直接画像ファイルを開けるなど待望の機能が実装されてますます便利に。
Adobe XD 12月アップデートリリース!テキストの下線、CCライブラリパネルの強化など #AdobeXD
ツールをうまく使って、よりよく仕事ができるようになれるといいな、と今後も期待です。