コーディングしやすいデザインデータの作り方 ★Part３（レイヤー編）

2020/10/30

コーディングしやすいデザインデータの作り方のポイントをまとめました。今回は、レイヤー編です。

デザインとコーディングを両方するようになって気づいたことをまとめます。
今回は、レイヤーについてまとめました。

描画モードはデフォルト以外（オーレバーレイや乗算など）は使わない

パーツとして書き出すときに、表示通りのデザインのまま書き出せないため、特別な理由がない限りは使わないでおきましょう。代替策としては、透明度で対応するのがベターかと思います。

非表示レイヤーがあると、必要なのか不要なのかわからないのと、データ容量も重くなりますので気をつけてください。

ヘッダー、新着情報、アクセス、フッター…などという感じで、デザイン順と同じようにグループを作りましょう。

例えばボタンを作った場合、「ボタンの背景」「文字」「矢印アイコン」これらの情報は同じ１つのグループとしてまとまっている方がわかりやすいです。また、画像書き出しが必要な場合も、すでにグループ化されているとまるごとアセット書き出しもできて便利です！

「新しいフォルダ」「○○のコピー」のようなレイヤーが並ぶと、全くわからないです。名前をつけるのが難しいものは、無理につける必要は無いと思いますが、なるべくレイヤー名はわかりやすいものがいいと思います。

ホバー時のデザインには、レイヤーにカラーラベルやコメントをつけておいたり、仕様書にまとめておくなど、コーダーに伝わるように準備しておくと良いと思います。

あちこちでロックがかかっていると、どこでロックがかかっているのか確認したり、わかりづらいため。デザインデータを渡すときには、ロックの数は最小限にした方が良いと思います。

レイヤー整理は、ある程度デザインが固まった段階でする。など、自分のタイミングがあれば無理せずできると思いますので、ぜひ意識してやってみてください♪