Photoshopで共同デザイン作業するときのポイント、注意点25個まとめ

デザイン事務所で働いていたり、フリーランスで活動している場合に、他のデザイナーや開発者と一緒に、ひとつのプロジェクトを進めて行くことがあるかもしれません。そんなときに、共同デザインを行う人にも分かりやすい、整理整頓されたPSDファイル作成のポイント、注意点がいくつかあります。

海外デザインブログDigitalTelephay.comで、Photoshopを使ったコラボレーションを行うときのポイント、注意点を25個まとめたエントリー「25 Best Practice for Collaborative Work in Photoshop」が公開されていたので、今回はご紹介します。

自分だけでなく、初めて見た人にも分かりやすいPSDファイルの整理方法を念頭に置いてデザインすることで、より効率的なデザイン制作を行うことができます。

詳細は以下から。

普段から心がけたい、PSDファイルの扱い方、ポイント

[dropcap1]1[/dropcap1]

ガイドを積極的に利用しよう

Webデザイン制作において、ピクセル単位のずれがデザインにおける致命傷となってしまう場合があります。ガイドラインを活用して、グリッド幅やマージン幅などを描き、ヘッダーなどのセクションごとにラインを設けることがポイントとなります。あまりラインを引きすぎると見づらくなってしまうので、ほどほどにしておきましょう。

[dropcap1]2[/dropcap1]

隠れたレイヤーを削除しよう

複数人でひとつのPSDファイルを触っているときに、非表示にされているレイヤーを見かけたりしませんか。たいていの場合は、デザインしたが使わなくなった不要な素材の場合が多いでしょう。またはホバー時、アクティブ時など切り替えが必要な場合も考えられます。(こちらについては次のポイントで詳しく）

これらの不要なレイヤーを削除することで、PSDファイルサイズとRAM使用量を抑えることができます。

[dropcap1]3[/dropcap1]

シンプルな名前、色付けで状態を表示しよう

たとえばボタン素材などは通常、ホバー、アクティブ時によって、デザインがそれぞれ異なる場合があります。そのようなときは分かりやすい「青ボタン」などでグループ分けし「通常時」、「ホバー時」などを一緒に記載しておくと分かりやすくなります。上記サムネイルでは、同時に状態ごとにレイヤーを色分けしておくことでより整理しやすくしています。

[dropcap1]4[/dropcap1]

すべてのレイヤーに名前をつけよう

Photoshop CS6新機能のひとつに、「レイヤー名を検索する」というツールが付け加えられています。この機能を最大限に利用するためにも、それぞれのレイヤーに名前付けをしておくことが重要となります。

[dropcap1]5[/dropcap1]

グループフォルダ機能を有効的に活用しよう

グループフォルダ機能の利用は、数多くのレイヤーで組み立てられたPSDファイルをわかりやすく、シンプルに整理する最も効果的な方法のひとつです。目的に合ったフォルダ分けをすることで共同デザインにおいて威力を発揮します。

[list type=”clip”] [li]Webデザインのセクションごとにグループ分けする。(例: ヘッダー、ボディー、フッターなど） [/li]

[li]関連パーツごとにグループ分けする。（例: ボタンや広告バナー、オリジナル性の高いグラフィック素材など）[/li]

[li]Photoshopでレイヤースタイルやレイヤーマスクを適用するパーツごとにグループ分けする。[/li][/list]

[dropcap1]6[/dropcap1]

階層、順番通りにレイヤーを並べよう

デザイン制作を行うときは、いつも階層を考えておくことがポイントとなります。たとえば、Webデザインを制作しているときはヘッダー、メインコンテンツ、サイドバー、フッター部分など順番通りに並べておくことで、はじめて見た人にも分かりやすい安心設計を行います。

[dropcap1]7[/dropcap1]

ノート機能を活用しよう

Photoshopの便利機能のもうひとつが、ちょっとした注意書きをメモできる「ノート機能」です。特に複数の人がプロジェクトに携わっている場合、詳細事項を記載しておきたいときなどに重宝するアイテムです。

共同デザイン作業で気を付けたい、PSDファイルの扱い方

[dropcap1]9[/dropcap1]

ベクターシェイプを利用しよう

複数人で作業する場合は、デザイン面における変更はある程度考えておきましょう。その為にも全てのパーツを編集、サイズ変更できるようにしておくことがポイントとなります。ベクターシェイプを利用することで、自由なサイズ、カラーリング変更が可能となり、柔軟でシンプルなデザイン制作を行うことができるでしょう。

複数のレイヤーを結合したり、テキストレイヤーをラスタライズすることは避けましょう。デザインが固まってしまっているので変更が全く効かないというデメリットがあります。

[dropcap1]10[/dropcap1]

巨大なベクターマスクを使って、編集性をアップしよう

複数のデザインパーツに対して、ベクターマスクを使って一度に適用する方法は、メンテナンス性がよく、編集しやすいファイルを作成する練習になるでしょう。巨大なベクターマスクを適用するには、調整レイヤーなどの順番をきちんと並べておく必要があり、デザインに対する計画性をたてることがポイントとなります。

[dropcap1]11[/dropcap1]

塗りつぶしレイヤーを活用しよう

たとえば背景を塗りつぶす場合どのようにするでしょう。「後からデザイン編集する」ことを考えて作成する場合は、新規塗りつぶしレイヤーを利用してみましょう。こうすることでパレットをクリックするだけで、どんな色にも変更可能となりますよ。

[dropcap1]12[/dropcap1]

調整レイヤーを活用しよう

イメージ写真を加工して利用するとき、なかなか思い通りの色合いが表現できずに、何度も修正した経験はないでしょうか。イメージレイヤーに色調補正を行うのでなく、新規調整レイヤーを重ねてみましょう。これで何度でもやり直しがきくようになり、デザイン編集も楽になります。

[dropcap1]13[/dropcap1]

スマートオブジェクトを利用しよう

特にオリジナル性の強いデザインなどを扱う場合、いつでも編集しやすいように、スマートオブジェクトを活用しましょう。この機能を利用することでレイヤー編集機能を残したまま、ひとつのデザインパーツとして扱うことができるようになります。

[dropcap1]14[/dropcap1]

クリッピングマスク機能を活用しよう

たとえば一定サイズのサムネイル枠に、イメージ写真を配置して利用する場合は、「クリッピングマスク」機能を活用してみましょう。この機能を利用することで、他のイメージ写真を変更したいときなども、お好みサイズでぴったり変更することが可能です。

[dropcap1]15[/dropcap1]

包括光源をスマートに活用しよう

ドロップシャドウや光彩などをレイヤースタイルで設定するときに見かける「包括光源」。共同デザイン作業をするにあたって、包括光源はメリットでもあり、悩みのタネにもなるでしょう。PSDファイルの特徴として、包括光源を使うことで、すべての角度を統一します。そのかわり角度アングルの異なる光源を使った、デザインパーツを移植すると、角度が上書きされてしまうので注意が必要です。

包括光源を使わずにデザインするという方法も、デザインの選択肢にあると良いかもしれません。

[dropcap1]16[/dropcap1]

簡単に編集できるカラー、スタイル設定をしよう

共同デザイン作業を行う過程において、カラーリングやデザインパーツのスタイル変更などはよく見受けられます。たとえばカスタムシェイプを利用したり、カラーオーバーレイ新規調整レイヤーなどを利用することで、個別に色やサイズ変更を自由に行うことが可能となります。

[dropcap1]17[/dropcap1]

使わなくなったパーツは、まとめてフォルダに収納しよう

デザイン当初は利用しようと考えていて、最終的に不要になったパーツは、そのまま非表示にしてしまうのではなく、ひとつのフォルダにまとめて、カンバスの外などに表示しておくと良いでしょう。これでコラボレーションする相手も、どれが不要なデザインパーツなのか一目で分かるようになります。

[dropcap1]18[/dropcap1]

参照リファレンス用フォルダを作成しよう

複数人がデザイン作業に携わる場合、一定の共通認識を持っておくことで、デザインがスムーズに進む場合があります。たとえばテーマカラー、バナー広告、イメージ画像、オリジナルロゴなどの詳細を一緒に明記しておくと、後日確認するときにも分かりやすいですよ。

[dropcap1]19[/dropcap1]

決定事項、パーツにはロックをかけよう

何度かの修正を加えることで、最終決定したデザインパーツは早めにロックを掛けておくと良いでしょう。こうすることで、ロックを解除しない限り動かすことができなくなるので、他の人によるデザインミスを防ぐことができます。

[dropcap1]20[/dropcap1]

不明な透明レイヤーの確認方法

Photoshopでは不透明度が50%以下のピクセルデザインは、レイヤーパレット上で透明に表示されてしまいます。空のレイヤーかどうか確認する為には、自由変形(Ctrlキー+T)を適用して、動かすことができればピクセルデータがあるということになります。

不要なレイヤー、デザインパーツは早めに削除し、分かりやすい名前付けを重要になってきます。

[dropcap1]21[/dropcap1]

特定範囲の複数レイヤーを選択する方法

他の人が作成したPSDファイルを扱っている場合に、特定範囲に含まれている全てのレイヤーを一発で選択する、ちょっとしたショートカットテクニックのひとつです。

ツールボックスより「移動ツール」を選択し、Shiftキー + Optionキー + Commandキーを押しながら、マウスドラッグで選択範囲を指定します。これで選択した範囲の全レイヤーを、まとめて選択することができます。

PSDファイルを書き出すときの注意点

[dropcap1]22[/dropcap1]

描画モードとエフェクトを書き出し用に設定しよう

完成したWebデザインをスライスするときに、全てのデザインがそのまま忠実に書き出される訳ではなく、レイヤースタイルを利用している場合は、いくつかの注意点があります。

[list type=”clip”] [li] 描画モードを使って描かれた境界線は、それぞれ単色でカラーリングしましょう。描画モードを使っている部分は、無視されてしまいます。[/li]

[li]光彩レイヤーを使わないようにしましょう。特に光彩（外側）はCSS3によるスタイリングで表現可能となります。[/li]

[li]ザラザラとしたノイズテクスチャパターンの保存の際は、24-bit PNGを利用しましょう。こうすることでデザインを忠実に再現することが可能となります。[/li][/list]

[dropcap1]23[/dropcap1]

背景デザインも考えておこう

モニター解像度が広くなったことで、コンテンツ以外の部分である、背景デザインも継ぎ目なくリピートできるように工夫しましょう。背景にテクスチャ素材を利用している場合は、シームレスパターンテクスチャ素材となっているか確認しておきましょう。

イメージ写真を背景デザインとしているケースでは、ウィンドウサイズに応じて写真の大きさが変更される、jQueryプラグインなども活用してみると良いかもしれません。

[dropcap1]24[/dropcap1]

ファイルの保存方法にも一工夫を加えよう

Webデザインを作成する場合、コンテンツやカテゴリーに応じて複数ページ用のPSDファイルがそれぞれ収録されているケースがあります。このような場合、誰でも分かりやすいように「プロジェクト名」、「バージョン」をファイル名にしておくとよいでしょう。特にいくつかのバージョンが含まれている場合など、最新バージョンを見つける手助けにもなります。

[dropcap1]25[/dropcap1]