Web制作でどこまで使えるか？ 噂のAdobe XDを使ってみた！

お久しぶりです。フライング・ハイ・ワークスのデザイナー、しら吉です。

Adobe XD。私がXDを噂に聞いたのは、かれこれ3年前…。
「XDかー。今更、新しいアプリケーションを覚えるのは面倒…。」と思ってる間に無料プランが出て、私の周りでもXDの名前を良く聞くようになりました。
AdobeのIllustratorやPhotoshopを使っている人なら覚えるのも簡単だと知人に言われ、どんなもんかとやっと重い腰を上げ使ってみることにしました。
使ってみて、特に便利だと思ったものを紹介します！

ワイヤーフレームを作って見る

まずは簡単なものから。ワイヤーフレームから作成します。

スタート画面はこんな感じ。スマホのサイズなども細かくスタートから選べるようになってます。

作業画面はこんな感じ。IllustratorやPhotoshopを使ってる人はメニュー項目が少ないですね。ゼロからのスタートの人には覚えやすいかもしれません。

リピートグリットを使ってみよう

文字やボックスを置く作業はIllustratorにも近いし、PowerPointのようでもあります。
使ってるうちに聞きなれない言葉が…。「リピートグリット」って何？と言うことで、とりあえず使ってみました。

これは便利。1つのグループを作ってリピートグリットにしてハンドルを広げて行けば、いくらでも同じものがコピー出来ます。
リピートグリットにしてしまえば、1つを変更すれば他のものも一気に変更可能！
ちまちま1つずつ修正する手間が省けます！

プロトタイプを使ってみよう

TOPページ+下層6ページ想定のワイヤーフレームを作成しました。これにプロトタイプを使ってみます。

使い方は簡単でした。ボタンなどにクリックすると飛ばしたいページに青矢印を伸ばしていくだけです。

スライドの仕方もいくつか選べて簡単なページ切り替えの動きが付けられます。

プレビューを使ってみよう

全ページ作成したら、プレビューにして確認します。

クリックしたら、ちゃんとページに飛びますね。
これならクライアントにも分かりやすいですね。
ワイヤーフレームが完成したところで、今回はここまで。

ここまで使ってみての感想

XD独自の機能はとても便利でした。
作業自体はIllustratorやPhotoshopほど複雑なことはないので、覚えることはさほど難しくない印象です。
機能が増えて覚えるのにハードルが上がる前に、使いこなせるようになるのも良いかもしれません！

それではまた！

WEBサイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします

お問い合わせはこちら