2014/02/12

コーディングが楽になる!PSDのレイヤー整理術

コーディングが楽になる!PSDのレイヤー整理術

デザインをする際、レイヤーをわかりやすく整理していますか?
共同デザインを行う際に、他のデザイナーやコーダーにPSDファイルを渡す場合があると思います。
その際にわかりやすいレイヤー構成になっているとコーディングがとてもスムーズに行うことができます。
第三者からみて、ひと目でわかるようなレイヤー構成を意識して、デザインを行うことも重要です。

目次

レイヤーには名前をつける

新規レイヤーを作成すると、「レイヤー1」など、自動的にレイヤー名が作成されますが、そのままにしておくと後々面倒なことになってしまいます。
例えばスライスをする時には色んなレイヤーを表示/非表示したりするので、レイヤー名がついていないと探すのが面倒になります。
第三者から見てもこの部分はどのレイヤーなのか、明確にわかりやすい名前をつけておきましょう。

レイヤーには名前をつける

階層を明確に

コーディングする時のことを想定し、id名やclass名を想定してレイヤー名をつけておくと非常に楽になります。
さらにレイヤーグループを使って階層をわかりやすくすることも重要です。
ヘッダーなら「header」、グロナビなら「nav」など、ひと目でわかる名前をつけておくと効率よくコーディング作業ができるようになります。

階層を明確に

レイヤーの順番も重要

「header」「nav」「contents」「footer」など、階層がわかりやすいように名前をつけたら、順番通りに並べておきましょう。

レイヤーの順番も重要

不要なレイヤーは削除

デザインをしていると、一度作成したが使わなくなったレイヤーなどを非表示にしておくことがあります。
「もしかしたら使うかも」とそのまま放置しておくと、第三者が開いた場合に「これは必要なレイヤーなのか」、「ホバー時に使用するためのレイヤーなのか」など考えてしまいます。
不要なレイヤーは削除し、混乱しないようにしておきましょう。

ロールオーバー用などは色付けてわかりやすく

上記で、不要なレイヤーを残しておくとホバー時に使用するレイヤーなのかわからないと述べました。
そこでホバー時、アクティブ時に切り替えるレイヤーは色分けをしておくことでわかりやすくなります。

ロールオーバー用などは色付けてわかりやすく

まとめ

デザインをしている時には、自分がわかっていればいいとレイヤー名はあまり気になりませんが、複数人で作業することを考え、他人にわかりやすい構成にしておく癖をつけておくと後々苦労しません。
わかりやすいレイヤー構成にしておけば、その後の作業がとてもスムーズに進めることができるので、常に意識して作成することが大切です。