Adobe XDでホームページを効率よく制作できる

いまさら感がありますが、最近やっとAdobe XDでのサイト制作を進めているTREVOの板浪です。
これまでphotoshopをメインにsketchやエクセル等でホームページの構成を制作して進めて来たのですが、ここに来てAdobe XDに乗り換えた所、凄く便利だったので記事にしました。
ここ最近、弊社のお客様に対しての記事が多かったのですが、せっかくなのでツール系の記事も書いていこうかなと考えています。

Adobe XDが良い点

軽い

アートボードと呼ばれる、各ページの作業領域をいくら増やしてもサクサク動いてくれます。
これまで、社内の連携を考えてphotoshopメインで構成を作成していたのですが、アートボードを増やすとどんどん重くなっていくので大変でした。
デザイン時には、アートボードが10～20に増えると開くのも大変だったのですが、Adobe XDは軽い。開くのも編集するのもサクサク動いてくれるので、制作自体が凄く楽しくなりました。

早い

軽いのでサクサク制作を勧められるのはもちろんなのですが、繰り返しコンテンツの表示はいちいちコピペして間隔の調整をしなくてもリピートグリッドでサクッと表示出来たりします。
Photoshopで編集していた時に活用していたAdobeクラウド上の素材も簡単に読みこむ事も出来ます。
なので、ヘッダーやフッター等のコンテンツパーツを用意しておく事で、ある程度の構成を配置するだけで作成する事が出来ます。

私は基本的に、一度紙にコンテンツの置き場所を決めてからソフトで制作を進めるのですが、配置が決まっているとパーツを用意していれば、置いていくいくだけの作業となります。
そこで、レスポンスがPhotoshopよりも早いのでストレスなくサクサクと進める事が出来ます。

ブラウザでの確認

Adobe XDではプロトタイプの公開という機能があります。
プロタイプで公開するとデザインをブラウザで直接確認する事が出来ます。
これまでだと、100%表示で確認するか、jpgで書き出してブラウザで確認等をしていたのですが、Adobe XDから直接書き出す事でお客様に確認して頂く事も可能です。