目次

    整理整頓は大事

    お部屋や机も整理整頓するとわかりやすく、探しやすい、使いやすい部屋になりますよね。
    それと同じでデータも整理整頓するとわかりやすいデータになります。

    前職では、案件担当をつけず横断的に運用作業を行なっていましたが、チームでタスクを分担するときにお互いがわかりやすくなる方法は「命名をして整頓すること」でした。
    (命名を命名規則としてルール化すると更に効果がありました)

    どうして適切な名前をつけるべきなの?

    命名しないことによる不都合

    - どれが何かがわからない
    - ファイルのエラーの要因になる
    - 内容を読み解くのに時間がかかる
    - 共同作業の際に作業者同士の意思疎通に困る
    - 引き継いだ人がすぐに理解出来ない
    - 最新or正しいものか判断できない
    - 時間が経ったときに自分でもわからなくなる

    【アプリケーション別】命名するメリット

    あくまで一例ですが、こういうときに便利!というのをまとめてみました。

    ●XD

    ▼アートボードの名前が遷移を確認する「プレビューリンク」で表示される。


    ▼画像書き出しするときの名前になる。(アートボードもグループも要素も)

    ●Photoshop

    ▼アセット機能に便利(○○jpgなどアートボード・フォルダ・要素に名前をつけるとその名前で書き出される)

    ●Illustrator

    ▼アートボードごとに書き出しをする際に便利。
    また、アートボード一覧でクリックするとそのアートボードに飛ぶので、名前がわかりやすいほうが探しやすくて便利です。


    具体的に何をどうやるの?

    ①アートボードに名前をつける


    名前がついていないと、どのデザインのアートボードなのかわかりにくいので、アートボードにきちんと名前をつけることをおすすめします。

    ②グループや要素に名前をつける


    ▼グループ
    中に何が入ってるかわからないグループは、それぞれ開けて確認しないといけないので、グループ化したら名前をつけましょう。

    ✕ グループ1→ ○ header

    ▼要素
    何の要素かわからないと、その要素を選択して確認しないといけないので、要素にも名前をつけましょう。

    ✕ 楕円形→ ○ menu_dot

    XDではフォルダや要素をアセットで書き出してコーディングに使うので、書き出すパーツは英語にしておいたほうが良いです。

    ③順番を整える


    レイヤーが整頓されていないと、どこに何があるかわかりにくいので
    表示されている順番に上から置くとわかりやすくなります。

    ✕ レイヤーの順番がバラバラ→ ○  上から順番にする
    ※XDで固定しているナビゲーションなどは除外

    XDのスタック機能を使うと、自動的に上から順番に並び替えてくれます!神!
    (横スタックの場合は左から順番)

    他の人のためにやっているけど、これ実は自分が作業しやすくなるんです。
    不要なレイヤーの消し忘れミスもなくなります。
    (整理整頓されていないIllustratorで空欄テキストレイヤーや不要なアンカーポイントやパスが紛れていることがよくある)

    ④フォルダやファイルの名前もルールを決めて整理整頓する

    そもそも、データを作るとき、どんな名前にしていますか?
    フォルダやファイル名も整理整頓しやすいように気をつけるといいです。

    [Good]おすすめの命名規則

    案件と概要をつける

    何の案件の何のファイルか、ファイルを開かなくてもわかるようにする。
    また、共有フォルダを検索するときに、案件名や概要をつけておくと探しやすいです。

    ✕ 新規ファイル.psd
    ○ 案件名_概要(idealump_banner.psd)

    日付をつける

    「いつ作成/変更されたもの」かわかるようにする。
    Adobecloudファイルでバージョン管理されるようになりましたが、共有サーバーに保存しておくときに最新がどれだかわかりやすくなります。

    1.yyyymmdd_案件名_概要

    または

    2.案件名_概要_yyyymmdd

    1.日付を前にすると案件や内容に関わらず日付で並び変えられる
    2.案件と概要が先にくるとfinderで見たときに何のファイルが見やすい(ファイル名が長いと省略されるので)

    [Bad]やめたほうがいいファイル名

    ●ざっくりしすぎな名前

    ✕ image.jpg→ ○ artist_image.jpg
    ✕ design.jpg→ ○ site_design_SP.jpg

    PhotoshopやXDで作ってるんだったらだいたい画像やデザインですもんね・・・

    ●空白が入っている

    × abc site design → ○ abc_site_design

    空白が入っているとエラーになることがあります。
    (空白ありのファイル名を保存したときアプリやPC側で勝手にアンダースコア[_]を入れてくれたりします)

    ●ピリオド[.]が入っている

    × abc.site.design.psd → ○ abc_site_design.psd

    ピリオド以降が拡張子だとPCが判断してしまい、ファイルを開けなくなる

    まとめ

    いかがでしたでしょうか。

    いちいちやるのめんどくさい!と思うかもしれませんが、慣れて習慣化してしまうとスムーズに作業が出来るようになります。
    自分がもともとPhotoshop時代にすごい乱雑なレイヤー構成で作業してたので、整理しない気持ちもとっても分かります。。。
    そのほうが早い(整理する時間がモッタイナイ)気がしてしまう。

    でも、目的のものをどれだ〜と探してる時間のほうがモッタイナイ。
    そして他の人があなたのデータを読み解くのに時間がかかってモッタイナイ。

    自分の作業効率のためにも、チームの共同作業効率化のためにも、是非、命名の習慣化をしていってほしいです。

    最後まで読んでいただきありがとうございました!

    参考

    ▼整理術について

    Design Materials:業務効率化させるデータの制作と管理をしよう。ファイルをきちんと整理する方法。ファイリング・システムの簡単なルール。
    https://note.com/papertrumpets/n/n89ddad142c6c

    【整理術】ファイル命名3つのルール | ファイルの整理に迷わない
    https://yayoi0004.com/how-to-name-folder-1701

    【仕事効率化】ファイルを迷子にしない管理法【デザイナー向け】
    https://yayoi0004.com/file-classification-3567

    ▼画像書き出しについて

    【XD】デザイン素材の書き出し
    https://helpx.adobe.com/jp/xd/help/export-design-assets.html

    【Photoshop】名前を付けるだけ!一瞬で切り出せる「画像アセット」が便利すぎる!
    https://www.vareal.co.jp/column/photoshop_imgasset/

    【Illustrator】アートワークの書き出し
    https://helpx.adobe.com/jp/illustrator/using/exporting-artwork.html

    【Illustrator】マルチアートボードから、まとめてpng/jpgで保存する方法あれこれ
    https://sksksketch.net/tips/ai-artboard-export.html

    PREV
    2023.02.10
    モダンなJavaScript ES2015(ES6)分割代入②
    NEXT
    2023.02.10
    今話題のChatGPTを使ってみた