Webデザイン制作を加速させる新時代のデザインツール

以前のコラム（「デザインツールが変えるコミュニケーション」）にて、デザインツールAdobe XDを紹介してから約２年が経過しました。この２年の間に、18回もの大型アップデートが行われ、Webサイト制作の現場でも、メインツールとして使われるほど急速に普及しました。

本コラムでは、Adobe XDに追加された機能に触れながら、従来のデザインツールでは実現できなかった表現や、デザイン制作の効率化につながるポイントについてお伝えいたします。

コンポーネント -デザインパーツの一元管理-

Webデザインにおけるコンポーネントとは「パーツの集合体を視覚的に定義すること」を指します。定義するものの例として、コラム記事のサムネイル画像とタイトル、リンクボタンの矩形と矢印アイコンといったものが挙げられます。

Webサイトで繰り返し用いられるパーツをコンポーネントとして定義しておくことで、瞬時に呼び出すことができ、デザイン制作の効率化が見込めます。

また、コンポーネントはマスターとインスタンス（コピー）の概念を持っており、調整に強いのも大きな特長です。デザイン制作後に、パーツデザインの変更が発生した場合、マスターのデザインを調整することで、複数ページまたは別ファイルにまたがるすべてのインスタンスに漏れなくデザイン変更を反映することが可能です。

新規ページを作成する場合も、ユニークなデザインでない限り、既存のコンポーネントの組み合わせで品質を保ったデザインを即座につくることができます。

レスポンシブリサイズ -各デバイス幅のデザインを素早く作成-

スマートフォンやタブレットなど、様々な大きさのデバイスに柔軟に対応するレスポンシブWebデザインは今や一般的な手法となりました。しかしWebデザイン制作の現場では、各デバイス幅のデザインを手作業によってひとつひとつ制作する必要がありました。

Adobe XDには、レスポンシブリサイズという機能が搭載されています。この機能により、デザインのサイズ変更の際、空間関係をある程度維持したまま異なる画面幅のデザインへ適応させることが可能になりました。

Web制作に関わる多くのプロジェクトにおいて、各デバイスにおける一貫した使い勝手やデザインの印象を揃えていくこともまた、目的達成に向けた重要なポイントになります。

この機能を使ってデザイン制作をスピードアップし、早い段階からデザインやユーザービリティの検討を重ねていけることがメリットになると言えます。

自動アニメーション -デザインにインタラクションを加える-

以前のコラムで紹介した、ページの画面遷移を設計するプロトタイプ機能を応用し、簡易的なインタラクションの追加が可能になりました。

リンクボタンにマウスオーバーしたときの見た目の変化や、スマートフォンサイトでのハンバーガーメニューの開閉など、Webサイトに用いられるインタラクションをデザインの段階で検討することができます。

インタラクションを追加したデザインは、ブラウザで簡単にプレビューすることが可能です。ブラウザで操作しながらデザインを確認することで、よりユーザーに近い視点でデザインの評価や検討を行えるようになります。

デザインツールを活かすために必要なのは「コミュニケーション」

以上、Adobe XDに追加された主要な機能をご紹介しました。どれもデザイン制作の効率化やより深いユーザービリティの検討に役立つことがお伝えできたかと思います。

デザインツールが便利になった一方で、デザインフェーズで検討できる項目が多くなったこともまた事実です。プロジェクトを円滑に進めるため、お客様も含めたプロジェクトメンバーでどうデザインツールを活用するかの認識合わせや、コミュニケーションルールを設定することもまた重要になってくると考えます。

私自身も、いちデザイナーとして「お客様とその先のユーザーにとって重要なポイントは何か？」という視点を常に持ちながら、Webサイトのゴールに向けて、適切なデザインツールとの付き合い方をご提案できるよう、絶えずインプットを行っていきます。