Webデザイン、制作の近道！

マルチコンテンツの対応が当たり前になってた昨今、VRやAR、3D、パーソナライズ化も一般化しています。デザインも各デバイスで最適化されたものを考える必要があります。今回は「Adobe Experience Design CC」ご紹介します。実際のWebサイトではなく、Webサイトやアプリケーションなどを制作する際のプロトタイプまたはモックアップを作るというのが目的のツールです。

Webサイト制作ツールは2つあります。DreamweaverとMuseです。Dreamweaverは、Webデザイナーやコーディング制作者向けのアプリケーションです。CMSやサーバーと連携してデータを大規模のサイト管理するのに適しています。Museは、コードを一切使わずに制作でき、印刷系や映像系の方がWebサイト制作する場合のツールです。小ボリュームのWebサイトを制作するのに適しています。

Adobe XDは、3つのステップを1つのアプリで行っています。まずは、ユーザーインターフェイスのデザインです。ワイヤーフレームからカンプまで行っていくことができます。そして、カンプのデザインです。画面遷移の設定など行います。最後に、作成したプロトタイプを、共有することです。さまざまなデバイスに対応できます。チュートリアルからも実際に操作を覚えることが可能です。

最初は、基本的な塗りと線の設定をご紹介します。IllustratorやPhotoshopと同様に「スマートガイド」がXDにも搭載されています。「ライブコーナー」から、角丸が簡単に作成できますオブジェクトの色を変更、ドロップシャドウの効果をかけることも可能です。フレーム内への画像配置も、ドラッグ＆ドロップで、非常に簡単に操作できます。

今度は、アイコンを作ります。楕円形ツールで2つ描き、位置を整列します。アイコン下をきゅっと細くするため、オブジェクトのアンカーポイントをダブルクリックすると、ハンドルが出てくるので引き伸ばして角をとがらます。内側の部分を切り抜き、背景が見えるように設定できます。また、シンボルを作成すると、複数のオブジェクトを一括修正できるようになります。

「リピートグリッド」を使った、複数オブジェクトを効率的に作るポイントを解説します。テキストや画像ファイルを事前に用意し、ドラッグ＆ドロップするだけで適用することができます。共通のオブジェクトに別のテキスト情報を設定するようなことが可能です。「Adobe Bridge」と連携すれば、ファイル名の一括置換なども一気に作業できます。

続いては画面遷移の設定を行います。画面をドラッグすると、紐のような形のものが表示されるので、遷移先へドラッグ＆ドロップし、引っ張ります。これだけです。非常に簡単に設定できます。次にプレビューで確認します。最終的に動画というような形で確認してます。動画ファイルの書き出しもできます。デバイス連携できるため、すぐに実機確認することも可能です。

Adobe Creative Cloudでは、さまざまなサービスが用意されています。Adobe Stockは、写真やベクターデータ、イラストレーション、4K動画、3Dモデリングデータ、IllustratorやPhotoshopのテンプレートデータなど、6,000万点を超える数多くの素材をご利用いただけます。フォントを提供するTypekitでは、モリサワ10書体、タイプバンク10書体、日本語書体合わせて34書体の書体が用意されています。（2017年2月時点）