https://b-risk.jp/blog/2019/12/code-friendly/
Webデザイナーにとって、自分のデザインがコーディングしやすいのかどうかは意外と気になるもの。 コーダー側は受け取ったデザインを粛々とコーディングするだけなので、あまり「こうしてほしい」と声を上げることはありませんが、デザイナーの観点だけでは気付きにくい問題が埋もれてしまっているかもしれません。
ということで今回は、日々のコーディング作業で気になった覚えのあることをどどんとまとめてみました。 このデザインだとどんな風に困ってしまうのか、そしてどう変えれば改善できるのか、なるべく具体例を挙げて説明していきます。 どのデザインツールでも共通の内容が多いと思いますが、基本的にはPhotoshopでの作業を想定しています。
常識的な内容も多いので、そのレベルは当然できてますという方は、特に【画面サイズ・レイアウト編】とPart.2【動的コンテンツ編】を見てみてください。
レイヤー整理には、「デザイン作成の過程を効率化するためのグループ分け」以上の意味があるんです。 自分「だけ」が作業しやすいデザインではなく、他のデザイナーさんにも、コーダーさんにも、構造や意図が正しく伝わるデザインを目指しましょう。
左側のように整理されていないデザインだと、レイヤーパネルを見ても全体の構造が全く見えてきません。 どこまで細かく整理するかは個人の好みや会社のルールによるところですが、データを開いてすぐ大体の構造が把握できる程度にはグループ分けしましょう。 また、共通パーツがリンクで配置されていると「この部分は全部同じ」ということがパッと理解できて効率的です。
スライスしやすさという観点でいうと、どのかたまりを画像として書き出しするのか予想しながらまとめて頂けると嬉しいです。 特に、たくさんのレイヤーを一つの画像として書き出す場合。
例えばこのデザインのように色調整のためのレイヤーがたくさんあると、画像アセットのグループ作成時にどれかが抜けてしまいそう。クリッピングマスクがかかっていない「blue」は特に見落とされそうですね。 ちゃんとデザイン通りにコーディングしてもらえるように、デザイン作成時にグループでまとめておきましょう。
全然グループ分けされていないと、主に書き出し作業に時間がかかる。