なぜレイヤー整理が必要なのか？

デザイン作業を進めるにつれ、レイヤーの数はどんどん増えていき、気がつけば、ファイルが複雑な迷路と化し、どの要素がどこにあるのか把握するのも一苦労・・・

こんなことありますよね。自分一人で作業する分にはなんとかなるかもしれません。しかし、チームメンバーや他のデザイナーがそのファイルを編集する必要が出てきたとき、圧倒的に非効率です。なぜなら整理されていないレイヤー構造は、他の人にとっては解読不可能な暗号のようなものだからです。

結果として、ファイルの修正や更新が著しく困難になり、プロジェクトの進行に支障をきたす可能性があります。

レイヤー整理

01.レイヤー名はルールに則ってわかりやすくする

Webデザインのデータにルールに沿ったレイヤー名をつけることは非常に重要。プロジェクトの開始時にレイヤー命名規則を決め、ルールをチーム全体で共有し、なんなら文書化しておくとよいです。

（ちなみに多くの会社で命名はある程度ルール化されていると思います。）

実践的なレイヤー命名例を下記にあげておきますね。

構造的な要素：

• header
• main_content
• footer
• sidebar

ナビゲーション関連：

• main_nav
• sub_nav
• menu_dropdown

ヘッダー要素

• header_logo
• header_search

メインコンテンツ：

• hero_section
• featured_products
• about_us
• contact_form

製品関連：

• product_card
• product_image
• product_description

ボタンとCTA：

• btn_primary
• btn_secondary
• cta_subscribe
• cta_learn_more

フォーム要素：

• input_text
• input_checkbox
• select_dropdown
• form_submit_button

フッター要素：

• footer_links
• footer_social_icons
• footer_newsletter
• footer_copyright

モーダルとポップアップ：

• modal_login
• popup_newsletter
• lightbox_image

状態とバリエーション

• btn_hover_state
• form_error_state
• card_expanded

ちなみにレイヤー名は基本英語（小文字の英語）を使用するようにしましょう。理由は、日本語ファイル名だと文字化けやエラーが起きてしまい、様々なOS、ソフトウェア間での互換性を高めるためです。あとWeb開発は国際的な分野ということもあり、多くの開発環境やフレームワークは英語ベースで使用されるからです。

コンテンツごとにグルーピング

どんどん増えていくレイヤーを、目的や種類によってグループ化し、レイヤーパネルを見るだけでページ全体の大まかな構成がわかるように名前をつけてあげます。

なにも整理されていないとレイヤー名が「レイヤー2のコピー」とかになっているケースがあります笑

整理するときはHTMLの構造と一致させる

デザインデータのレイヤーはまずヘッダー、メインコンテンツ、サイドバー、 フッターと、ページ全体を大きく分割するレイヤーグループ・HTMLの基本的な構造と一致させてあげるとよいです。なぜならコードの構造と視覚的に一致するため、コーダーがデザイン構造を理解しやすくなるからです。

また左上から右下への順序でレイヤーを並べて、要素の依存関係を明確にするために外側のコンテナ要素を「上」にして、内部のインナー要素を「下」にまとめて上げるとよいです。

なおポイントとしては、プロジェクト開始時に、レイヤー順序のテンプレートを先に作成しておくとよいです。

不要レイヤーの削除

実装時に使わないレイヤーの扱いは削除する、これはデザインファイルの管理面で非常に大切。

大前提として、古いバージョンのデザイン・没案など最終的に使用しないことが確定したレイヤーは思い切って削除するようにしましょう。

また削除は難しい、という場合でも、最低限、実装不要のレイヤーやグループは非表示にしておくのをおすすめします。また保持しておきたいが実装に不要なレイヤーは【迷い中】【残しデザイン】というふうにわかりやすい名前のレイヤーフォルダに入れて整理しておきましょう。

マウスオーバーやSVGなどの

「hover」や「active」などの状態を明示することで、インタラクティブ要素の管理が容易になります。

有料フォントか無料フォントか、管理はしっかりと

デザイナーでよくありがちなのは、見た目にこだわるあまり、Adobeフォントやモリサワフォントなど自分のイラレやフォトショップにある有料フォントを使ってしまうこと。