フォトショップのレイヤー管理術で作業を効率化しよう！
2017.06.23
デザイナーのみなさん、こんにちは！
今回は、私なりのフォトショップのレイヤー管理術について書いていきたいと思います。
Webデザインに限った話ではないと思いますが、フォトショップのレイヤーが整理されていると非常に作業が捗ります。
まずは具体的にどのように作業が捗るのか解説してから、実際のレイヤー管理術について書いていこうと思いますが、
レイヤー管理術だけ知りたい！って人は読み飛ばしても大丈夫です！
それではよろしくお願いします！
具体的にどう捗るの？
修正する際、すぐに目当てのレイヤーをすぐ選択できる！
シェイプやテキストを直接選択して修正する事もできますが、一気にたくさんの要素を選択したい場合もありますよね。
そういった時、直したい箇所がグループ化されていたらどうでしょうか？
細かいパーツを1つ1つ選択する必要もありませんし、グループを複製して中身だけ作り直し、交互に見比べるなんて事もできます！
レイヤー名で中身がわかる！
レイヤーが増えてくると、「レイヤー247」「レイヤー301のコピー3」…など数字が膨大になってきますよね。
こういった時、どれがなんのレイヤーかわからなくなった経験はないでしょうか？
「背景」「ボタン」「枠」など、簡単にレイヤー名をつけてあげるだけで、劇的にわかりやすくなりますよ！
また、なんのレイヤーの上に何があるか、重なり順もわかりやすくなります。
チームでの制作が捗る！
これは本格的に経験した事がないのでなんとも…なのですが、
例えば「ここのボタンのデザインを別のものにしたいな〜」と思ったとするじゃないですか。
そんな時レイヤー名が数字だったりしたらどれがなんのレイヤーかわからないだとか、どういう経緯でそうなったのか、
ページ背景→ボタン背景→記事サムネイル→記事キャプション→ボタンキャプション
みたいな並び順のレイヤーだったらどうでしょう。
「あれを非表示にして、こっちも非表示にして…あれ、この非表示レイヤーなんだったっけ？」
なんて事になってしまいます。
一番上にレイヤー作って問答無用で上書きしていく事もできますが、正直美しくない…と思ってしまいます。
レイヤー数が増えていったら容量も大きくなってしまいますからね。
実際に制作してみる
お待たせしました！
それでは早速私流のレイヤー管理術について解説していきたいと思います。
今回はこちらのモックアップを制作していく実際の流れを見ていただきながら、解説していきたいと思います！
左が一通り制作したもの、右が修正したものになります。
キャンバスを作る
まずは当たり前ですがキャンバスを作ります。
今回はコンテナ幅980pxのサイトのモックを作りたいので1080×3000（長さはとりあえずで！）で作ります。
ちょいメモ ガイドを引く際の計算式の一例
（キャンバスの幅-コンテナ幅）÷2 = a
0 + a = 左のガイド
キャンバスの幅 – a = 右のガイド
ヘッダーナビを作る
私の場合は上（ヘッダー）から下（フッター）に向かって制作していくので、まずはヘッダーを作ります。
この時にもうグループを作ってしまいます！
こんな感じで。
キービジュアルもヘッダーに含めようと思うので、このように入れ子にしています。
そしてまずヘッダーナビを作った状態がこちら！
navの中に「navBG」レイヤー、「menu」「search box」グループがありますね。
このmenuとsearch boxをグループにした理由ですが、例えばメニューのフォントを変えたいなぁって時にグループを選択すれば一発で全部変えられますし、
検索ボックスいらないなーって思ったらグループ非表示で一瞬で消せます！
レイヤー、グループ名が英語なのは、日本語だと変換→決定（エンター）→確定（エンター）とレイヤー名をつける度にこの手間が発生するためです。
英語だとトータルで打つ文字数も少なく済むと思うのです…実際はどうかわかりませんが。
ちょいメモ 命名規則について1
「header」「nav」こちらのグループ名はコーディングする際に使うタグを想定して命名してます！
また「BG」こちらはBackGroundからとってます。背景だよっていうのが一瞬でわかります。
キービジュアルを作る
ヘッダーナビが完成したので、次はキービジュアルに取り掛かります。
いったん「nav」グループは閉じて、「header」グループの中に「key visual」グループを作ります。
KVレイヤーはKeyVisualからとってます。
1080×500の長方形に、レイヤークリッピングで画像をのせます。
いい感じの写真が見つかったので、先ほどの長方形に重ねます。
（ヘッダーナビのサイトタイトルの色がしっくりこなかったので白にしました。笑）
少し暗くしたかったのでmaskレイヤー（黒のべた塗り、不透明度50%）を重ねます。
レイヤーが増えてきたので、いったん「KV」「img」「mask」を「img」グループにしました。
その上にサイトタイトルを乗せます。
「Lorem Ipsum」これがサイト名で、
「dolor sit amet, habitasse accumsan」こっちがキャッチコピーですね。
文字だけじゃ寂しかったので枠もつけました。
そしてサイトタイトルも関連レイヤーが増えてきたので、「site ttl」グループに放り込みます。
ちょいメモ 命名規則について2
img こちらはimageからとっているのと、HTMLにもimgタグがありますよね。
txt textから取ってます。拡張子にもあるので、ぴんとくる方も多いはず。
site ttl ttlはtitleからきてます。コーディングの際、class名にttlを使う場面もちょくちょくあります。
Works部分を作る
ドン！！！
という事で（？）、一気に進みましたがやってる事は変わりません。
まずは大きなかたまりでグループを作ります。（works）
次にその中に入るかたまりでグループをつくります。（h2, articles）
先ほどのグループ内にまたグループを作る必要がなければ「h2」グループのようにそのまま作業を続行し、
グループの中にグループを作る必要性を感じたら「articles」内の「article1～article6」のように作っていきます。
最初からグループを作らなくても、関連するレイヤーが増えてきたら適宜作成する感じで大丈夫です！
慣れてきたらある程度かたまりごとに先回りしてグループを作れるようになります。
ちょいメモ 命名規則について3
thumb thumbnail、サムネイルから来てます。
thbなど省略しても良いかもしれません！
Profile部分を作る
やる事は変わらないのですが、ここで先ほど「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」グループを複製し、
元のグループは赤、複製したグループは青というように色分けしてあげます（レイヤー・グループの上で右クリックして、カラーを選んであげます）！
なぜこんな事をするのかというと、
- 元のデータをとっておいて、新しいデータと比較したい
- すぐ元に戻せるようにしておきたい
- A案、B案、C案など複数案提出したい
- マウスオン時、マウスオフ時の差分を切り替え、管理しやすい
- 色がついてるからどれがどれかわかりやすい
- レイヤー検索でわざわざレイヤー名を指定しなくても色でグループ全体を見つけられる
こういった場合に便利！であったり、このようなメリットがあったりするからなんですね。
たとえばレイヤーにカラーをつけずに、レイヤー検索で「articles」と入れると、なんの目印もない「articlesグループ」が出てきます。
しかも出てくるのは「articles」グループだけです。中身は出てきません。
しかしカラーをつけてあげると、そのカラーのレイヤーは全て出てきます！
親グループ（というのかしら）にカラーをつければ自動的に子グループ、孫レイヤー（というのかしら…）などにもカラーがつくので
管理、検索、編集が楽です！
さて、修正の準備が整いました！
まずは大胆にサムネイルを1つだけ残して全て消します。（元のデータも残っているので！）
あとは「article1」グループを複製し「article2」に変更 →
「article2」グループを複製し「articleS 1」グループに変更、「thumb」レイヤーの長方形のサイズを変更 →
「articleS」を複製、名前を変更 ×3 →
「articleS 4」のみ「thumb」のサイズを変更 →
あとは「thumb」に画像をのせていく
今まで通りこのように修正していきます。
ちょいメモ レイヤーの命名規則3
「articleS」とありますが、これはS、M、LのSです。
私はレイヤー名などに使うのはSとLだけで、Mにあたるサイズのものには何も書きません！
このように末尾に補足情報をつけると、同じような要素がたくさん並んだ時多少わかりやすくなります。
サイズの他にも、
「T」Top 「B」Bottom 「L」Left 「R」Right
など位置を示すマークもよく使います。
まとめ
ここで改めてモックアップを2種類ご覧ください。
左のモックが完成したあと、右のモックにするのにあまり手間がかかっていない事がおわかり頂けたでしょうか？
実際、時間にして30分程度で修正できました。
理由として
- 要素を一括で選択する事が楽！
- そのため、要素の移動、複製にかかる時間が劇的に短縮される
- レイヤー名が明確なため、何を編集するべきか一目でわかる
などがあげられるでしょうか。
個人での制作にもチームでの制作にも言えますが、
誰がどこに何を作ったのか一目でわかったら？
ある程度のかたまりごとにグループ化されていたら？
修正、比較が劇的にしやすくなり、無駄な時間を削減する事ができます！
制作を効率的に行うことにより、より多くの案件を手がける事ができたり、
逆に手がまわりきらないほどの仕事量から解放されるかもしれません。
それほどフォトショップのレイヤー管理術というものは時間を有効活用する手段として優秀なものだと、私は考えています。
もちろん今回ご紹介した内容が全てではありませんし、正解でもありません！
制作者の数だけその人に合ったやり方があり、制作現場の数だけ最適解があります。
私のやり方はあくまでも一例程度に考えていただき、読んでくださった方の作業をもっとも効率化できる方法を編み出すヒントや切り口になれたら嬉しいです！
むしろ、オススメのレイヤー管理術などありましたら教えていただきたいくらいです！笑
他にもアイディアがたまってきたら追記なりシリーズ化なりしてまとめていきます。
今回はこちらで失礼いたします！
お読みいただきありがとうございました！
関連
SEO対策コンテンツSEO
SEO基礎SEO対策
Google関連SEO対策
