「AdobeXD」が広げる、Webデザイナーの幅

今や本番さながらのプロトタイプが作れる「AdobeXD」。
プロトタイプのメリットと、プロトタイプ作りに役立つAdobeXDの機能をご紹介します。

プロトタイプがあれば、何が便利？

サービス利用時の体験が重視される昨今のWebサービス。
サービスに複数の選択肢がある現代において、「ユーザー体験」は非常に重要です。

AdobeXDを使いこなすことで、コーディング前に本番同様のユーザーテストが行え、「体験」のブラッシュアップを経て以降のフェーズに進めることが可能となります（開発後の手戻りが減ります）。また、コーダーやプログラマーに実際の動きを示しながらインプット出来るため、伝える側、伝えられる側、双方の作業効率が上がります。

ここまでは多くの人が知るところです。

AdobeXDでWebデザイナーの対応領域が広がる

デザインツールで本番さながらのプロトタイプが作れるようになったことで、
前述のとおり、コーディング時に調整していた動的表現や画面遷移まわりのUX調整などがデザイン時点で対応可能となります。
それはつまり、「コーディング出来なくてもWebデザインが完結する」ということです。

コーディングの知識が必要ないという話ではありません（レスポンシブデザインなど、コーディングがある程度わからなければ作れないデザインもあります）。あるに越したことはありませんが、AdobeXDがあれば、今までコーダーさんに頼らなければいけなかった作業が大幅に減らせるんです。

プロトタイプ作りに便利なAdobeXDの機能

「本番さながらのプロトタイプ」のための機能ではありませんが、
ここ数年のアップデートで特にありがたかった新機能ピックアップしました。

スタック

グループ単位で、縦または横方向に配置されるコンテンツのスペースが統一出来る機能。グループごとにこの設定が正しくされていれば、コンテンツの順序変更や要素の追加が合った場合でも全体のスペースを維持したまま対応可能です。コーディングで言うところの「margin-bottom（と:last-child）」。

パッディング

コンテンツの周りにスペースを空ける機能。要素のまわりに罫線を配置する際や要素が可変するボタンなどに便利です。コーディングで言うところの「margin」「padding」。

スクロールグループ

アートボードをはみ出すサイズのコンテンツがスクロール表示可能です。コーディングで言うところの「iframe」や「overflow: scroll」です。

これからWebデザインをはじめる方へ

「コーディング」は、グラフィックデザインとは違う情報整理の楽しさがあるので、個人的には学習をオススメしますが、世の中にはコーディング出来なくても優れたWebデザインを作る方もいます。
Webデザインのトレンドやお作法は、ネット上の数多のWebサイトからを学ぶことが出来ます。
Webデザインに興味があるなら、まずはAdobeXDで「本番さながらのプロトタイプ」を作ってみましょう。