#PSD作成ルール
##レイヤー名
- なるべく単純で他の作業者にわかりやすい名前をつけること。
- 慣用的に使用されているもの（header/content等）は英語の使用を推奨する。
- ただし英語ではわかりにくい場合、日本語名称のほうがわかりやすい場合はこの限りではない。
- 単語を繋ぎたい場合ハイフンの使用を推奨する。
- 他の作業者にわかりやすくするため、以下の要素に関してはレイヤー名に含めることを推奨する。
- アイコン：icon
- ボタン：btn/button
- 画像：image/figure
- 現在位置：current/active
- マウスオーバー時デザインのレイヤー名には必ず【hover】を含めること。
- SVGでの表示を想定しているレイヤーに関してはコーディングに影響するのでレイヤー名に【svg】とつけて、それと分かるようにすること。
##レイヤー整理
- 無名のレイヤーや、〜のコピーという名前のレイヤーが存在しないように、適宜整理すること。
- 不要なレイヤーは適宜消すこと。
- デザインに迷っている/修正で先祖返りする可能性がある等の場合は、【修正用ストック】【ボツ置き場】などわかりやすい名前のレイヤーフォルダに入れて整理すること。
- 必要に応じてレイヤーのラベルカラーを付けることを推奨する。以下は特にレイヤーのラベルカラーでの整理を推奨するものである。
- hover
- ユーザーのアクションによって表示・非表示が変わるもの
- デザインガイドラインのレイヤーフォルダ
- レイヤーマスクの調整が完了した後、レイヤーマスクのリンクを必ずつけること。
- デザインファイル内に写真などの画像を追加した場合、そのまま縮小せずスマートオブジェクト化してから作業を行うこと。
- 写真などの画像に調整レイヤー等を使用して加工を施す場合、スマートオブジェクト化し、その中で加工を行うこと。
- 調整レイヤーをクリッピングマスクで画像に紐付けただけでは、レイヤーコピーやレイヤーの順番を変更した際に外れるため、これを避けること。
- ファイル容量が1GBを超えるなど極端に重い場合、コーダーに渡す前にスマートオブジェクトをラスタライズ化すること。
- シェイプはラスタライズ化をしないこと。
- レイヤーは主要なセクションに合わせてレイヤーフォルダに分けること。以下のセクションに分けたレイヤーフォルダは必ず作成しなければいけない。
- header
- content
- footer
- 前項のセクションを第一階層とし、最低限第三階層までセクションやパーツごとにレイヤーフォルダでまとめ、整理すること。以下は簡易的な例である。
- header
- logo
- nav
- item
- utility
- content
- visual
- main
- news
- about
- map
- side
- menu
- footer
- pagetop
- nav
- item
- copyright
- header
- header/footer等、同じパーツを複数ページで利用する場合、パーツごとにPSDを作成し外部ファイルを配置することを推奨する。
- レイヤー整理については添付のsample.psdを参考とすること。
##デザインガイドライン
- 他の作業者にデザインを伝えやすくするため、デザインガイドラインを必ず作成すること。
- index.psd内にデザインガイドラインを含めることを推奨する。ただし、index.psdとは異なる独立したファイルとして作成しても構わない。
- 独立したファイルをして作成した場合、必ず他の作業者にガイドラインファイルの共有を行うこと。
- ガイドラインには必ず以下の項目を記載すること。
- 主要な色のカラーコード
- メインカラー
- テキストカラー
- リンクカラー
- ほか必要に応じて
- 使用フォントの情報
- 使用フォント名
- 使用フォントのダウンロードURL（デバイステキストを除く）
- font-familyの指定
- 主な文字サイズ
- 見出し
- 本文
- 補助テキスト
- ほか必要に応じて
- コンテンツ幅
- 主要な色のカラーコード
- ほか、あるとデザインルールが伝わりやすい項目を以下にあげる。 行間 よく使用するmargin/paddingのサイズやルール（5の倍数/8の倍数等）