デザインのレイヤーには名前をつける、その理由


UIデザインすること自体においては、レイヤーに名前をつけることは些末な作業で、必須ではないものだと思います。UIデザインとして画面を作ることのほうが優先度の高いことです。
それでも、デザインのデータのレイヤーに名前を付ける理由を私なりに考えてみました。

レイヤー名をつけておくことのメリット

なぜ、レイヤー名をつけるのか。
レイヤー名をつけておくと、オブジェクトが何なのか伝わります。

デザインのレイヤー構成は、レイアウトのひとかたまりや情報や構成のブロックをグルーピングしてまとめます(ex: グループ、フレーム)。 このようなレイヤーグループは、それだけで意味ができます。
名前は、レイアウトだと header footer content 、要素のブロックだと list table card item など。
今回はレイヤー命名規則のようなところまでは踏み込みませんが、どのようなグルーピングをされたものかは名前にしておくと良いと思います。
名前を示すだけで、ブロックの意味や役割が伝わりやすくなります。
見た目でデザインの情報を示すだけでなく、ちゃんとオブジェクトそのもの内容を伝えることになります。

伝わる相手:自分を含むデザイナー

これはUIデザインをする私のやり方になりますが、オブジェクトをデザインしていく際にそのものの意味や役割を念頭にして進めています。
ですが、何を扱っていたかは忘れます。見ればわかることもありますが、レイアウト用のグルーピングだったりするとそれがなんのためのものか忘れます。
それが何なのか、レイヤーに名前があることでちゃんと情報として伝わります。
整理されたレイヤーデータにより途中からデザイナーが参加する場合にも、混乱を防ぐことができます。

伝える相手:エンジニア

デザインから開発に進んだ際、オブジェクトが何なのかがエンジニアに伝わることで、コードに落とし込んでもらうときに役立ちます。
デザイン以上に見た目だけでなく、そのものの意味がレイヤー名になっていることが情報になっています。それが何なのかが名前でわかると「デザインのドキュメント」として、デザインと実装をつなぐものになります。

レイヤー名をつけることに慣れてしまおう

私が使ってきたデザインをするツールは、PhotoshopからXDやらFigmaまでいろいろと変遷してきました。ツールが変わってきても、レイヤーに名前をつけるクセはついています。
レイヤーに名前をつける作業を納品や受け渡しをする前の整理作業で行うかたもいますが、作業中からレイヤー名をつけることをおすすめします。

UIデザインを作り上げることとデザインの要素レイヤー名が一致するとそれだけの情報が増え、「デザインのドキュメント」としてのデザインデータの質が上がります。
UIデザインの成果物は画面の設計の絵としてのものだけでなく、レイヤー構成自体がそのままUIデザインの情報アウトラインのようなものにもなります。
レイヤーのそれ自体が何を示すのかの情報を明示することが、デザイン〜開発の認識揃えに繋がるので全体的な効率アップに繋がると思います。


投稿者 Imanishi Emi

UIデザイングループリード。
制作会社でプロモーションサイトや広告のデザイン制作、受託開発会社にてサービスのUIデザインを経験し、Gaji-Laboに参加。ユーザーが使いやすいインターフェースデザインづくりと、フロントエンドで実現するUIデザインの橋渡しについて考えます。
実際にインターフェースを試したりフィクションの世界のUIにヒントをもらいながら、心地よく使えるデザインを考えるのが好き。