レイヤー整理って面倒くさいし、フォルダやデータをなんと命名して良いか分からなくておざなりになったりしますよね。しかしwebデザインのレイヤーは枚数が多く、整理されてないと管理ができなくなります。レイヤー整理をすることで、修正やコーディングの際にどこに何があるか分かりやすくなり、後工程の効率化につながります。今回はレイヤー整理について学び、分かりやすくキレイなPhotoshopデータをつくりましょう！1. レイヤーの基本の並べ方上から下へ並べるまずレイヤーの全体の並べ方について、基本的には上から下へ要素が並ぶようにします。理由人間の目線の動きとして、上から下に見ていくため探しやすくなるコーディングの際もだいたい上から下にコードを書くから2. セクションごとにフォルダを作る切りのいいセクションごとにグループ化することで、見た目がすっきりし、探している箇所にすぐたどり着けます。レイヤー分けの一例headermv（もしくはkv）mainaboutworkscontactfooterグループ化のショートカットグループ化：グループ化したいレイヤーを選択後、ctrl(command)＋Gグループ解除：解除したいグループを選択後、ctrl(command)＋shift＋Gまたグループは基本的に閉じて置くことで、見た目がすっきりします。心がけましょう。3.レイヤーの命名規則大まかにグループは出来ましたが、中を見るとテキトーにグループ化したものが並んでいる、なんてこともあるあるですね。この中も上から下に基本は配置し、名前も分かりやすくつけていきます。よく使うグループ名の例見出しtitle / subtitle中の要素cntents / box画像img文字textロゴlogoアイコンiconボタンbtn背景bgこの時、コーディングは別の方が行う場合は、命名はHTMLタグに全て合わせなくても大丈夫です。（例えば見出しをh1,h2にするとか）エンジニアによって使用するタグが変わることもあるためです。見て何の要素なのか、誰が見ても分かるような整理の仕方が大事です。4.特定のレイヤーの整理ホバーやフローティングボタン特定のレイヤーには「-(ハイフン)」以下の例のようなレイヤーには、分かりやすいように名の頭に「-(ハイフン)」をつけて置くと分かりやすいです。例-hover_btn-bunner-btnさらにPhotoshopでは、レイヤーを色分けして管理ができます。ホバーやフローティングボタンなど特殊なデザイン部分のレイヤーは色付けしておくと分かりやすいです。5.レイヤーのカラー変更の活用4でも紹介しましたが、レイヤーの色付けの活用は他にもあります。コンテンツ量が多い時には、セクション毎に色分けしておくととても便利です。視覚的な見やすさもそうですが、レイヤーのフィルタリング機能で、レイヤーの色ごとに絞り込みもできるためです。6.不要なレイヤーの削除デザイン中、ボツ案であったり前回データであったりを非表示にして残していることもあります。しかしコーディングの際、マウスホバーといった、特定の条件で表示されるものなのか、いらないレイヤーなのか、エンジニアの人は判断がつきません。さらに、不要なレイヤーを入れておくとデータも重くなっていきます。最終的には不要レイヤーは削除しましょう。もし消すと都合が悪い場合は…以下方法で対応しましょう。別名保存でデータのバックアップを取るレイヤー名に 「仮」 「dummy」 「pattern-A,pattern-B」 など分かる名前をつけるまとめいかがだったでしょうか？レイヤー整理は手間に感じますが、分かりやすさ・効率につながる大事な作業です。実際にやってみると、ここはこうしようとどんどん新しいやり方も発見できると思います。ぜひ取り入れていきましょう！