
Sketchの命名ルールなどをまとめたGuidelineをつくりました - itachoco Sketch Guideline v0.1
note初投稿です!株式会社ソウゾウでメルカリ カウルというプロダクトのデザイナーをしている @wataame といいます。
突然ですが、Sketchを使ってアプリのUIなどを作る時に、「このレイヤーの名前どうしよう。。Table View?」と悩んだり、レイヤーの重ね順を「Artboardに配置している順番に上から並べる?」など、悩んだ経験があるデザイナーは多いのではないでしょうか。
どれが正解ということはなく、業界全体として特定のルールがあるわけでもないので、人によって・チームによってマチマチになっているのが現状で、チームに複数デザイナーが居る場合は、お互い空気を読みつつなんとなく合わせようとするけど細かいところはぐちゃぐちゃ。という状況で他の人が作ったファイルを編集する時に効率が悪かったり、1人で作業をしている場合でも命名ルールどうしよう?と悩んで無駄な時間を使ってしまうことがあります。(自分自身がそうでした)
そんな状況を解決するために、メルカリ カウルを一緒に作っているデザイナーの @urakey と一緒にSketchのガイドラインを作っています。
itachoco Sketch Guideline v0.1
どんなもの?
「こういうとこ迷うよね〜」とか「ここ決まってると嬉しいなぁ」みたいなものをガイドラインとしてまとめてます。
・Naming Rules: ページ、アートボードなどのファイル全体の命名ルール
・Layers: レイヤーの重なり順、要素名
・Symbols: シンボルの粒度、要素名
・Export: アセットを書き出す際の命名ルール
どうやって使うの?
「複数デザイナーで作業するので命名規則を決めたいけどどうしよう」とか、「新しいプロジェクトはじめるたびに命名ルールを変えちゃってる。ここらで一発揃えたいなぁ」など、迷った時・困った時に参考にしてください。
みなさんへのお願い
このガイドラインはいろんな方の意見を取り入れながらアップデートしていきたいと思っています。GitHubで公開していて誰でも編集可能ですので、「ここはこういうルールのほうがよくない?」とか「これ足したい!」などありましたら、がんがん編集してどしどしプルリクください。(いっぱいくるといいなぁ)
今後の予定
・ガイドラインを順次アップデート
・ガイドラインを適用したサンプルのSketchファイルを公開
itachocoについて
@urakey と一緒に作りたいもの作ろープロジェクトの屋号を「itachoco」にしました。とりあえずWebサイト作ったり、いろんなの人を巻き込んでちょこちょこ好きなもの作ったりしていこうと思っていますので、よろしくお願いします!
===========
最後に宣伝
自分と @urakey が働く株式会社ソウゾウではデザイナーを募集してます。
興味ある方はぜひ応募 or オフィスに遊びにきてくださいー。
https://www.souzoh.com/jp/recruit/