作業効率が上がるデザインデータ整理術～基本のレイヤー整理からPhotoshop・Illustrator・Figmaで注意したいポイントまで解説～

PhotoshopやIllustrator、Figmaなどの画像編集ソフトで作ったデータを、複数人で扱ったり、時間が経ってから自分で見返すことって多いですよね。その時にこんなことを感じたことはありませんか？

「どこに何のレイヤーがあるかわからない」
「チームでデータをいじるから中身を整理したいけど、どうやればいいかな」
　
私自身も自分が何か月か前に作ったデータを開いたものの、中身を整理してなかったため
編集したいレイヤーにたどり着くまでに時間がかかった……という経験があります。
　
今回は、作業効率が上がる基本的なデザインデータ整理のポイントと、制作現場で使われることの多い3つの画像編集ソフト（Photoshop、Illustrator、Figma）で注意したいポイントについて具体的に解説していきます。

デザインデータ整理によるメリット

そもそもなぜデザインデータの整理が必要なのでしょうか？

多くの画像編集ソフトには、「レイヤー」という概念があります。

レイヤーとは英語で「階層」を指す言葉で、画像・テキスト・図形・背景などの要素を別々に扱うための機能です。作業をしていくうちに「レイヤー1」「レイヤー2」……と自動でどんどんレイヤーが重なってしまうため、気づけばどこに何の要素があるかわからない状態に陥りやすくなります。

また、データ整理で注意したいポイントは、レイヤーだけではありません。「ファイルがたくさんあって最新版がどれかわからない」「フォントが相手のパソコンにダウンロードされていないため、見た目が変わってしまった」といったトラブルもよくあります。

データ整理のポイントに入る前に、以下のメリットを改めて押さえておきましょう。

基本的なデータ整理のポイント5つ

まずはどの画像編集ソフトでも共通で意識しておきたい、基本的なデータ整理のポイントを5つ紹介します。

1. 命名規則の統一

「最新版」「修正後」「最新版_修正」など、その時々で好きな名前を付けて保存すると、どれが最新データなのかわからなくなり探すのに時間がかかってしまいます。

データの名前をつけるときは「プロジェクト名_バージョン番号_日付」のように、命名規則を統一しましょう。

レイヤーやグループの名前も同様です。「背景」「メインコピー」「写真」「CTA」「価格」など大まかなグループごとに名前をつけると、他の人にもわかりやすい親切なデータになります。

名前を付けることで「過去の制作者が何を考えてレイヤー分けをしたか」が見える点も、編集が楽になるポイントの1つです。

2. 不要レイヤーの削除

散らかった部屋を想像してください。どこに何があるかわかりにくく、新しいものを置くスペースを確保するのが難しいですよね。

不要なレイヤーも、残しておくことで必要な情報を埋もれさせてしまいます。またデータも重くなる分、保存やアップロードに時間がかかるので削除しましょう。

Photoshopであれば、レイヤーパネルの右上のパネルオプションから、「非表示レイヤーを削除」を選択して一括で削除する方法もあるのでぜひお試しください。

LPの編集データでアコーディオンのようにあえて非表示にしている項目などがある場合は、グループ名やレイヤー名に「あえて残していること」がわかるような名前を書いておくのがいいでしょう。

3. ロック機能を活用して重要情報を残す

制作データの中には、ロゴのように必須かつ、消してはいけないデータもありますよね。レイヤーにロックをかけておくことで誤って消してしまうことを防ぐことができます。

またPhotoshopであればアートボード、Figmaであればフレームやページなどにレギュレーションを記載しロックをかけておくことで、重要情報を消さないようにしつつ共有することもできます。

4. レイヤーのグループ分け

命名規則の部分でも軽く触れましたが、目的や種類によってレイヤーをグループ化することで、全体の構造がわかりやすく編集しやすくなります。

バナーの場合であれば見出し・背景・フキダシ・価格……というように大まかなパーツごとに分けると分かりやすいでしょう。

▼下記はバッジ/メインコピー/サブコピー/ロゴ/背景で分けた例になります

LPの場合も基本的なグループの分け方はバナーと同様ですが、追加でセクションごとに分けるとよりコーディングのイメージも容易になるでしょう。ショートカットキーを使えば簡単にグループを作成できます。グループ化したいレイヤーを選択した状態でCtrl＋G（Macではcommand＋G）ですぐに作成が可能です。こちらはPhotoshop、Illustrator、Figmaで共通のショートカットキーです。

色分け

グループ分けの一種として、Photoshop・Illustratorではレイヤーを色分けできる機能があります。構成が複雑なグループでも、色を付けることで一目でどれが同じグループのものなのかすぐに判断することできます。

5. フォントの規格・サイズをそろえる

データを他の人に共有する際、相手のパソコンにそのフォントがないと見た目が変わったり編集できない可能性があります。

これらの状況は、プロジェクトでフォント規格を統一しておらず各々が好きなフォントを使用した場合に発生する可能性が高いです。フリーフォントであればリンクを共有してDLすることも可能ですが、有料だと都度新たに購入しなければならなかったり、手間がかかります。

また、コーディングが必要なLPでは小数点以下の数字があるフォントは、書き出し時に文字がぼやけたり、実装時にコーダーが迷う原因になります。

全員が同じ基準で作業するルールを決めると、作業効率も上がります。「社内で使用するフォントはAdobe Fontsだけに限定する」「フォントサイズは単位はpx、数値は整数で作成する」のような形でルールを決めておくと良いでしょう。

Illustrator特有のポイント

ここからは、Illustratorを使う際に気を付けたいポイントを紹介します。

画像のリンク切れ/埋め込み漏れ

Illustratorで作ったデータでありがちなのが「画像のリンク切れ」「埋め込み漏れ」です。これらが発生してしまうと、印刷や書き出しを行った時に画像が読み込まれず、空白の不完全な状態で出力されてしまいます。この状況を避けるための方法は2つあります。

1つ目は単純明快、データの最終段階でリンクを埋め込むことです。リンクパネル・コントロールバーから手動で埋め込みを行ってください。

2つ目はIllustratorで作ったデザインに使っている画像やフォント、その他の要素を一つのフォルダにまとめて「パッケージ」として保存する方法です。これをすることで何か月後にデザインデータを開いたり、他の人に送ったりするときに、「あれ、この画像どこ行った？」というようなことが起きにくくなります。

事前に一度保存しておかないとパッケージを選択できないので注意してください。

参考：Illustratorの「パッケージ機能」で入稿データを作成する方法

フォントのアウトライン化について

フォントの規格でも触れましたが、作ったデータを他の人に共有するときに、相手のパソコンにそのフォントがないとデザインの見た目が変わってしまう可能性があります。

この問題をIllustratorで解消するのが「アウトライン化」で、テキストを絵に変換してしまう手法です。これを行うと、どのコンピュータで開いてもフォントの見た目が同じように表示されます。ただし、一度アウトライン化をすると、そのテキストは後から編集できなくなってしまいます。そのため、もしまだ文字が変更になる可能性があるなら、フォントはアウトライン化せずそのままにしておくべきです。

どちらのデータを残しておくか迷う場合は、【入稿用データ】【編集用データ】などの名前を付け区別できる状態でデータを2つ用意するのがよいでしょう。

ただしデータを2つ用意する場合はどちらも見た目が同じになるように、修正が発生した時に更新を忘れないようにしましょう。　

Figma特有のポイント

Figmaにも独自の機能や注意したいポイントがあるので、ご紹介します。

ページ機能の活用/データの規格を統一する

Figmaで編集を行う場合、編集データをまとめる機能として「グループ」「フレーム」「ページ」の3つがあります。

直接グループやフレームでまとめるのもよいですが、ページの機能を活用することでより分かりやすいデータにすることができます。

たとえばデバイスごとにページを分ける、あるいは作業用・共有用・実装用など制作ステータスの段階で分ける…など機能や状況に合わせた分け方が可能です。

ページ機能の活用方法が決まったら、「編集データを制作するときはこの基準データを複製して使う」などすることで、社内の規格を統一することができます。

こちらの記事で具体的な内容が詳しく紹介されているので、ぜひご覧ください。

参考：エンジニアと一緒にFigmaの運用を改善している話｜のもち

コンポーネントの活用

Figmaには「コンポーネント」という便利な機能があります。この機能はボタンなど繰り返し使う要素で用いられることが多く、基本となるデータを調整することで複製した内容にも一括で変更が適用されます。

コンポーネントにはメインコンポーネント、インスタンスの2種類があります。粘土に例えると、コンポーネントは型抜き、インスタンスはかたどった後の粘土のようなイメージです。

コンポーネントを編集するとその編集内容はインスタンスにも適用されます。型が変わるので根本的な形そのものが変わるイメージです。

インスタンスの編集はコンポーネントには影響しないです。かたどった粘土にどんな色を塗るか、付け足すかをしても型には影響ないです。

▼メインコンポーネントはひし形が4つ、インスタンスはひし形一つのアイコンで示されます

詳細はこちらのヘルプに載っています。
参考：Figmaのコンポーネントについてのガイド – Figma Learn - ヘルプセンター

コンポーネントを活用したパーツの種類が増えてきた場合は、別途パーツをまとめるセクションを用意するなどで管理するのがよいでしょう。

デザインデータを整理して作業効率を上げよう

制作はチーム作業です。本記事で紹介したポイントを活用することで、スムーズな作業進行とチームの円滑なコミュニケーションにつながります。

手順はシンプルですが、その影響力は大きいので、まずは基本的なデータ整理のポイントからぜひ取り入れてみてください。