• FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業

Webデザインメモ

日々学ぶウェブデザインについて、すぐに役立ちそうな情報を綴っていきます。Webデザインメモ

2018年7月13日(金曜日)  (山本 真里奈)

Adobe XDのいいところ、注意点

弊社では、カンプデザインのツールとして「Adobe XD」を使い始めました。
Adobe XDを使えば、デザインはもちろんのこと、ページ遷移までをビジュアルでサクッと作れます。

デザイン作成のしやすさについては、公式サイトでも詳しく書いてありますので、そちらにお任せすることにします。
今回のテーマは、「Adobe XDを使った、デザインの確認」についてです。
良かったことや注意点を共有したいと思います。

Adobe XDを使って良かったこと

1) コメント機能を使って、修正点をブラウザ上で指定できる。
「プロトタイプを公開」機能でリンクを生成することで、カンプデザインをブラウザ上で公開することができます。そこから、コメントを残せるのですが、修正してもらいたい場所をピンポイントで指定することができます。

また、コメントに対してリプライができたり、「解決済み」ボタンをクリックしてコメントを非表示にすることも可能です。
これで、修正点漏れや、口頭での指示をすることでの時間ロスを防ぐことができます。

2) jsの動きを共有出来る
Adobe XDのプロトタイプ機能を使うと、画面遷移の動きを設定できます。
これを使うことで、2ついいことがあります。
1つは、クライアントへ完成イメージをより明確に伝えることができるので、食い違いを防ぐことができます。
2つめは、プログラマーの人に、画面遷移の動きをビジュアル的に共有出来ます。
「このボタンを押した時に、こういう動きにしてもらいたい」という説明を、言葉で伝えるよりスムーズです。

注意点
複数人での作業がしづらい
デザイナーチームの間で、xdファイルを共有して作業をしているのですが、覚えのないコンフリクトが結構な頻度で起きます。そのため通常のファイル名の後ろに「 (Conflicted copy from ****** on [年月日])」が付いたファイルがたくさん生成されてしまいます。
Adobe CCのストレージで管理する場合、同期がうまくいかないことが多い印象です...。

スマホサイトデザインを、スマホから確認がうまくできない。
スマホデザインの場合、ブラウザからプロトタイプを確認しようとすると、小さな比率で表示されます。ですので、クライアントさんへカンプ確認をお願いする場合は、プロトタイプ機能を利用するより、画像で切り出しての確認の方がスムーズです。

実機確認を行う場合は、Adobe XDのアプリを使うといいです。



定期的に行われるAdobe XDアップデートでどんどん改善されていますので、これからもっと使いやすくなってくると思います。