Sketchのアートボード名の付け方のベストプラクティス

ディレクター兼エンジニア兼デザイナーの坂倉です。

Sketchでのアートボード名の付け方のベストプラクティスについてです。
ベストプラクティスと書きましたが僕の場合です。

結論から書くと、

「（デバイス名/）数字-ページカテゴリ名/数字-ページ名」

がいいのかなと感じています。
（デバイス名/）はオプションです。
「pc/」とか「sp/」です。

具体的には

「01-最新情報/01-最新情報一覧」
「01-最新情報/02-最新情報詳細」
「02-セミナー情報/01-セミナー情報一覧」
「02-セミナー情報/02-セミナー情報詳細」

こんな感じです。上記の例で下記も説明してきます。

理由１アートボード整頓時に便利

何ページもデザインしているとSketch作業スペース上でアートボードの配置を整理したくなります。
その時に使うプラグインは「Align」が便利かと思います。
Alignではアートボード名に含まれる「-（ハイフン）」の前の文字列ごとにアートボードをグルーピングして
そのグルーピングごとにアートボードを改行して自動的に配置し直してくれます。

なのでアートボード名に「数字-ハイフン」を使うと上記の例だと

「01-最新情報/01-最新情報一覧」「01-最新情報/02-最新情報詳細」
「02-セミナー情報/01-セミナー情報一覧」「02-セミナー情報/02-セミナー情報詳細」

という感じでページカテゴリ毎に自動で整頓してくれます。

さらにレイヤーウィンドウのアートボードも整頓もしたくなります。
レイヤーのアートボード整理に使うプラグインは「Sort Me」です。

このプラグインはシンプルにABC順に自動で整理してくれるので
アートボード名に「数字」を使うことで整理したい順番に並べてくれます。

理由２アートボードの書き出し時に便利

アートボードのデザインデータ書き出しや共有には何通りかあります。
・pngやjpgなど画像データでの書き出し
・inVision
・Zeplin

Zeplinは名前順に並べられるのでアートボード名に「数字」を入れると便利です。

inVisionやZeplinは共有に便利ですが、
クライアント様によっては画像データで共有する方がいい時があります。

pngやjpgなど画像データでの書き出しでは
Sketchは「/（スラッシュ）」の前の共通文字列ごとに
自動的にフォルダ分けしてくれます。

上記の例だと

「01-最新情報」
「02-セミナー情報」

という感じでデザインデータをフォルダ分けしてくれます。

クライアント様にデザインデータを共有する時に
デザイン枚数が数十ページになってくると混乱するので
データをフォルダ分けして共有したくなります。

この作業を手作業でやっているとそれだけで
結構時間を取られてしまうのですが

Sketchの機能をうまく使うと書き出しの度に
自動でフォルダ分けしてくれるのでとても楽です。

もっと良いアートボードの名前の付け方あったら教えてください。