自分が普段からどちらかといえばデザインよりもコーディングなどの作業が多いので、中にはただのコーダー側の意見や愚痴っぽいのもあるかもしれませんが、Photoshopでデザインする際に見やすく綺麗なPSDにすることができると思うポイントや知っておくと便利だと思う機能をいくつかあげてみました。 最近だと特にレスポンシブが関連してIllustratorやSketchを使ってるという人も多いとは思いますが、デザイン制作時にPhotoshopを愛用しているという方は参考にしてみてください :)

あくまで個人的に思ったことなので、バリバリのデザイナーさんとかで「もっとこうしたら良くなるよ!」とか「それはしない方が良いのに...」みたいな意見があればアドバイスやツッコミ大歓迎です。

  • ここで紹介している内容やキャプチャは「Adobe Photoshop CC 2017」を使用した想定のものになり、バージョンによっては紹介している動きと異なる場合があります。
  • ショートカット表記はWinをベースにしたものになるので、Macを使用している方は適宜置き換えてください。
  • 説明時に使用するPSDとして「[Rusty UI Kit - EpicPxls freebie](http://www.epicpxls.com/freebies/ui-kits/rusty-ui-kit)」を利用しています。

Alt / Option を押しながらグループ選択すると、グループや効果を一瞬で全開閉できる

グループや効果を一瞬で全開閉できる動きを示したイメージ

グループ内に沢山のグループ・レイヤーが入っていたり様々な効果をつけているレイヤーが複数あったりするとレイヤーパネルがかなり長くなってしまい、そのPSDを作った本人でさえ見づらく目的のグループ・レイヤーを探すのに時間がかかってしまうことがあります。
そんなときに便利なのがこの方法で、親となるグループ横についている矢印(キャプチャで丸く囲んでいる部分)をAlt(Win) / Option(Mac)を押しながらクリックすることで、その中で展開されているグループやレイヤー効果などを一瞬で全て閉じた状態にすることができます。
また、閉じた状態で同じことをすれば逆に全てを展開した状態にすることができます。

さらに上のイメージでもそのような感じに配置がされていますが、予め全てのグループ・レイヤーが入るようなグループを用意しておくとより便利です。
少しレイヤーがごちゃごちゃしてきたなと感じた時やコーダーさんにデータを渡す際にそのグループを使って選択すれば、簡単に全てが閉じられてスッキリした状態にすることができます。

グループ・レイヤーにしっかり名前をつけておく

point to make beautiful psd 02

正直手間ではあるので急ぎのデザイン制作時などは適当になってしまいがちですが、グループ・レイヤーにしっかりと名前をつけておくことでそのPSDを使ってコーディングする人はもちろん、後で自分が修正する場合などもわかりやすいですし、どこにあるのか探す時間も短縮できます。
バージョンによってはレイヤー名で検索ができるので、よりわかりやすい名前をつけておけばパッと見だけでなく、検索機能を利用して目的のレイヤーを早く見つけることができます。
また、余裕があれば更にそのグループ名に#headerや#footerという感じでidやclassに使えそうな名前をつけておくと、自分がそのデザインをコーディングする時やコーダーさんが命名に悩む時間を少しでも減らす手助けになるかもしれませんね。

作業前にある程度グループを作っておく

point to make beautiful psd 03

これはある程度作ってからやひと通り作り終えてからやる人もいると思いますが、ヘッダー・フッター・サイド・メインコンテンツなどのように予め確実に作成するとわかっているようなものであれば、大まかにでも最初からそのグループを作成しておくとレイヤーパネルがごちゃごちゃになることが少なくなると思います。
また、少しごちゃごちゃしてきたら上で紹介したグループや効果を一瞬で全開閉できる機能を使ってすぐにスッキリさせたりもできるので、自分はまず初めにグループ作成をすることが多いです。

グループ・レイヤーの並び順

個人的には上の「作業前にある程度グループを作っておく」と同じタイミングでやることが多いのがグループ・レイヤーの並び順変更で、レイヤーパネルでのグループ・レイヤーの並びを上から「ヘッダー → ナビ → コンテンツ → サイド → フッター」といった形でコーディング時に組む順番のようにしておくとわかりやすくなると思います。
また、デザイン時も大体どの辺にグループ・レイヤーがあるのか把握しやすくなります。

必要ないグループ・レイヤーは削除する

当たり前のことではありますが、確実に必要ないとわかっているグループ・レイヤーがある場合は削除しましょう。
PSDの容量を抑えたりレイヤーパネルを綺麗にするだけでなく、デザイナーの意図しないものになってしまったなどのミスを未然に防ぐこともできます。

これは実際に自分の周りで起きたことなのですが、中途半端にデザインしたレイヤーを残してしまっており、それを何かのタイミングでコーダーが気付かずに表示させてしまった結果、間違ったデザインで組まれてしまうといったことがありました。
もちろん予めどのようなデザインなのかをしっかり確認しておけば防げますが、必要ないものを削除しておけばこういったことも起こらなかったと思うので、特に残す理由がなければ削除するようにしましょう。

もし、現段階は必要ないから非表示だけど今後使う可能性があってどうしても消せないレイヤーなどがある場合は、少し手間にはなりますがそれ専用のPSDを別途作成するとか、同じPSD内であればそれらをわかりやすい名前をつけたグループなどにしてまとめておくのがオススメです。

ちなみに、必要ないと思うものがほとんど非表示になっているのであれば、バージョンによっては検索機能で「属性が非表示」のみを絞り込むことができるので、この機能を使うことで簡単に非表示のレイヤーなどを見つけて削除することができます。

「○○○のコピー」と表示されないようにする

「○○○のコピー」と表示されないようにする設定ボタン位置を示すイメージ

例えば「レイヤー 1」というレイヤーをーコピーすると、デフォルトでは「レイヤー 1 のコピー」といった感じで「のコピー」というのが追加されます。

これをやめたいときはレイヤーパネル右上(キャプチャで丸く囲んでいる部分)をクリックし、メニュー下部の「パネルオプション」を選択、さらにその中で一番下に表示されている「コピーしたレイヤーとグループに「コピー」を追加」のチェックボックスを外せばグループとレイヤーをコピーした際に「のコピー」が追加されなくなります。

明らかに違う内容になる場合はグループ・レイヤーをコピーする際に名前を変更するのが一番ですが、同じものを使用したい場合で「このコピー表記が鬱陶しい!」と感じる人は上記方法で付かないように設定できます。

カラー機能を活用する

各レイヤーにカラー機能を適用したイメージ

これは自分も毎回必ずやるというわけではないですし、場合によっては無駄に時間を使ったりわかりづらくなる可能性もあるのですが、とあるデザイナーさんが作成したPSDでのカラーの使い方が参考になったのでご紹介します。

カラー指定となるとヘッダーやフッターなどの大きなパーツ(グループ)毎にカラーをつけるというのはよく見かけますが、それ以外で個人的に覚えておきたいなと思った使い方です。 ちなみに、カラー指定はレイヤーパネルでグループ・レイヤーのところで右クリックした際に表示され、そこから7色+カラー指定なしを選択できます。

リンク先指定や補足説明などに利用する

カラー数が多すぎても逆にわかりづらくなるので注意が必要ですが、「この画像はスライドで切り替えるようにしたい」とか「このボタンのリンク先はここ」といった、デザインを見ただけではわからない説明などをする際にカラー指定を利用する方法です。
注釈ツールが使われていることも多いですが、この場合はPSD上にそれぞれカラー指定をしておき、別途テキストファイルやメール等でそのカラーを使いながら補足や動きの指示をまとめてもらうという形になります。
指示が丁寧な場合やすぐにデザイナーに確認できる環境であれば必要ないですが、そうではなくいつもこの手のやり取りが何度も発生してしまう時などは取り入れてみると無駄なやり取りが減るかもしれません。

ボタンのhoverやactiveがある部分にカラーを付ける

ボタンのhoverやactiveがある部分にカラーを付けたイメージ

上の内容と同じような理由で、何か動きをつけてほしい箇所などにカラー指定を利用します。
例えば、通常時の見栄えをしたボタンの上に「マウスオン」とか「hover」のようなレイヤー名でそのボタンのhover時やactive時のデザインが置かれているということがあると思いますが、それらを「hover時はブルー、active時はレッド」というように更にカラー指定しておくと、PSDを見た時に「ここは何か変化を付けたいんだな」というのがパっと見でわかりやすいです。
また、デザインを渡す際に「カラー指定があるところはボタンが切り替わる動きの実装をお願いします」などの文章も添えておくと、よりコーダーにどのように組んでほしいかが伝わりますね。

フォントの扱い毎にカラーを付ける

フォントの扱い毎にレイヤーカラーを付けたイメージ

例えば「レッドは画像、ブルーはデバイス、イエローはWebフォント」という感じでそれぞれテキストが使用されているレイヤーにカラー指定がされているとアンチエイリアスの有無などなくてもパっと見でそれぞれのテキストはどのようにすれば良いのかがわかりやすくなります。(ここでいうデバイスとは、そのサイトのbodyfont-family指定しているフォントを指しています。)

ここ最近webフォントを使う機会が多くなったこともあり、今までは見出しなどの文字を画像として切り出していたものが実はwebフォント対応で結果的に切り出した画像が無駄になってしまったり、逆にwebフォントで良いと思っていたものが画像でないとダメと言われてしまうことがありました...。
また、デバイスで表示したいところはアンチエイリアスなしでデザインを作成してくれる人もいるのですが、たまに全てにかかった状態でどれを画像にしてどれをデバイスにしたいのかがわからないということも稀にあります。

はじめに確認したりルールみたいなものをお互いにしっかり認識している場合はここまでしなくても良いかもしれませんが、少しでもわかりやすくしたいときとか先ほどの例のように全てアンチエイリアスありで作成している時などには便利な方法だと思いました。

ガイドは必要最低限にしっかりと

PSDにガイドを引いたイメージ

デザイン制作時にガイドを利用する人は多いと思いますが、たまに1pxや2pxなど微妙にずれているガイドを引き、それに合わせてデザイン制作したことによって様々なところでズレが生じてしまっているPSDを見ることがあります。
今では自分がこのようなデザインを受け取りコーディングすることになった場合、明らかにミスしているような箇所はある程度こちらで直したり意図的なのかミスなのか判断が難しいものはデザイナーさんに確認したりするものの、以前気付かずに微妙にズレが生じたデザインでコーディング作業をした結果、後々いろいろな箇所に影響が出て大変な思いをしたことがありました...。

デザイン作成時ではそこまで気にならなくても、そのガイドを頼りにコーダーが作業した結果大変な思いをさせてしまったり、場合によってはデザイナー側もそれが原因でデザイン修正することもあったりもするので、できるだけガイドはしっかりと引くようにしましょう。

もちろん全てのガイドを完璧に引こうとすると無駄に時間がかかってしまいますし、引きすぎても逆にわかりづらくなってしまうので、例えばヘッダーやメインコンテンツ領域といったサイト全体に関わるようなレイアウト部分ぐらいは最低限しっかりと引いておくと良いと思います。 また、もう必要ない思ったガイドはなるべく削除するようにしましょう。

境界線に気をつける

シェイプを拡大表示すると境界線がぼやけているイメージ

バージョンによってはこの現象が起きないようにする機能があったり、予めその機能が有効になっていることもありますが、特に気にせずシェイプを使用した場合にキャプチャのように境界線がぼやけてしまうことがあります。
本当は含めなくても良いのに意図的なものなのかと思ってスライスさせてしまうといったことを防ぐためにも、境界線が綺麗になるように作成しましょう。

ここでは特によくあることかと思いシェイプを例にしましたが、画像などを縮小して配置したりする際なども境界線部分が少し薄くなってしまったりぼやけることもあります。

デザインガイドラインや素材用フォルダを作成しておく

デザインガイドラインの例

こちらは複数人で作業する場合に特に取り入れたほうが良い点で、デザイン制作時にカラースキームやロゴ・ボタン・アイコンといった共通で使用するような素材をまとめるフォルダを用意しておくと、デザインの差異などが生じるリスクを減らすことができます。
その際スマートオブジェクトを利用しておくと、拡大縮小なども容易にできますし、あとでデザインの変更が入った場合もそれを編集すれば一気に変更することができるので何かと便利です。
また、デザイナーだけでなくコーダーもそれを見ることによって「全体的なフォントカラーはどの色なのか」や「このボタンデザインを使い回すのか」など、そのデザインでどのような共通スタイルが使用されるか把握しやすくなります。


以上、Photoshopでデザイン制作する際に少しでも綺麗なPSDをつくるために個人的に覚えておいたほうが良いと思うポイントや知っておくと便利だと思う機能の紹介でした。
細かいところまで見ると他にもいろいろあるとは思いますが、今回は全体的にバリバリのデザイナーとかでなくてもすぐに取り入れることができると思うものに絞ってみました。

現状特に気にせずにデザインを作っていつも散らかった感じのPSDになってしまうという方は、ここで紹介した内容を是非試してみてください :)