こんにちは、"マークダウンの申し子"こと Yangです。
この記事もマークダウンで書いてます。
わたくしfeedforceでUX/UIデザイナーをやってまして、
現在は弊社プロダクト ”dfplus.io” のUX/UI周りを担当しております。
早速ですが、feedforceではUIデザインにSketch を利用してます。
先日dfplus.ioのUIデザインをまとめているSketchファイルのリファクタリングを行いました。
昨年初め頃、dfplus.ioのデザインリニューアルを行ったのですが、今ほどUI周りが固まりきっていない段階からSketchファイル上で様々な試行錯誤をしてきたため、設計に以下のような問題を抱えておりました。
- 設計ルール（制限）が曖昧
- シンボルの構造に無駄が多い
- わかりづらい
- 複雑になっているためか重い
- テキストスタイルの定義がバラバラ
- 古いバーションで作ったファイルで起きるバグを抱えている
- インスタンスをコピーするとシンボルまで複製されてしまうことがある
しばらくこのつらい状態が続いていたため、設計を整理し直して再利用しやすい”弱・Design System”っぽいSketchファイルにしようと試みました。
もはやn番煎じの出がらしな内容かと思いますが、誰かの何かになれば幸いです。
※ちなみに、大まかなUIの見た目は変えずにシンボルの設計やSketchファイルの内容を作り直したので「リファクタリング」と言ってますん。
リファクタリングするにあたって気をつけたこと
気をつけたこと、つまるところ今までの反省点です。
余計なシンボル化はしない
Sketchの便利機能の１つの "シンボル（Symbol）" ですが、無計画にシンボルを作り続けるとすぐに無駄だらけのカオスなSketchファイルになってしまいます・・・
- 「ネストしすぎてわかりづらい・・・」
- 「このシンボルとこのシンボル、ほぼ一緒じゃない？」
- 「これシンボル化する意味あるの？」
といったことが起こらないように、変更や調整が多いレイアウト周りなどはシンボル化せず必要最低限のコンポーネントだけをシンボル化するよう気をつけました。
積極的に使いまわさない物までシンボル化されていてカオス・・・
いろいろ迷走していたことがうかがえますね・・・
不要な装飾はトル
リファクタリングとは直接関係のないのですが、この期に不要な装飾も一掃することにしました。
例えば、ほとんどの色に上から下方向へ明度が低くなるようにグラデーションがかけられていて、 ちょっとクドく古臭い印象がありました。
これは白テキストと背景色とのコントラストを誤魔化すためのものだったので、そもそもの色の設計の見直しも同時にはじめつつ、一旦外すことにしました。
余計な装飾はどんどん取って見た目も設計もシンプルにしていく。必要になったらつけましょ。
謎の”オレオレルール”はやらない
CSSやその他のプログラミングでもそうだと思うのですが、「オレが考えた最強の設計」は往々にして他の人にとっては「なんだそれ？」になりがちな気がします。
Sketchファイルの設計でも一緒です。
他の人が見ても理解できる設計になっていることが理想的です。
世界中で使われているSketchだからこそ、ある程度体系化された知見がTipsとして出回っているので、そういった物を参考にしました。
主にやったこと（シンボル周り）
シンボルの再利用性を担保しつつ構造の単純化を行うため、いくつかのアプローチを取り入れました。
プラグイン ”Paddy” を導入
今回からSketchのプラグイン"Paddy"を導入しました。
このPaddyは、要素の内部余白や要素間のスペースを指定した値分自動で維持してくれる超Coolなプラグインです。
おなじみパブロさんによるPaddy紹介。すごくわかりやすい。
「ゥルッ・カッ・ダッァ」
具体的には、ボタンのラベルを書き換えるとラベルの長さに合わせて大きさを自動で調整してくれたり、複数の要素をグループ化してスペースの値を指定すると常にスペースを調整してくれたり・・・
ちょっとうまく説明できてない気がするので、↓のgifを見てもらえればなんとなくイメージしてもらえるかと。
今まではボタンのラベルを書き換えたらその都度手作業で調整していたため、なかなか面倒で・・・
このPaddyを知った時は革命的すぎてサブイボ立ちました。
Atomic Designを応用したシンボル命名ルール
dfplus.ioのフロントエンドではReactを採用していて、コンポーネントは全てStorybook上で確認できる状態になってます。
フロントエンドエンジニアの方々が頑張ってくださったおかげで、既にAtomic Designのルールに沿って綺麗にまとまっているため、Sketch側も合わせてAtomic Designを応用した形にしようと思っておりました。
そこで、今回はSTANDARDの吉竹さんが書かれたこちらの記事を参考にさせていただきました。
今回の構成は以下の通りです。
少しアレンジした点として、色やボタンの形状（Shape）など "Atomsとは言えないが、Atoms以降のコンポーネントの構成要素として使われる物” を、他の要素と名前を合わせてLv0として追加しています。
Lv0- Lv1以降のコンポーネントの構成に使われる素材的な要素
- 例：色やボタンの形状（Shape）など
Lv1- Atoms にあたるもの
- 例：ButtonやInputやIconなど
Lv2- Molecules にあたるもの
- 例：LabelとInputを合わせたFormなど
Lv3- Organisms にあたるもの
- 例：HeaderやSidebarなど
Lv4- Templates にあたるもの
- 例：HeaderとSidebarを組み合わせたDashboardなど
StyleGuide- スタイルガイド用のシンボル、アプリケーションのUIデザインには使わない
- スタイルガイドを作らないのであれば必要ない
カラーのシンボル設計
アプリケーションで使う色は全てシンボル化しました。
このカラーシンボルをコンポーネントの背景やマスクして使うことで、Sassの変数っぽくカラーを管理できるます。
"Base color" としているBlackとAlternateですが、この２色はテキストや全体の背景に使うため、色の濃淡を調整したものをシンボルとして用意しました。
この濃淡の調整では、基本色に透過度を調整した白色を乗せて、擬似的に透過率を調整した状態にしています（つまり厳密には透過はしていない）。
色の名前のパーセンテージは基本となる色からの透過率になってます。
透過率の方がカラーコードよりも濃淡の度合いが直感的にわかりやすいかと思い、このように命名しました。
ボタンのシンボル設計
ボタンの構造はこんな感じです。
よくある
- ボタンの形状でカラーシンボルをマスクしてシンボル化した
"Shape”を用意 - Shapeを背景にテキストやアイコンを乗せて出来上がり
といった構造を参考にしました。
Shapeの構造はこんな感じになってます。
カラーのシンボルをRectangleでマスクしてます。
命名ルールに沿ってLv0に追加しました。
このShapeを "input / select / textarea" 等にも使い回せば、角丸の度合いの変更なども一括で調整できてテイストの統一にもなりますね。
アイコンもシンボル化
今までアイコンは、"Material Design Icons "をフォントのまま使っていて、アイコンのコードをテキストとしてコピペして利用してました。
この方法だとコピペだけで素早くアイコンの変更ができる反面、
- Material Design Iconsのアイコンフォントをインストールしていないと使えない
- font-sizeでのサイズ管理でちょっと面倒
- Paddyがうまく動かない
等のデメリットがありました。
そのため、今回からアイコンはフォントからアウトライン化し、カラーシンボルをマスクしてIconのシンボルにしました。
新しいアイコンを使う場合はアウトライン / シンボル化する手間が増えましたが、上記に挙げたアイコンフォントでのデメリットは全て潰すことができ、安定してアイコンを使い回すことができるようになりました。
Iconシンボルの構成です。
やってることはShapeと一緒ですね。
アイコン・色の変更も楽チン。
フォーム系
FormLabelとInput、CheckboxとFormLabelなど、Lv1 or Lv2のコンポーネントの組み合わせからなるLv3のコンポーネントになります。
ここまでのシンボル設計が活きてくるところ・・・
逆に下手な設計をしてると色々と手詰まり感が出てきてつらくなってくる・・・
シンボルの設計はシンプルに無駄なくしておけば、つらくなってきても変更箇所を少なく簡単に直せそうです。
スタイルガイドも作った
この記事の中でもちょこっと貼ってましたが、今回のリファクタリングの副産物として簡単なスタイルガイドを作成しました。
アプリケーションの画面を構成する最低限のコンポーネントは揃っているため、ここを見てもらえればある程度構造がわかるしテンプレート的にコピペしてもらえば少々手間が省けるかなと。
もう少し作り込めば、外向けを意識したブランドガイドやデザインガイドもここから派生させて作り上げることができそうです。
おわり
リファクタリングは一通り終了し、最終的に”弱・Design System”っぽいものが出来上がりました！！
実はまだちょこちょこと足りないコンポーネントがあるのですが、だいぶスッキリしましたね、おーさむ！
これで完成ではなく今後も良い設計を求めていきたい所存です。
下手な長文にお付き合いいただきありがとうございました。
