Adobeのクリエイティブ系ソフトウェアはデザイナーのためであって我々Webディレクターには縁がないものだと思っていませんか?
Webプロジェクトのディレクション資料はこれまでエクセルで作るイメージがありましたが、今回紹介するAdobe XD(無料)をインストールして基本操作が出来るようになっていれば何かと便利なので紹介します。

詳しい使い方はほかのサイトを見に行ったほうがいいです。
ここでは主にWebディレクターがAdobe XDを使えるようになるメリットについて紹介します。

直感的にディレクション資料が作れるツール

Adobe Xdのチュートリアル画面

ウェブサイトのサイトマップやサイト構造をチームで共有する際に頭の中で想像していることが皆に伝わるようにパパっと表現できたら便利じゃないですか?

これまでは、エクセルとかでこんな感じの設計ファイルを作っていましたが、資料を受け取ったほうも直感的に理解しにくかったと思います。

これまでのサイトマップ

慣れている人ならいいのかもしれないですが、やはり不慣れなクライアントさんや上司にこれを見せただけでは自分の提案が上手に伝わりません

そこでXdを用いると、迅速にモックアップが作成できるのです。
ポイントは「時短が出来る」ことと、「無料ソフト」であることでしょう。

いくら視覚的に伝わる資料が用意できても時間がかかってしまってはダメですし、Adobe Photoshopのように高額なツールだと気軽に導入できませんよね。

余談:マインドマップツールも便利だよ

XMind

Xdも優れたツールだと思いますが、Xmindというマインドマップツールも無料で使えてサイト設計に大活躍してます。
僕の使い方はこちらで紹介しています。

XDの使い方 ノンデザイナーでも簡単操作

デザインのスキルに自信が無くてもUIキットが用意されているので、スピーディにワイヤーフレームモデルを構築することが出来ます。
UIキットもモバイル用やPC用等種類も豊富で、制作するときは基本ドラッグアンドドロップで引っ張ってくるだけです。

デザイナーでなくてもPhotoshopやパワーポイントなどが扱える人はストレスなくXdになじんでいけると思います。

UIキットはこんな感じです。

XDのUIキット

UIキットで素材を調達して多少テキストを入力すればWebデザイナーに渡すワイヤーフレームが一瞬で出来上がります。

僕はササっと使うだけという感じなので詳しい使い方はほかの人のブログを参考にしたほうがいいと思います。
このブログとか
https://ebifry.jp/

Webプロジェクトのワイヤーフレームモデル作成に

SEOやマーケティングの繊細な部分ってなかなかエンジニアやデザイナーに伝わりにくいですよね。
出来るだけ具体的で直感的に視覚で分かるような資料を手早く用意してWebプロジェクトのチームメンバーで共有できればより円滑に仕事が出来るようになると思います。

無料で利用可能ってのも素晴らしいポイントなのでインストールしておくだけでも良いと思います。
おそらく今後XDの形式でファイルのやり取りが増えてきそうなので使えるようにしておくといいことあるかも!