こんにちは！江頭です。

最近夜が寒いか暑いかわからず、寝巻と布団の組み合わせにいつも失敗しています。
さて、今回はwebをつくるデザインツールについての話をします。


デザインツールといえば、クリエイティブ関連で学んでいる方ならPhotoshopやIllustratorに一度はお世話になったことがあるでしょう。
私の場合、学生時代は紙の印刷物のデザインが多かったのもあり、Photoshopはイラストや写真のレタッチに使用する程度でした。
そのため、web業界に足を踏み入れてみるとPhotoshopが広く使われていることに衝撃。
（図形的なデザインだとIllustratorが絶対便利じゃん！と思っていたので。。。）

そのように、webデザインではwebデザイン独自のツールや、その使い方があります。
今回それらについてさくっと説明したいと思います！

webデザインにおけるPhotoshop

ここで改めて、Photoshopについて軽くご紹介します。

Photoshopは、ラスター（ビットマップ）処理に特化したソフトです。jpegやpngなどのいわゆる一般的にいう「画像」の編集に適しており、写真の編集などがもっとも代表的な用途でしょう。
そのため、レイアウト作業であるwebデザインにPhotoshopを使うのは少しギャップがあるかもしれません。（私はありました）
しかし、webデザインでPhotoshopを使うのにはいくつかメリットがあるのです！

Photoshopのメリット

・ 基準がピクセル
webは単位が1ピクセルごとで、例えばCSSで長方形を描画するときも254×300px！のような数値指定が基本です。なので、描画の単位が絶対的にピクセルでの指定になるPhotoshopはとっても便利。エンジニアさんへの受け渡しがスムーズです。

・ レイアウトと一緒に画像パーツを調整できる
Photoshopではレイアウトとパーツの加工が一緒の画面でできます。
例えば全体のトーンに合わせて図版の色味を調整する、トリミングでの画像の見え方を確認する、などはPhotoshopが便利です。
しかも、Photoshop CCから登場した「アセット書き出し」機能は編集と同時に画像が自動で書き出される！これ、本当に目からウロコでした。超便利。なんで知らなかったんだろう…となった機能のひとつです。

Photoshopの弱点をカバーしたプロトタイピングツール

ここまで紹介したPhotoshopですが、そんなPhotoshopのデメリットとして、やっぱり重いことが挙げられます…
アートボードやレイヤーを大量生産しているとソフトが落ちて悲しみに暮れますし、オブジェクトの移動などというシンプルな動作1つも、環境によっては10秒以上かかってしまったり。
webのレイアウト作業でその重さだとたまったものではありません、、、

それらをカバーしたものとして、webなどのUIデザインに特化した「プロトタイピングツール」と呼ばれるものが同じようにデザインツールとして使われています。2010年に公開されたsketchや、2015年に公開されたAdobe XDなどが主に挙げられます。
特にAdobe XDは今広く使われていて、アクアリングの現場でもデザインツールとして定着しています。私も先日XDでLP制作を行いました。
作業画面はこんな感じです！

※ sketchについては私も触れた機会が少ないので割愛しますが、XDが登場するまで多く使われてきました。詳細はぜひこういった記事をご覧ください～
https://webdesign-trends.net/entry/6613

XDの長所と弱点

XDの長所はといえば、こんな感じです。


・ ベクター処理が基本で、UIデザイン用に機能が絞られている。
図形がカンタンに描画できるので、Illustratorと感覚が似ていて個人的にはめっちゃ使いやすい。

・ スマホデバイスで実際にデザイン確認ができる
実機でリアルタイムで見れるので、フォントサイズを想像しながら悩むこともない。 実際に見て確かめながらデザインできます。

・ デザインだけでなくページ遷移や簡易なアニメーションも使用できる
プロトタイプとしてそのままお客さまに見せたり、ユーザーに実際に使ってもらってテストすることができます。


XDの弱点は、シンプルな図形描画以上のグラフィック表現や写真補正ができないこと。webの中で使う写真や図などを書き出すときは、やっぱりPhotoshopにお世話になります。

今まで紹介したツール（とくにXDとPhotoshop）は、人の好みやデザインの内容次第で使い分けているのが概況です。
ちなみに、わたしが普段業務で使っているツールを図にするとこんな感じです。

まとめ

PhotoshopとXDを中心に、業務で使っているデザインツールを紹介してきました。
もちろんこうしたツールは（特にITだと）変遷が激しいので、状況は今後も変わっていくと思います。
アクアリングでも先輩が新しいデザインツールを紹介することがありますが、webそのものの変化に合わせてツールもどんどん進化していって、いつも驚きます！
これらのツールはwebに携わっていないとあまり触れないものかと思いますので、興味があれば、学生時代でもぜひチャレンジしてみてください！

（※XDはわりと操作が簡単ですし、制限付きですが無料でダウンロードできるのでおすすめです！）