フォトショップのレイヤー管理術で作業を効率化しよう！

まずは当たり前ですがキャンバスを作ります。
今回はコンテナ幅980pxのサイトのモックを作りたいので1080×3000（長さはとりあえずで！）で作ります。

キャンバスができたらガイドを引きます。

私の場合は上（ヘッダー）から下（フッター）に向かって制作していくので、まずはヘッダーを作ります。
この時にもうグループを作ってしまいます！

こんな感じで。
キービジュアルもヘッダーに含めようと思うので、このように入れ子にしています。

そしてまずヘッダーナビを作った状態がこちら！

navの中に「navBG」レイヤー、「menu」「search box」グループがありますね。
このmenuとsearch boxをグループにした理由ですが、例えばメニューのフォントを変えたいなぁって時にグループを選択すれば一発で全部変えられますし、
検索ボックスいらないなーって思ったらグループ非表示で一瞬で消せます！
レイヤー、グループ名が英語なのは、日本語だと変換→決定（エンター）→確定（エンター）とレイヤー名をつける度にこの手間が発生するためです。
英語だとトータルで打つ文字数も少なく済むと思うのです…実際はどうかわかりませんが。

ヘッダーナビが完成したので、次はキービジュアルに取り掛かります。

いったん「nav」グループは閉じて、「header」グループの中に「key visual」グループを作ります。
KVレイヤーはKeyVisualからとってます。
1080×500の長方形に、レイヤークリッピングで画像をのせます。

画像はO-DANというサイトから拝借します
（http://o-dan.net/ja/）

いい感じの写真が見つかったので、先ほどの長方形に重ねます。
（ヘッダーナビのサイトタイトルの色がしっくりこなかったので白にしました。笑）
少し暗くしたかったのでmaskレイヤー（黒のべた塗り、不透明度50%）を重ねます。
レイヤーが増えてきたので、いったん「KV」「img」「mask」を「img」グループにしました。
その上にサイトタイトルを乗せます。
「Lorem Ipsum」これがサイト名で、
「dolor sit amet, habitasse accumsan」こっちがキャッチコピーですね。
文字だけじゃ寂しかったので枠もつけました。
そしてサイトタイトルも関連レイヤーが増えてきたので、「site ttl」グループに放り込みます。

ドン！

ドン！！！
という事で（？）、一気に進みましたがやってる事は変わりません。

まずは大きなかたまりでグループを作ります。（works）
次にその中に入るかたまりでグループをつくります。（h2, articles）
先ほどのグループ内にまたグループを作る必要がなければ「h2」グループのようにそのまま作業を続行し、
グループの中にグループを作る必要性を感じたら「articles」内の「article1～article6」のように作っていきます。
最初からグループを作らなくても、関連するレイヤーが増えてきたら適宜作成する感じで大丈夫です！
慣れてきたらある程度かたまりごとに先回りしてグループを作れるようになります。

やる事は変わらないのですが、ここで先ほど「Works」部分で作ったグループがいきてきます。
今回「h2」は同じデザインで統一したいので、「works」グループから「h2」グループを

ぐぐ…

ぐぐぐっと！複製してしまえば良いわけです。
直接選択よりも良い点は、今回は文字と下線の2パーツしかありませんが、
もっとパーツが多い時でも一括で複製できる事と
細かいパーツも漏らさず複製できること、また細かいパーツを選択しようとしてうしろの関係ないものを選択してしまった…というような事がない点ですかね。

デデン！！と一気に進みましたがここまでお読みいただいた皆様はもうだいぶレイヤー画面の見方にも慣れてきたと思います。
一番大きなかたまりの「profile」
その中に「h2」と「article」
「article」の中に「img」と「txt」
といったような構造になってます。

改めてこのようにレイヤーを管理するとどのように便利かといいますと、
「Profileのデザインそのものがだめだよね～」となった時にはarticleを非表示にして作り直す、
「フォントが良くないんじゃない？ちょっと名前と本文のフォント変えてよ」となった時はtxtグループを選択してフォントを変える
というような事ができます。

作る、といってもこれだけなのでとくに言う事もありませんが…。笑
レイヤー画面を見ていただくと、どのグループがどの部分か一目でわかりますよね。

例えば「header」グループを展開すると、ナビやキービジュアルがどのグループに属しているのかすぐにわかりますし、編集する時も楽ですよね。
この考え方を共有できていれば、もし他の人に編集を任せるとなった時も、編集する方も楽だと思います。

さて、一通り完成したあとにモックアップを修正する事は珍しくありません。
レイアウトを変える、パーツを修正する、フォント・テクスチャ・写真を変える…などなど。
しかしレイヤーがきちんと管理されていれば、こういった修正もスムーズに行えます！

例えば、「キービジュアルの下に新着情報を追加して！」と言われたとします。

その場合はこのようにキャンバスの高さを適当に伸ばして、「news」グループを作ります。
この時、並び順がわかりやすいように「header」と「works」グループの間に「news」を作るとわかりやすいです！

そして「works」から「footer」までのグループを選択して、ぐぐぐっと適当に下げてあげます。

まずは「h2」グループを適当なところから複製し、
「bg」で背景を作ったら「date」グループに日付のテキストを打ち込んでいきます。

日付が全て揃ったら、「date」グループを複製し、ずらします。

複製した「date」グループのグループ名を「caption」にし、テキストを書き換えると少し楽できると思います！
また日付、キャプションのまとまりがわかりやすいので、フォントまわりを修正する必要が出てきた時も修正が楽です。
もちろんこの通りにグループを作る必要はなくて、場合によっては日付とキャプションをワンセットにしたグループの方が編集が楽！って事もあると思うので、
そこは自分がやりやすいようにデザインに合わせて作ってあげてください。

あとは線を入れたり位置を調整したりして「news」部分は完成です！

追加だけなら楽ですが、既に作ったものに対する修正依頼もありますよね。
「Works」部分のレイアウトを変えて～と指示があった場合、どのように作業していくか見ていきましょう。

まず「works」グループ内の「articles」グループを複製し、
元のグループは赤、複製したグループは青というように色分けしてあげます（レイヤー・グループの上で右クリックして、カラーを選んであげます）！
なぜこんな事をするのかというと、

こういった場合に便利！であったり、このようなメリットがあったりするからなんですね。
たとえばレイヤーにカラーをつけずに、レイヤー検索で「articles」と入れると、なんの目印もない「articlesグループ」が出てきます。
しかも出てくるのは「articles」グループだけです。中身は出てきません。
しかしカラーをつけてあげると、そのカラーのレイヤーは全て出てきます！

親グループ（というのかしら）にカラーをつければ自動的に子グループ、孫レイヤー（というのかしら…）などにもカラーがつくので
管理、検索、編集が楽です！

さて、修正の準備が整いました！

まずは大胆にサムネイルを1つだけ残して全て消します。（元のデータも残っているので！）

あとは「article1」グループを複製し「article2」に変更　→
「article2」グループを複製し「articleS 1」グループに変更、「thumb」レイヤーの長方形のサイズを変更　→
「articleS」を複製、名前を変更　×3　→
「articleS 4」のみ「thumb」のサイズを変更　→
あとは「thumb」に画像をのせていく
今まで通りこのように修正していきます。

ここで改めてモックアップを2種類ご覧ください。
左のモックが完成したあと、右のモックにするのにあまり手間がかかっていない事がおわかり頂けたでしょうか？
実際、時間にして30分程度で修正できました。
理由として

などがあげられるでしょうか。

個人での制作にもチームでの制作にも言えますが、
誰がどこに何を作ったのか一目でわかったら？
ある程度のかたまりごとにグループ化されていたら？
修正、比較が劇的にしやすくなり、無駄な時間を削減する事ができます！
制作を効率的に行うことにより、より多くの案件を手がける事ができたり、
逆に手がまわりきらないほどの仕事量から解放されるかもしれません。
それほどフォトショップのレイヤー管理術というものは時間を有効活用する手段として優秀なものだと、私は考えています。

もちろん今回ご紹介した内容が全てではありませんし、正解でもありません！
制作者の数だけその人に合ったやり方があり、制作現場の数だけ最適解があります。
私のやり方はあくまでも一例程度に考えていただき、読んでくださった方の作業をもっとも効率化できる方法を編み出すヒントや切り口になれたら嬉しいです！
むしろ、オススメのレイヤー管理術などありましたら教えていただきたいくらいです！笑

他にもアイディアがたまってきたら追記なりシリーズ化なりしてまとめていきます。
今回はこちらで失礼いたします！
お読みいただきありがとうございました！