Photoshopのレイヤーはグループ分けしておく

最近はFigmaでサイトのデザインを制作することが多くなりましたが、今もPhotoshopで制作している現場もあります。

フォトショ（Photoshop）のPSDファイルは、他のデザイナーやコーダーも編集することがあります。そのため、各レイヤーをボタンなら「btn（ボタン）」フォルダを作ったり、ヘッダーの部分は「header（ヘッダー）」というふうに、グループ分けをしておきましょう。

会社内のルールにもよりますが、できれば上のように、英語で表記するのがコーダーには優しいです。Photoshopの「画像アセット」という機能を使えば、例えばレイヤー名（グループ名でも良い）に「btn_scroll.png」と記述すると、そのレイヤーを指定の画像名で書き出してくれるからです。

レイヤーがきちんとグループ分けされていないと、コーダーによっては、ブツブツと文句を行ってきます。ちょっとくらいいいじゃんって思うんですけどね…。PhotoshopがCC版になる前は、画像アセットの機能が無く、すべての画像をコーダーがスライスで切り出していました。画像アセットが登場した途端に、コーダーがデザイナーに対して、「ちゃんとグループ化してください」と言い始めたのには、僕はやや納得してないのですが、まぁそのへんは寛容になりましょう。