PhotoshopがWebサイトデザインに向かない理由

WebサイトのデザインにPhotoshopが使われる事もありますが、ハッキリ言って個人的にはWebサイトデザインには向いていないと思います。

重い

まず、動作が重いです。
デザインの中から素材を取ろうとして、オブジェクトのレイヤーを右クリックし、「PNG形式で保存」しても、保存場所選択ウィンドウが出るまでにも少し時間がかかる所がテンポ悪いですが、それだけならまだいいです。

「書き出し形式…」を選択した場合、出力する大きさを決める事が出来るのですが、これがとにかく重い。
というより、プレビューで止まってしまう事がしばしば。

通常動作も、ゲーミングPCでもたまにフリーズする場合もあったりと、かなり重たく感じます。

素材を選択しにくい

目的の素材を取るために選択するだけでも、一苦労させられる事もあります。

Photoshopは、描画されている箇所をクリックすると、そのレイヤーを選択できるのですが、ピクセル単位で描画されている箇所を狙ってクリックをしないといけません。
しかも、オブジェクト単位ではなく、オブジェクトのパーツのレイヤーが選択状態になります。

そのため、クリックして対象のパーツを選択したら、親元のレイヤーを探し、それを右クリックしてPNGで保存して、出力された素材を確認したら、パーツが一部分足りてなかったー！！　なんて事もあります。
しかもそのパーツが、離れたレイヤーにあると、そのパーツを目的のレイヤーまで連れてきて、グループ化してまた出力しなければならないなど、手間がかかります。

画質のよい素材を出力できない

PC版デザインから素材を取り出す分には、そのままピクセル単位で使えるので、まぁいいですが、問題はスマホ版デザインからです。

スマホは横幅約375px（端末により上下する）と暫定されていますが、実際の所、数倍の解像度で描画されています。
そのため、本当に横幅375pxで制作されたデザインデータから素材を取り出すと、実機で観た際には、ぼやけてしまいます。

素材を取り出す際に、レイヤーを右クリック、「書き出し形式…」をクリックすればサイズ指定して書き出せますが、あくまでも引き延ばされているだけです。
しかもこの動作が、先述の通りとにかく重く、プレビューが表示される前から動かず、処理に失敗してしまう事も多いです。

Adobe XDを使うべき

Adobe XDで作られたデザインを渡されたとき、ああこれはまさに今求められたツールだなって思いました。

オブジェクトは範囲選択で簡単に行えるし、画像も解像度を落とさずに入れ込めば、出力の際に画質のよい状態で出力できるようですし、しかも動作も軽快です。

昔はPhotoshopでもよかったのだと思います。
スライス機能も、その当時求められていた機能でしょうが、今となっては違います。
普通にスライスすると、四角形のオブジェクトでなければ背景ごと切り抜いてしまいますし、今はレスポンシブやパララックス、その他動的要素も多いため、周囲が透過された画像でなければ成り立ちません。
しかも、高解像度が当たり前になった今、ピクセル単位で範囲選択をするのは、じつに面倒すぎる作業です。

Adobe Creative Cloudに入っているならば、間違いなくAdobe XDを使うべきです。
未だにFireworks、それもMacromedia時代のFireworksを無料で使っているような所には無縁の話でしょうが、Creative Cloudに入っている企業ならば、絶対にAdobe XDを使ってみるべきです。

デザイナーも新しいツールを使うべき

たしかにPhotoshopなら、写真の加工もそのまま行えるため便利かもしれませんが、コーダーからすれば、膨大なレイヤーを確認して、必要な素材のレイヤーをかき集めて、不要なレイヤーを非表示にし、グループを整えたうえで書き出すといった、とても面倒な作業を行っているのです。
レイヤーも膨大なうえに、写真の色調補正データまで大量に含まれていると、そりゃ重くもなってきます。

デザイナーは、ずっと同じツールで絵を作る事だけが仕事なのでしょうか。
コーダーは、常に利用価値のある新しい技術を追っています。
明らかに古いと思ったツールは、今まで使わせていただいた事を感謝しつつ別れを告げ、さらに便利なツールを使用する事も考えます。
それが技術者ですから。

ならばデザイナーも、新しいツールを探してみるぐらいしてくれなければ不公平というものです。
今の自分が得意だからと言って、同じやり方に固着するばかりではなく、新しいツールは高い敷居と考えるばかりでなく、さらなる便利を求めて、新しいツールに手を付ける事も考えるべきです。