見やすく綺麗なPSDをつくるためのポイントや覚えておきたい便利機能 10

  • Posted on
  • Category : Tips
見やすく綺麗なPSDをつくるためのポイントや覚えておきたい便利機能 10

自分が普段からどちらかといえばデザインよりもコーディングなどの作業が多いので、中にはただのコーダー側の意見や愚痴っぽいのもあるかもしれませんが、Photoshopでデザインする際に見やすく綺麗なPSDにすることができると思うポイントや知っておくと便利だと思う機能を幾つかあげてみました。IllustratorやSketchを使ってるという人も多いとは思いますが、デザイン制作時にPhotoshopを愛用しているという方は参考にしてみてください :) あくまで個人的に思ったことなので、バリバリのデザイナーさんとかで「もっとこうしたら良くなるよ!」とか「それはしない方が良いのに…」みたいな意見があれば、アドバイスやツッコミ大歓迎です。

※以下で紹介している内容やキャプチャは、Adobe Photoshop CCをWinで使用した時のものが中心となります。
一部バージョンによっては機能がついていなかったりOSによってキーが異なる場合があるので、自身の環境に合わせて置き換えたりするなどしてください。

※説明時に使用するPSDとして「Rusty UI Kit – EpicPxls freebie」を利用させてもらいました。

見やすく綺麗なPSDをつくるためのポイントや覚えておきたい便利機能 10 目次

  1. Alt / Option を押しながらグループ選択すると、グループや効果を一瞬で全開閉できる
  2. グループ・レイヤーにしっかり名前をつけておく
  3. 作業前にある程度グループを作っておく
  4. グループ・レイヤーの並び順
  5. 必要ないグループ・レイヤーは削除する
  6. 「○○○のコピー」と表示されないようにする
  7. カラー機能を活用する
  8. ガイドは必要最低限にしっかりと
  9. 境界線に気をつける
  10. デザインガイドラインや素材用フォルダを作成しておく

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

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

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

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

目次へ

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

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

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

目次へ

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

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

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

目次へ

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

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

目次へ

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

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

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

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

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

目次へ

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

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

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

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

目次へ

7. カラー機能を活用する

カラー機能を活用する

これは自分も毎回必ずやるというわけではないですし、場合によっては無駄に時間を使ったりわかりづらくなる可能性もあるのですが、とあるデザイナーさんが作成したPSDでのカラーの使い方が参考になったのでご紹介します。
カラー指定となるとヘッダーやフッターなどの大きなパーツ(グループ)毎にカラーをつけるというのはよく見かけますが、それ以外で個人的に覚えておきたいなと思った使い方です。

※カラー指定はレイヤーパネルでグループ・レイヤーのところで右クリックした際に表示されるので、そこから7色+カラー指定なしを選択できます。

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

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

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

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

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

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

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

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

※上記で説明しているデバイスというのは、そのサイトのbodyfont-family指定しているフォントを指しています。

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

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

目次へ

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

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

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

デザイン作成時ではそこまで気にならなくても、そのガイドを頼りにコーダーが作業した結果大変な思いをさせてしまったり、場合によってはデザイナー側もそれが原因でデザイン修正することもあったりもするので、できるだけガイドはしっかりと引くようにしましょう。
もちろん全てのガイドを完璧に引こうとすると無駄に時間がかかってしまいますし、引きすぎても逆にわかりづらくなってしまうので、例えばヘッダーやメインコンテンツ領域といったサイト全体に関わるようなレイアウト部分ぐらいは最低限しっかりと引いておくと良いと思います。
また、「もうこのガイドは必要ないな」と思ったらなるべく削除するようにしましょう。

目次へ

9. 境界線に気をつける

境界線に気をつける

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

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

目次へ

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

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

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

目次へ

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

Back to Top

見やすく綺麗なPSDをつくるためのポイントや覚えておきたい便利機能 10

見やすく綺麗なPSDをつくるためのポイントや覚えておきたい便利機能 10

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。