• HOME
  • デザイン
  • 作業効率化のためにメンテナブルなPSDを保つルールとマナー

2017.7.15 デザイン

作業効率化のためにメンテナブルなPSDを保つルールとマナー

弊社には、様々な経歴やスキルを持ったwebデザイナーが在席しており、デザインツールは主にPhotoshopを使用しています。
Photoshopを使用したデザイン作成方法には自由度があり、作る人によって様々なクセがあります。
そのため誰もが変更しやすく構造が理解しやすいPSDを保つために、最低限のレイヤー整理のルールと制作時のマナーを設け、デザイン作業に専念できる環境作りを目指しています。

レイヤー整理の最低限のルール

1.パーツごとフォルダにまとめる


基本的なことですが、整理整頓を行うことでレイアウトの調整が行いやすくなります。
また、レイヤーカラーはその色が何を意味しているのか憶える必要があるため設定しません。

2.ページの構成に合わせて上から下に並べる


通常、レイヤーやフォルダをコピーすると上に複製されますが、そのままにせずページの構成に合わせて並べることで、直観的に目的のレイヤーを見つけることができます。

3.レイヤー、フォルダ名は日本語にする


英語表記は命名に悩んだり、パッと見判断できないため使用しません。

4.ボタンの状態はルールに沿って明記する


・ホバー:_hover
・アクティブ:_active
・クリック:_click
・オフ:_off

5.アセット利用時はレイヤーではなく、フォルダにファイル名を記載する


その後の調整を行いやすくするため、アセット利用時はレイヤーではなくフォルダに設定します。

制作時の最低限のマナー

主にPhotoshopによる「非破壊編集」を行うためのマナーです。
非破壊編集とは、素材の元の状態を残しておく編集方法で、編集しても画質が劣化しないというメリットがあります。
元の状態が保持されているため、サイズ変更や色調補正・フィルタを何度もかけられたり、2倍以上の大きさが必要なスマートフォンサイト用の画像を作成する際にも役立ちます。

1.調整レイヤーを利用する

2.素材をスマートオブジェクト化する

3.ベクターシェイプを利用する

4.スマートフィルタを利用する

このように最低限のレイヤー整理のルールと制作時のマナーを設けることで、複数のメンバーがお互いに快適にデザイン作業に取りかかれる環境を目指しています。

現在イトクロでは、エンジニア・デザイナーを募集しています。
ユーザーファーストで価値のあるサービスを提供していきたい方、
技術を磨いていきたい方、ぜひご応募ください。

エンジニア募集中!
  • twitter
  • はてなブックマーク