WebデザインのPhotoshop納品で間違ったことはしていませんか？

1pxのズレはコーディングできないデザイン！

DTPの世界でもグリットシステムは利用し、数値を利用して配置するデザインは基本中の基本ですね。 しかしながら、マウスを引っ張って配置するようなデザインをして、数値を利用したデザイン配置をしないデザイナーが存在します。 感覚だけで配置するデザインなので、1pxのズレなども多く発生します。このようなデザインをコーディングには大変なことなります。正直言うと、コーディングできないデザインなのです。

そんな当たり前のことができていないデザイナーが多い？ことから、海外では「photoshopetiquette」Photoshop エチケットというコンテンツがありましたのでご紹介いたします。

日本でも同様に起きていますね！弊社でもこのようなデザイン、ファイルを納品されて困ったケースがあり、受講生に聞いても同じ悩みがあるようです。

プロとして最低限のマナーなので今一度チェックしよう！

デザインはデザイン会社で行うケースも現場では少なくなりません。この内容は、はじめてお付き合いする企業様へのガイドラインの参考としても利用する事ができます。

メールなどで直接言うと角が立ってしまうケースや、他にもチェックしてほしい項目などがある場合に、さりげなくリンクを送るのは良いかも知れません。

Webデザイナーのプロとして最低限のマナーになるので一読しておきましょう。

1. ファイルの保存方法

まず、Photoshopファイルの以外の、昔からある外部ファイルの整頓から始めます。ファイルをキチンと整理できなかったら、Photoshopドキュメントでどんなステキな作品を作ったところで、全く意味がなくなるでしょう。

1-1 PSDを統合する！

Ctrl / Cmd + Nは乱用しない！：PSDファイルは、最小限の数に保つこと。

理由 1PSDに全てをまとめると、どのファイルを使用すれば良いか直ぐに解り、混乱を軽減します。

1-2 適切なファイル名をつける！

「そのファイル名の付け方で良いですか？ "NEWEST.psd"？それとも"LATEST.psd"？それでは"Final_v2.psd"という名称で後から見て判断できますか？」

理由皮肉なことに、"NEWEST"や"LATEST"のような絶対的ものも、後で編集される運命にあります。一般的なファイル名を心がけることをお勧めします。

1-3 デザインはPSDに関連してまとめる！

写真やアイコンは、「その他のもの」という名前のデスクトップフォルダなんかではなく、PSDに近いフォルダにストックしてください。

理由PSDを引き継ぐ者が、オリジナルのアセット（まとまり）ファイルを探しに行くべきではありません。近くにあることで無駄な時間を使わずに済みます。

1-4 UI要素のテンプレートを作る！

ユーザインタフェース（ボタン、フォームなど）のために動きの表現したPSDを作っておけば、デベロッパーの手助けになります。

理由ブラウザのデフォルトのUI要素に使用するよりも、動きなども取り入れたデザイン、どのように見えるか制御できるほうが良いからです。あなたはどっちにしろ、多分どこかの時点でそれらをデザインすることを求められることになるに違いないですし。

1-5 サーバー上または共有ファイルでシェアする！

「納品ファイルはサーバーにありますか？」

理由ファイルをどこに置いたか聞かれることが良くありますが、ファイル共有上に保存しておけば、そのような質問はなくなります。

2. PSDのレイヤーを使う

PSDを納品されて引き継ぎ人にとって整理されていない名無しのレイヤーは凄く厄介なもので、整理されていないレイヤーを見るとウンザリさせられます。必ず、レイヤーに解りやすい名前を付けてください！

2-1 レイヤーに名前を付けること、そして正確であること

*すべての*レイヤーで可能な限り説明的になること。「レイヤー0のコピーのコピー」は駄目です。

理由エチケットの典型項目：レイヤーに名前を付けることは、見ただけで理解できるのでわかりにくさをなくします。そうでなければなじみのないドキュメントの順応を向上させます。

2-2 フォルダを使用する

レイヤーをグループ化すると、様々なエリアをすぐに表示/非表示するのを容易にします。

理由例えば、ハッピーレイヤーはハッピーホームに入っています。簡単なナビゲーションと編集のために似たアイテムをフォルダでグループ化します。

2-3 要らないレイヤーを削除する！

レイヤーを貯めこんでいませんか？PSDからのすべての未使用レイヤーを取り除いてしまっても問題ありません。

理由あまりにも多くのレイヤーを持つことは、ふつうファイルサイズの不必要な肥大化をもたらし、パフォーマンスに影響を与えることになります。

2-4 共通要素をグローバル化

異なるレイアウトごとに共通のロゴを全てに入れて、5つのコピーを持つ必要はありません。マスターレイヤー上に、グローバル化してください。

理由一つの要素（ロゴ、写真など）を複数のレイアウトで使用する場合、一箇所だけを編集すればいい、ということはとても理にかなっています。

2-5 レイヤーカンプ/スマートオブジェクトを使用すること

レイヤーカンプ（ウィンドウ>レイヤーカンプ）は、複数のPSDを構築せず、変化を示すのに最適な方法です。

理由レイヤーカンプ＆スマートオブジェクトは、別のPSDを構築（および維持）することなく、複数の状態やレイアウトを表示する方法を提供します。

3. 画像

イメージの編集操作は、崩さないように編集することがベストです。元に戻すことができないフィルタやエフェクトを追加して、写真やボタンの再利用性を制限したいはずはありません。

3-1 図形を引き伸ばしたり、ボタンをマージしないこと

ベストな方法：ベクターファイルを保つことです。それ以外の場合は、ラスタライズする前に、ベクターのコピーを保持しましょう。

3-2 マスクをグローバル化する！

個々のレイヤーに同じマスクを使用するのではなく、フォルダにマスクを適用します。

理由複数のマスクよりも1つのマスクだけを編集するほうが良いです。

3-3 スナップさせること

グリッドにスナップ（あわせる）させてください。ピクセルにスナップさせてください。スナップさせられるものがなくなるまで、スナップさせてください。

理由一貫して1pxずつずれていたら、誰かがすのズレを直さなければなりません。その誰がやるべきでしょうか？

3-4 描画モードは注意して使うこと

どうやって、その色を得ましたか？それがオーバーレイ2つ、4つの乗算と16色の焼き込みカラーの融合ではないことを確認してください。

理由マッシュポテトのような色のhexを導き出すことは困難です。シンプルにしてください。

3-5 保持していくこと

貴重なピクセルデーターを削除しないようにするために、マスク、スマートオブジェクト·調整レイヤーを使用してください。

理由シルエットはレタッチが必要か？ロゴはサイズ変更が必要か？を確認しましょう。もしかしたら、背景ではなく、フルカラーの写真に戻るかも知れませんし、黒白写真かも知れません、レタッチなどのフィルターを消去すれば元のデーターに戻ることができればはるかに簡単です。

4. テキストタイプ

デザイン上、ブラウザのテキストのレンダリングが合わなくても、Photoshopの機能だけでデザインしてはいけません。テキストはブラウザのデフォルトになるからです。

4-1 整数のピクセル値を使用すること

自由変形ツールでテキストのサイズを変えない！変更する場合は、整数値を変更すること。

理由タイプセッティングでの一貫性は鍵です。Photoshopで分数や小数を使用しても使えません。

4-2 ライセンスフォントを利用すること

あなたが使用したフォントを利用可能にし、それらが共有できるようにライセンスを取得していることを確認してください。

理由テキストを編集する必要があるが、フォントを持っていないため編集できない、見えないということはあってはいけません。

4-3 テキストタイプを引き伸ばさないこと

見た目がひどいということのほか、HTML / CSSで表現する簡単​​な方法がありません。

理由プログラム的にそれを行うことができない以上に、潰されたり引き伸ばされるよう意図されたタイプがあるとは思えません。

4-4 テキストボックスを制御すること

テキストボックスを使用してるのが見て取れます。実際のテキストより（8kmも）長くしたりはしないでください。

理由必要以上に長いテキストボックスのせいで、その背後のテキストを選択できなくて、イライラしたりします。

4-5 別のテキストボックスを使用する！

見出し？段落のセット、独自のテキストボックスを一緒にせず、各テキストごとに独自のテキストボックスを使ってください。

理由一つのテキストボックスに存在する、複数の種類のフォントファミリとサイズがあると、それぞれ個別にテキストボックスがある場合より多くのクリックを必要とします。

5. エフェクト

お願い：節度を持ってエフェクトやフィルタを使用してください。PSDファイルの引き継いだ人が分別するのがより少なくてすみますし、ほとんどの場合、「よりたくさんのフィルタ≠より良いデザイン」であるからです。

5-1 カラーオーバーレイを適切に使用すること

空色の四角をカラーオーバーレイで藤色にしましょう。

理由キャンバス上の要素の色を表すカラーサムネイルで、レイヤーパネルをナビゲートするほうがはるかに簡単です。この空色の四角をカラーオーバーレイで藤色にしましょう。

5-2 タイル化できるイメージにすること

もしパターン化された背景の繰り返し画像のJPEGを作ることが簡単でない場合は、方向性を変える必要があります。

理由少しでもずれた繰り返し画像はとても目につきやすいです。時間がかかっても正しく直す価値があります。

5-3 いろいろやらない

使用したエフェクトの量に対するボーナスポイントはありません。

理由画像はCSSに変換するわけではないので、エフェクトをたくさん使用してしまいがちですが、制限する可能性があります。

5-4 ディザ

それはグラデーションですか？それとも32の若干異なるストライプですか？

理由グラデーションはスムースであるもので、他のすべてのことと同様に、初めてから正しく進めましょう。

5-5 自分のストロークを知ること

内側のストロークはキレイで四角い角、センターと外側のストロークは丸みを帯びた角になります。

理由内側のストロークを意図しているのに外部のストロークを使用したりすると、図形の全体の幅に影響を与える可能性があります。

6. 実践

次のガイドラインのいずれかが自動的にあなたをより良いデザイナーにしてくれるわけではないですが、Photoshopでの作業へのアプローチを確実に手助けします。あなたができるだろうたくさんのことのうち、５つだけご紹介。

6-1 グリッドを使用すること

グリッドを持っていなければ、「グリッドを壊す」ことはできません。

理由グリッドはガイドの手助けになります高さ、幅およびアラインメントのシ​​ステムを確立することはデザインのために不可欠です。

6-2 ドロップシャドウを優雅に使用すること

ドロップシャドウに気づくのであれば、それは重すぎる可能性があります。

理由他のエフェクトと同じように、ドロップシャドウはリアルまたは洗練されて見せるために、Photoshopのデフォルト設定から変更する必要があります。

6-3 Webfontsを使うこと

デベロッパーにwebfontsでないものの"代替"を見つけさせないでください。最初からwebfontを使用してください。

6-4 デバイス幅を考慮すること

960pxのPSDは十分ですか？または、レスポンシブワークフローが必要なのでしょうか？

理由事実とは別に全てのものがうまくいくよう願うのとは対照的に、どうやって物事は異なる幅に適応するのか、という考え方でデザインすることがベストです。

6-5 ライセンスアイコン/写真を使用すること

Google画像検索はストック写真用リソースではありません。アイコンなどを使用する前に、使用契約を熟読すること。

理由無許可の写真やアイコンを使用して捕まる危険は割けなさい。人々は私たちのために素敵なものを作るため懸命に働いた。我々は、単に数ドル分ける必要があるだけです。

7. 品質管理

「デザインするには近すぎる」という言葉を聞いたことはありますか？ピクセルに膝まで浸かっていても、明らかなミスを見落としてしまうのは簡単です。何人かの品質管理を雇ってください。

7-1 校正すること

間違いなくあなたの文法のミスを見つける人の前に出す前に、誰かにカンプを見てもらうこと。

理由間違いなくあなたの文法のミスを見つける人の前に出す前に、誰かにカンプを見てもらうこと。

7-2 ワイヤーフレームと比較すること

クライアント：「私のロゴはどこだろ？」あなた： 「ああ、あれ残したかったのですか？」=NG

理由Photoshopで自動操縦してしまうのはよくあります。もともとのワイヤーフレームで合意されたものを何も忘れていないことを確認してください。

7-3 すべての画像に責任を持つこと

透かし入りのストック写真を使用したウェブサイトでは、買ったシャツにタグを残しているようなものです。

理由恥。ああ、恥（プラスそれは違法です）。

7-4 ブラウザの互換性に精通すること

ブラウザの限界を知ることは、「Webデザイン入門」パッケージに標準装備されているべきことです。

理由ブラウザは、それぞれ異なる方法でコンテンツのレンダリングしますが、もっと重要なのは、CSS3や基本的なPNG形式の透明度すらできないもの（IE6）もあります。

7-5 一貫性を持つこと

意図せずにわずかに異なる3種類の青を使用していますか？あなたの赤は彼らのロゴと同じ赤ですか？

理由意図的な場合を除き、10種類の違う青をスポイトで取るのは苦痛です。

8. エクスポート

ひとつ確かなこと：あなたの仕事がPSDから画像をエクスポートすることだった場合、それは一度だけ実行すれば良いようにしたいものでしょう。プロセスのこのステップを甘く見てはいけないです。

8-1 Web用に保存

単に「名前を付けて保存> JPEG」を選択すると、より大きなファイル、色の問題等が出ます。

理由「ウェブ（＆デバイス）用に保存」は適切にウェブ上で使用するために画像を圧縮してくれます。「名前を付けて保存」ではしてくれません。

8-2 ファイルサイズを節約すること

オールドスクールで行きましょう：小さいファイルを作るために質/色を考えてみてください。

理由全ての種類のネットワークを介してすべての種類のデバイスに運ばれるので、画像の適切な圧縮と小さなファイルサイズは信じられないほど重要です。

8-3 関数用にファイルの名付けること

blue_square3.jpgだと、デベロッパーにどこ用の部品か上手く示してあげられていません。ゴミ箱を除いて。

理由これは、目標ができるだけそのファイルが何であるか明確でシンプルにすることなので、「適切にファイルを名付けること」と一緒です。

8-4 不要なスペースを作らないこと

レイアウトのために余分なマージンやパディングで構築する必要はありません。それはCSSの役目です。

理由CSSは位置を調整しやすいという点で優れています。対してPhotoshopは、ワークフロー（オープン - >ナッジ - > Web用に保存）？そうでもないです。

8-5 高解像度（Retina:レティナ）バージョンを作成

可能な場合、Hi-dpiのスクリーンも想定してください。

理由iOSデバイスは、ほぼ例外なくに「レティナ」です。複数のデバイスが続くのは確実です

同じデザインでも納品物でできるデザイナーか出来ないデザイナーかが分かる

デザインができていれば良い時代は終わり、次の肯定を考えたできるデザイナーになりましょう。 「photoshopetiquette」Photoshop エチケット http://photoshopetiquette.com/

この翻訳は解り易さに重点をおいているため意訳されています。