コーディングしやすいデザインデータの作り方 ★Part3(レイヤー編)
- 書いた人:
- futappa_staff
- 3,619 views
コーディングしやすいデザインデータの作り方のポイントをまとめました。今回は、レイヤー編です。
デザインとコーディングを両方するようになって気づいたことをまとめます。
今回は、レイヤーについてまとめました。
目次
- 描画モードはデフォルト以外(オーレバーレイや乗算など)は使わない
- 不要なレイヤーは削除する
- セクション・パーツごとにグループ化する
- レイヤー名は関連する名前にする
- 通常時・ホバー時のデザインをわかりやすくする
- レイヤーをロックしない(場合による)
- 最後に
描画モードはデフォルト以外(オーレバーレイや乗算など)は使わない
パーツとして書き出すときに、表示通りのデザインのまま書き出せないため、特別な理由がない限りは使わないでおきましょう。代替策としては、透明度で対応するのがベターかと思います。
不要なレイヤーは削除する
非表示レイヤーがあると、必要なのか不要なのかわからないのと、データ容量も重くなりますので気をつけてください。
セクション・パーツごとにグループ化する
1、セクションごとにグループで分ける
ヘッダー、新着情報、アクセス、フッター…などという感じで、デザイン順と同じようにグループを作りましょう。
2、パーツ系は、まとめてグループにする
例えばボタンを作った場合、「ボタンの背景」「文字」「矢印アイコン」これらの情報は同じ1つのグループとして まとまっている方がわかりやすいです。また、画像書き出しが必要な場合も、すでにグループ化されていると まるごとアセット書き出しもできて便利です!
レイヤー名は関連する名前にする
「新しいフォルダ」「○○のコピー」のようなレイヤーが並ぶと、全くわからないです。名前をつけるのが難しいものは、無理につける必要は無いと思いますが、なるべくレイヤー名はわかりやすいものがいいと思います。
通常時・ホバー時のデザインをわかりやすくする
ホバー時のデザインには、レイヤーにカラーラベルやコメントをつけておいたり、仕様書にまとめておくなど、コーダーに伝わるように準備しておくと良いと思います。
レイヤーをロックしない(場合による)
あちこちでロックがかかっていると、どこでロックがかかっているのか確認したり、わかりづらいため。デザインデータを渡すときには、ロックの数は最小限にした方が良いと思います。
最後に
レイヤー整理は、ある程度デザインが固まった段階でする。など、自分のタイミングがあれば無理せずできると思いますので、ぜひ意識してやってみてください♪