Adobe XDを使ってワイヤーフレームを組んでみたよ

これからサイト制作を行っていくにあたって、初めの数サイトに関してはデザインは外注するつもりで考えている。理想としては1から10まで自分でやりたいが、デザイン制作も自分が担当するとなると、学習に時間が取られるし、心理的な負担も大きい。受注~納品までの全体の流れに慣れるまでは、ディレクション+コーディングは自分が担当して、デザインは外部の型にお願いするという形で進めたい。
・・・とするとデザイナーさんとのやり取りで必要になってくるのが、ワイヤーフレーム。ワイヤーフレーム作成ツールをリサーチしてみたところ、「Cacoo」「Sketch」など色々出てくるが、最近人気急上昇なのが「Adobe XD」らしい。
ということで今回「Adobe XD」をインストールして、ワイヤーフレームを作成したみた。
そして出来たのがこちら。
download_20200813015317178.png
実物はこちら。
https://xd.adobe.com/view/6ea59344-273e-4760-a8a3-8e7ae6383417-3bf6/
初めて使ってみたが、やはり同じAdobeの製品ということあってPhotoshopと操作方法も似ており、直感的に操作することが出来た。Adobe XDを実際に使ってみて特に素晴らしいと思ったのが以下の3つ。
1,リピートグリッド機能
書いて説明するのが難しいが、1つのパーツを簡単に複製出来る機能。これは画期的だと思う。
2,リンクが設定できる
リンクを設定する予定のボタンなどに対して、リンク先を設定できる。次で挙げるウェブ上での共有機能があることで、この機能がとても活きてくる。
3,ウェブ上で共有し、データのやり取りが出来る
この機能が一番革新的かも知れない。なんとAdobe XDでは、作成したワイヤーフレームをボタン一つでアップロードし、誰でも見れる様にする機能を備えている。その上、公開したURL上でクライアントと会話が出来たり、デザイナーモードを利用することによって、他者へのデータ共有が可能になっているのだ。
他にもこんな機能があるワイヤーフレーム作成ツールはあるのか分からないが、少なくとPhotoshopでのデータ共有に比べると圧倒的にスムーズである。今後業界のスタンダードになっていく気がするので、もっと使い方を学習して、活用していきたいと思う。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です