Sketch公式UIエレメントのチラ見

sketch
Pocket

こんにちは。最近は金融、特に証券会社におけるデザインの複雑さと大変さに直面し、息も絶え絶えでブログの更新をすっかり忘れていました。(嘘です、普通にサボってました。)

そんな中先日、Bohemian Codingが突如Sketchの公式UIエレメントを公開↓。


Sketch Elements UI Kit

普段忙しくてつい作りっぱなしの雑なSketchファイルを、「まあデザイナー私だけだしいいか・・・」とそのまま放置したりするのですが、さすがに年末だしSketchファイルも大掃除しなければ、と思っていたところにBC公式ファイルが出たということで、「どんな風に階層作ってんのかな〜」と勉強も兼ねて中を覗いてみました。
おそらくSketchに使い慣れた人には「おっ、わりと結構シンプルだな」と感じるものになっていると思いますが、主に自分の勉強もかねて構造だけ雑に解説していきます。(間違ってたらどんどん指摘してください)

 

全体構造

ダウンロードしたファイルを開くと、下記の5種類に分けたサンプルが入っています。

Food:食べログのようなレストラン検索アプリUI

Social:instagramのようなSNSとメッセンジャーアプリUI

Music: itunes musicやAWAのようなミュージックプレイヤーアプリUI

Photography:写真撮影・ストックアルバムUI

Travel:Expediaのような旅程検索・レビューアプリUI

各種ユースケースに合わせてUIが別れているので、それぞれの設計の参考になりそうです。各アートボードごとに違いはあれど、大まかな構造は下記のような作りです。

Contentsの部分がアートボードによって使い分けられており、TabやNavの部分が殆ど共通になっています。
Backgroundもシンボルで管理する方法は初めて知りました。(アートボードで個別に設定してた)アートボードごとに背景色を設定するのが面倒な人は入れておくのもよいですね。

 

シンボル構造

更に、シンボルを開くと、中身はこんな感じになってます。

 

これは基本の使い方の説明になりますが、スケッチのシンボルはネスト構造化することができ、命名規則で指定したシンボルは切り替えが可能です。

以外にネストの深さはそこまで無く、シンプルに作られている印象です。誰かがネストの深さは闇の深さという名言を残していたような残していなかったような気もしますが、私も基本的にあんまり入り組んだファイルは好きではない(作っていくうちに構造も変わることのほうが多いし)ので、シンプルな構造でちょっとホッとしました。

このファイル特有のシンボルも沢山ありそちらもかなり勉強になるのですが、まずはどんなアプリでも基本になりそうな下記のシンボル群をそのまま真似してしまってもいいかなあと思いました。

  • Bars:TabバーやNavigation
  • Colors:色設定
  • Controls:ボタンやタブ
  • Icons:アイコン

 

全てのカラー設定はシンボルに

以前のversionのスケッチだと、シンボルをつくってもON/OFFなど色分けしたシンボルを用意して置かなければいけなかったのですが、色要素をシンボル化してColorとしてネストしておくことで、色々な要素に決まった色をあてていくことができます。

 

シンボルに登録されているカラー

 

シンボルに登録されているアイコン

 

アイコンシンボルはマスク化され、Colorsシンボルが入っている

 

アートボードごとにアイコンの色を変えることが可能

サービスデザインだと「ブランドカラー、UIカラーが既に決まっていて命名規則もあります」って場合も割りとあるので、一番最初にまず色をシンボルにしておくとよさそうです。THEOだとブランドカラーは下記のように決めているので、エンジニアさんと相談して命名規則を決めてSketchにもシンボル登録しておくことで、開発コミュニケーションも楽になるかもしれません


 

オーバーライドは別でシンボルを作成している

オーバーライドする要素は別途シンボル化されてOverridesにネストされていました。

このやり方は私は実践したことがなかったのですが、ある程度デザイン設計が完成したサービスデザインや開発がある程度経過した段階において「このシンボルはいろんなパターンがあるしオーバーライドしておいたほうが効率が良さそうだぞ」っていう要素からどんどんシンボルをOverrides側に持ってきて管理するなど、チームによってやり方を変えるのがいいのかなと思いました。逆に、まだデザインが固まっていないときは、必ずしもこの構造じゃなくてもいいかなと個人的には思います。

 

だいたい4/8の倍数の模様

一部そうでない部分もあるのですが、大体は4/8の倍数で出来ているようにみうけられます。

radiusとか

 

paddingとか

iconとか


 

よく分からなかったでの誰か教えて欲しいTint

最初見た時Tintってなんだよ?って思ったんですけど、つまりこれのことらしい

iOSのTintカラーを擬似的にSketchファイルで実装しているってことっぽいんですけども、別にカラーをシンボルにしてるんだからそれを使えばよくない?って思ったんですけど、こうすることによるメリットを誰か教えて欲しい。全体で一気に指定したいということなのかな。

。。。と、調べていたらよりデザインさんのブログでこの言及を見かけたんですが(とても勉強になりましたありがとうございます)、Zeplinで正しい色が反映されないようで、あんまり使うメリットがわからなかった。これは単純な私の知識不足の可能性が大なので誰か補足待ってます。

 


なんだろう…ブログ書き慣れて無くてすごい疲れた…今後もめげずに更新します…。
こんな感じで、毎日色々試行錯誤しながら働いております。THEOではUIデザイナーを募集しています!のでFintechに興味のあるデザイナーさんはぜひぜひランチでも行きましょうー

UI/UX Designer。東京で3年、USで2年働いた後にフリーランスとして活動。2017年から資産運用ロボアドバイザーTHEOの開発に携わっています。FP資格保有、暗号通貨もちょこちょこ。お金に詳しいデザイナーを目指します。休日トランペッター、インディゲーム好き。
※お仕事のご依頼・お問合わせはTwitterかFacebookへどうぞ。
※デザインと関係ないものはnoteに書いてます https://note.mu/akari61