【紙→Webデザイン】Web用のデザインデータにレイヤー名をつける?
こんにちは。
都内の制作会社、NO DEZAINでデザインをしているnaoです。
長年、エディトリアル中心に紙媒体のデザインを幅広く手掛けていましたが、色々な出会いから2年前にWebデザインの沼へ。
Webデザイン、奥が深いんですよ…!
同じデザイン業のはずなのに、紙とはまた違って。
新たに学んだことがたくさんあります。
そんなわけで、このnoteでは紙→Webの違いについて気づいたこと、学んだことのアウトプットをしていこうと思ってます。
今回は、Webデザインデータのレイヤー名についてです。
なぜ、レイヤー名をつけようと思ったか
弊社では、xdもしくはfigmaを使ってデザインデータを作成しています。
紙のデザインをしているときは、手を動かすこと優先であまり意識したことのなかったレイヤー名。とあるウェビナーで、figmaで制作した1つ1つの要素につけている名前が既にコーディングベースのもので、同じころ、社内でもデータのレイヤー名についての話題があがり…
そうしてある日突然、Webデザインのデータにはルールに沿ったレイヤー名をつけたほうが良いのでは、と思い至ったのでした(遅い😂w)
レイヤーの捉え方
▽紙のデザインデータのレイヤー
紙のデザインのレイヤー = 透明な紙の重なりのようなもの、というイメージ。
llustratorでもInDesignでも、紙媒体ではデータの見たままがそのまま印刷さるので、レイヤー名は自分(と同プロジェクトの人間)がわかればいいよね〜、程度のもの(特殊印刷など例外も有り)
例えばIllustratorの場合、遥か昔はトンボもアートボード内に配置していたので、レイヤー名は「トンボ」「背景」「テキスト」…のような使い方。わかりやすさ優先で日本語で名前をつける場合がほとんどで、1人で完結するペラ物のデータではそのまま「レイヤー1,2,2のコピー,3…」となっている場合もあったなぁ💭
▽Web用のデザインデータのレイヤー
Web用のデザインデータのレイヤー = xdやfigmaで左のエリアに表示される、要素ごとをグルーピングしたもの、というイメージ。PhotoshopでWebデザインをする場合も同じ。
どの要素とどの要素がグルーピングされているか、も大切になってきて、これもWebの構造をわかっていないとおかしなことに。グルーピングとレイヤー名を意識しただけでも、データが今よりも整ってきそう。
そして、Webデザインのデータはコーダーさんへ渡すのが大前提。
データが整理されていて、要素がわかりやすいに越したことがありません。なるべく丁寧に作って気持ちよくコーディングをしてもらいたい。
(まぁ今まではぐちゃぐちゃのまま渡してたんですよ…ごめんなさい...)
Webデザインではレイヤーに名前をつけよう
…と、いうものの、htmlの知識がなさすぎて、間違った名付けで逆にコーディングの邪魔になることもありそう。期限が迫っているときには、名付けが中途半端になることもありそう。
だいたいつけるの面倒くさそう。最初は工数が余計にかかりそう。
この辺りは慣れていくこと、作りながら構造を意識してレイヤー名をつける、を積み重ねていくしかなさそう。
レイヤー名も自分勝手なものでなく、コーダーさんとの共通言語ということで、class名を参考にしながら一覧にしてみました。
この一覧をベースに、整頓されたWebデザインデータを目指して取り組んでいこうと思います☺ (実際に作ったレイヤーも上げられるものがあったら、追記しようと思います🖊)
にしても、たくさんあるな...!
レイヤー名一覧
▽構成/セクション系
▽要素系
▽画像系
▽テキスト系
おまけ
▽figmaで一括で名前を変更する方法
簡略化できるところは、していこう。
スピードあげてこ!
ということで、figmaでは一括でレイヤー名を変更することができます。
わぁ!簡単!!
このコマンド活用していこうと思います◎
ちなみにxdにも同様の機能をもつ「Rename it」というプラグインがあり、入れておくと便利ですー👍
ここまで読んでいただきありがとうございました☕
NO DEZAINはWebサイト制作を中心としたデザイン会社です。
Webサイト制作/グラフィックデザインのご相談がございましたら、お気軽にお問い合わせください☺
▼NO DEZAIN