Blogブログ

さてさて、前回モックアップと余白についてadobeXDで筆者は救われたという話を 少々暑苦しめに語らせていただいたわけですが。

今回は、いよいよこの令和の時代にあった素晴らしい機能。
同時編集機能についてご説明させて頂きます！

このリモートの時代ですが、WEBサイト制作というのは基本分業が多いです。

ディレクターさんが要件整理して、ワイヤーフレームに起こし、 それをデザイナーがデザインし、 最後にそれをコーダーさんやプログラマーさんが組み上げる。

そうなった時に各々使うツールがバラバラなため、それぞれの工程でちょっとした 不便が発生しやすいという問題がありました。

例えば、 ディレクターさんはパワポやGoogleプレゼンテーションでクライアントさんと やりとりをしていて、 デザイナーはイラレでデザインを起こしていて、 コーダーさんはatomやVS codeでコーディングをする・・・・。

デザイナーはイラレのデザインをPNGなどに書き出しをして、ディレクターは それをクライアントさんへの確認資料にまとめ上げて提出します。

その際に パワポやプレゼンだと画面が小さくて微妙な修正箇所を見落としてしまったり、 はたまた、イラレで作ったデザインをコーダーさんはmargin、padding計測して コーディングしていくわけですがデザイナーにコーディング知識が不足していると 「なんでこの数値なのよ？」とコーダーさんが思ってしまうような微妙な位置に オブジェクトを配置してしまったり。

致命的ではないものの、お互いにちょっとしたイライラを溜めやすい状況がありました。

同時編集機能でワイヤーフレームからデザインまでをXDに一本化！

Adobe XDはおそらくこういった相互連携のしやすさに着目して開発されているようで、操作そのものもイラレより直感的にできるように設計されています。

最初は操作場所を確認するのにやや手間取るかもしれませんが、イラレやフォトショップを触ったことのあるディレクターさんなら比較的すぐに慣れてしまえるのではないでしょうか？

ディレクターさんにとっての手間がかかる部分というのは主に、クライアントさんのご要望を汲み取ってワイヤーフレームに起こし、大筋の確認をとる。 そしてデザイナーに的確に指示を出す、という部分かと思います。

どういう風に書面で指示をすればいいのか？ 文章だけだと伝わりづらいので、画像も使いながら工夫してどうにか指示を出す。 この作業、結構骨が折れますよね。

しかもパワポとかプレゼンテーションだとワイヤーフレームは超つくりにくい。 そもそもプレゼン用ですんで、画面が16:9というのもありますしね。

UIキットですぐに視覚化できちゃう

さて、そうはいうけどワイヤー起こすだけでも面倒臭いんだけど・・・と思っている方もいらっしゃることと思います。

ふふふ。・・・・そんな言葉を待ってました。

XDにはUIキットというものが搭載されており、よくあるワイヤーフレームがただそのUIキットを読み込むだけでできてしまうのです！

このキットにはもちろんPCだけでなくスマホも入っているため、iPhoneなどのノッチを考える必要もありません。

ここでディレクターさんがUIキットでワイヤーを起こしてくれるとデザイナーはこれらをもとにそこにデザインを配置していくだけでいいので作業効率も大幅アップします。

そもそもこのUIキットが綺麗にmarginもとってくれているのでよほど妙なことをしない限りはコーディングでも数値狂いが起きません。

XDファイルに共同作業者を招待することで同時編集が可能に！

さてさて、お待たせしました。ここでいよいよ本題である同時編集機能です。

XDファイルを開くと画面右上にこんな人型のアイコンがあります。

これをクリックするとこんな画面に移り変わります。

ここをクリックすると共同編集者を招待できるようになります。

あとは招待したい人のアドレスを入れて「編集に招待する」というボタンを押下するだけ！ これで相手のアドレスに招待メールが届きますので相手が承認すれば同じファイルを編集できるようになります。

ちなみにこの同時編集はCreative Cloudにデータを保存しているからこそできることなのでローカルにダウンロードしたものは共有が切れてしまうのでその点はくれぐれもご注意を。

また、このファイルは最初にファイルを作成した人間のCreative Cloudに保存されているので、このデータを扱う人間が変わった場合などはその人のCloudにデータを移すことも忘れないようにしましょう。

そうでないと、自分の作業が終わったのに自分のCloud上でずっと他人が作業し続けてしまいその更新が全部自分に届いてくるという非常にめんどくさい事態になります。筆者は以前ここを失念したまま提出。別チームの更新の嵐を喰らい一度発狂しかけたことがあります・・・。

あ、あと補足でもう一点。同時編集機能は非常に素晴らしいのですが、実の所どうもCreative CloudはVPNとの相性がどうもイマイチなようでして。

もし、リモートでVPN接続でイントラもインターネットもみてるよ、という方は XD使用の際は一度VPNを切って作業をされた方がいいかもしれません。

お次は共有（デザインレビュー）について解説します

想像はしておりましたがやっぱり思ったより長くなってしまいましたね・・・。

同時編集は筆者も使い始めてみて、非常に便利でもありますがちょっとずつ気をつけなければならないポイントも含まれておりまして。

あくまで筆者の経験の範囲内ではありますがそれもある程度まとまってきたらお伝えできたらいいなと思います。

さて、お次はデザインレビューについてのご説明。 おそらくディレクターさんはここ、とっても嬉しいポイントです。 どうぞ次回も楽しみにお待ちくださいませ。