• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

コーディングしやすいデザインデータの作り方 ★Part3(レイヤー編)

投稿者アイコン
2020/10/30
書いた人:
futappa_staff
カテゴリ:
デザイン   ネタ
1,141 views

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

コーディングしやすいデザインデータの作り方 ★Part3(レイヤー編)

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

目次

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

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

make_good_design03_img_mode

不要なレイヤーは削除する

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

セクション・パーツごとにグループ化する

1、セクションごとにグループで分ける

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

make_good_design03_img_group

2、パーツ系は、まとめてグループにする

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

make_good_design03_img_btn

レイヤー名は関連する名前にする

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

通常時・ホバー時のデザインをわかりやすくする

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

make_good_design03_img_on

レイヤーをロックしない(場合による)

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

最後に

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


この記事を読んだ人はこんな記事も読んでいます