新人WebデザイナーがAdobe XDを使ってみた

私が、Ｗｅｂスクールで学んだスキルといえば、Photoshop、illustrator、Dreamweaverこの三点のみでした。この三点で、Webデザインはできているものだと思っていました。しかし、実際に制作会社に入ってみると使用しているソフトはAdobe社のXDでした。XDは、制作人にとってより簡単にWeb制作をすることができる便利なツールです。以前Photoshopやillustratorで作っていたものがより簡単に、シンプルに作ることができます。

私が使って便利だなと思ったことは、キャンバス機能、グループ機能、リピートグット、コンポーネント、自動アニメーション機能この5点です。

キャンバス機能

XDでは、簡単にキャンパスの幅を拡大縮小したりすることができます。また、一つの画面でAltキーを押しながらドラックすることで、何枚ものキャンバスを複製することもできます。つまり、PC版とSP版を隣り合わせでデザインしていくことも可能ですし、Topページだけではなく、詳細ページやハンバーガーメニューなどの次の階層に入るようなデザインもすべて一つのキャンバスの中で済ませてしまうことが可能です。

グループ機能

グループ機能は、その名の通りグループにしたい要素を右クリック一つでグループにまとめることができます。少しだけ、グループの高さを下げたいときや、配置換えをしたいとき、グループにすることで簡単に移動することができます。

リピートグリッド機能

これは、同じ要素を繰り返し表示したいときにおすすめの機能です。特に、ワイヤーフレームを作る際に仮でお知らせ一覧などに文字を入れたいときにとても役立ちました。画像などのリピートなどにもおすすめですね。

コンポーネント機能

XDの特徴とも言える機能だと思うのですがグループ機能のように右クリックでまとめたい要素をコンポーネントすることで別の場所でもう一度同じデザインを使いたいと思ったときに、コンポーネント一覧から簡単に取り出すことができます。そのため、沢山のWebページを作らないといけない、そんな方にはコンポーネント機能を強くおすすめします。

自動アニメーション機能

XDには、自動アニメーション機能があります。自動アニメーション機能は、デザインの段階で実際のような「動き」を再現することができます。動きを繋げたいところを繋げることでハンバーガーメニューを表示したり閉じたり目で見て動きを確認することができます。こまめに設定していくととても便利ですね。