XDでちょっとだけ楽する作業フロー
WEBページのプロトタイプでちょっと楽する作業フロー
イエェ〜〜〜〜イッッ！！
初めましての方は初めましてごきげんよう。
今回こちらのアドベントカレンダーに参加させていただきました。
Adobe XD Advent Calendar 2017 Adobe XDにまつわるあれやこれやを楽しく書きましょー。遅刻も気にせず2017年中に埋めるの目標！
楽しい使い方 他のツールとの比較 事例 (よくわからないけど)思い出とか記録とか なってのがいいのでは。参考Adobe XD Advent Calendar 2016
せっかくの機会。そして最近、業務でXDを使うことがあって四苦八苦したりしたのでそれの所感など！
公開が遅くなったことをお詫び申し上げます。
この記事で何がわかるの？
※使用している写真はなんとなく12月っぽさを出したかったためのアイキャッチになりますので写真に写っている女性は今回の記事とは一切関係ございません。決して女の子が可愛かったから使いたかったというわけでもありません。本当です。
そもそも前提として、私が何か本や記事を読むときに何を重視しているかというと技術的な話か知識的な話かということが多いです。
今回は前者の技術的な話の要素が強いかと思います。あれどうなんだろ。わからん。
まあいいや、つまり、h1タグで書いたようなXDの使い方のお話です！！！
この記事の流れ
①普段の業務を簡単にご紹介
②XDをどう使うのか
③よかったこと
④まとめ
普段の業務
まず、私は普段はITベンチャー企業のWEBディレクター兼デザイナーとして、受託開発業務のWEBデザイン業務全般を任されています。
デザイン業務といっても何があるかというと、
・クライアントとのヒアリング
・ワイヤーフレーム作成 & ビジュアル作成
・素材集め
・修正 & FIX
・フロントエンドエンジニアへ実装依頼
と、ざっくりまとめると上記のようになりますが、使うタイミングはここ
・クライアントからのヒアリング
・ワイヤーフレーム作成 & ビジュアル作成
・素材集め
・修正 & FIX ←ｺｺ!!!!!
・フロントエンドエンジニアへ実装依頼
理由は色々ありますが、大きな理由としては
・フロントエンドエンジニアがPSDに慣れすぎている
・プロトタイプは結局プロトタイプで終わる(ワイヤーフレームもしかり)
・小規模プロジェクトが多く、 用意するページ量が比較的少ない
・XDでなんとなくのイメージをクライアントに見せて出戻るよりは、 PSDで9割のクオリティのビジュアルイメージ を作って見せて納得させる方が手っ取り早い(ことが多かったり少なかったり)
・ベンチャー企業ということもあって、 仕様や人がコロコロ変わるのでXDをメインで使うと技術が私に依存 してしまい、がっつり使うといざという時に後戻りできない(他の人がXDを覚えるまで業務が止まる)
ちなみにコーポレートサイトの改修などが多いです。
具体的にどう使うか
私の制作する範囲はだいたいこんな感じです。
通常、おそらく、たぶん、きっと、XDが大好きなみなさんは0〜100までXDでがっつり作業してクロージングまですることが多いかと思います。
ですが前述したように、私は結構最後の段階で使用することが多いです。
①XDで作る
②XDでビジュアルチェック
③実装へ
が通常かと思うのですが、
私の場合は
①PSD作成
②XDでビジュアルチェック
③実装へ
というフローです。
まあここまでは他の会社でもやってるかもしれませんね。
というか通常のフローかもですね。XDでビジュアルチェックできないところはinvisionとかcacooとか使ってるっぽいし。
invision
https://www.invisionapp.com/Cacoo
https://cacoo.com/ja/
クライアントや社内責任者に見せておきたいものは最低限こんな感じの場合が多いと思います。
まあ要するに「だいたい３案くらい見せて一番いいやつ選んでもらう」ってことが提案段階では多いです。実際、選ぶ側の心理として３つあると良いらしいですね。
管理しやすい環境を作る
前述したように 「PSDでガーーーッと作って見せてオーケーもらう」 というやり方が多く、私のいる環境ではPhotoshopを軸にデザイン業務を進めていくことが非常に多いです。ですので、Photoshopで作られたビジュアルを手っ取り早く見せるやり方をしています。
前提として、クライアントやこちら側が確認しやすいプラットフォームをXDで作成していきます。
あとは画像とリンクの遷移ボタンをちゃんとやっておけば誰でも確認しやすいものになります(はず)
ワイヤーフレームの状態なので分かりづらいですが、作られたビジュアルの画像を入れている状態です。
実際には フォトショップでビジュアル を作成していきます。
つぎに遷移を設定していきましょう。
というように、透明なオブジェクトをボタンとして作ります。
やることはcacooと似てるかもなんですが、要は 「クリックすると遷移する役目を持ったボタンを作る」 というやり方です。
メリットは？
これの大きなメリットは「ルールを明文化しておけば他の誰かがアサインするプロジェクトにも応用が利く」というところです。
私が受託開発のデザイナーとして最初に決めていた項目は
・今後の運用ラクにしたい
・とりあえず手間なくやりたい
・なんとなくXDで全部やればラクになれるだろうからXDメインでやったろ！
・ラクしたい。でもクオリティ高いやつ作りたい。
途中で気付いたこと
・自分以外の社員でXDをある程度のレベルでも使いこなせてる人がいない
・ディレクターがXDメインで使うのはわかるがデザイナーはPhotoshopメインで使えた方が使い勝手がいいことが多い
・私はディレクターに近く、デザイナーを育てる立場の人間だ
・今はPhotoshopで作らないと実装側が困るしリスクヘッジできない
・完成形に近い形で提案しないとクライアントは納得しづらい
・XDとPhotoshopの互換性は思ってたより少ない（画像形式くらい）ので、0からXDでやろうとするとフローがややこしくなりかねない
運用する上で ラクになる部分の例 を出しましょう。
先ほどのワイヤーフレームのものを、PSDで作成したものに変える(画像しか変わってないのは気にしないでほしい。ほんとごめんとしか言いようがない。）
ファッファ〜〜〜！
リンクが生きている。
つまり、あらかじめのルールが決まっている業務なら 『ボタンだけ用意されてるページをビジュアルチェックのために前もって作っておく』 ということをすると、他のプロジェクトにもいろいろ活かしやすいってことですね。
まとめ
今回は私の作業フローではこうやると楽になったという事例でしたね。
運用ありきのやり方で、それも比較的ページ数が少ないことが前提のものでした。
ニッチなやり方だったかもしれませんが、Tipsとして誰かの助けになれば嬉しいです。
最後に
今回作成したページはこちらになります。
https://xd.adobe.com/view/ae2ff818-23be-4be1-b2df-ad074ed174d3/
ではまたいつか会いましょう。
