Adobe XD Trail Meetup 2021 Spring出演時の補足

先日、3夜連続開催のAdobe XDのオンラインイベント「Adobe XD Trail Meetup 2021 Spring」のDay 2に出演させていただきました。
私は、XDTrail.comのTUTORIALから選ぶ「実際によく使うXDおすすめテクニック9選」というテーマで簡単なデモを用いながら、実際の制作時によく使うおすすめテクニックを紹介させていただきました。
今回は、その補足記事を公開します。

CCライブラリを利用した連携について

Meetupでは、複数の写真を一括編集するときに使用すると紹介しましたが、その他にもCCライブラリを素材の保管場所として活用しています。

下の写真のように、元画像を非表示でレイヤー内に残しておけば、ローカルフォルダなどで、管理する必要がなくなります。

ローンチ済みの案件など、ライブラリとして残しておく必要がなくなった場合は、CCライブラリを書き出し.cclibsデータとして、まとめて保管することもできます。

レイヤーの命名について

Meetupでは、アイコンの命名について触れましたが、チームによって命名規則は異なると思います。なので、チームにあった命名をすると良いです。

また「どこまでがデザイナーで、どこまでがコーダーの役割なのか」という問題になりやすいところですが、基本的にはお互いの歩み寄りが大切です。（私もなかなかできていませんが…汗）

普段、デザインだけを行う方であれば、簡単なページでも良いので一度コーディングを経験してみると良いと思います。
「どのようなデータを作ればコーダーさんが楽なのか？」「どういったデザインが複雑なのか？」に気付けるのではないでしょうか？
すると、仮にどうしても複雑なデザインをお願いしたいことが出てきても、事前に根回しができ、プロジェクトを円滑に進められると思います。

その他に参考として、歩み寄りが必要なシーンを紹介します。
例えば、円形にくり抜かれた画像を使う際、コーダーさんによっては正方形の画像をCSSで丸くマスクしたい方もいます。
この場合、デザイン時点で、楕円ツールに画像をドロップして配置しているとXDからは正方形状態で書き出すことができません。
そこで、デザイナー側は、長方形ツールに角丸を使って作った円に配置することで、コーダーさんの要望に応えられることになります。

このように、お互いの仕事を理解し、適したデザインデータを作成するためにも、それぞれの仕事を経験し、リスペクトすることが大切に思えます。

共有モード（カスタム）で共有するときのチェック項目について

これは正直、やり方は人それぞれだと思いますが、私のチェック項目を紹介します。

この図のように、コメントはフィードバックが欲しいときにチェックを入れます。なので、プレゼンやセミナー資料などには使いません。クライアントや社内メンバーに見て欲しい時などが使い所でしょうか？

またフルスクリーンについては、デザインを見せるときは基本的にチェックを入れています。やはり、デザインを見せるときは、なるべく実際のイメージに近づけることが大切だと思いますので、余計なものは非表示にしています。
その際、escキーを押すことで下の図のように、コメント（チェックを入れていれば）やアートボードの選択画面が表示されることを伝えておきましょう！

また注意点として、作成したアートボードが、閲覧環境より大きく作られていると縮小されてしまいます。こちらはフルスクリーンで提示しているつもりでも、クライアントからは「文字サイズが小さい」といった指摘をいただいてしまうこともあるので、先にクライアントの閲覧環境を確認しておくと良いかもしれません。
また、ほとんど使うことはありませんが、生成されたURL末尾に?fullscreenを追加することで、フルスクリーン表示も可能です。

私の業務では、ホットスポットやナビゲーションコントロールは、ほとんど使用していません。基本的には全ての導線にリンクが貼られているので、こちらが必要な状況になった際は「デザインが良くない」と判断しています。
もちろん、状況に応じて使用することもありますし、仕事内容によっては必須項目かもしれません。

XD モバイルアプリケーションでの表示について

こちらは、Meetupでも話にあげましたが、モバイル版のWebサイトをデザインする際の注意点です。

モバイルアプリケーションは、実機を見ながらリアルタイムでデザインできるため、ボタンなどのサイズを確認しながらデザインできるます。
しかし、ブラウザの検索バーなどが表示されていないため、実際にコーディングしてみると思っていたイメージと変わってしまったり、FVに収めようと思っていた要素が収まりきらないこともあります。
このことを意識してデザインを行う必要があります。

必要であれば、画像のようにキャプチャなどを使い、ブラウザを再現すると良いかもしれません。

以上、補足説明でした。

今後について

Meetupでもサラッと案内がありましたが、今後は、私もXDTrail.comのLESSON動画を作っていくことになりそうなので、ローンチを楽しみにしていてください。
（私はプレッシャーでいっぱいです！笑）