こんにちは。今年の1月からクラウドワークスに参画しました、UIデザイナーの井上です。
先日公開された、この記事を目にした方も多いのではないでしょうか。
そうです、私がTwitter転職の人です。
時間が経つのは早いもので、入社してから一ヶ月が経とうとしています。
さて、いきなりですがクラウドワークスに入ってまもない私が、効率的なデザイン運用をしていくためにSketchガイドラインを作ってみました。
その名も「baabaa Sketch Guidelines v.1.0.0(バーバースケッチガイドライン)」です！
※「baabaa」とは「メーメー 」っていう羊の鳴き声のことです！
だんだんと膨張して行く無駄なデザインやシンボルを羊の毛に例えていて、その毛を削ぎ落とし必要な要素だけを蓄えたデザインデータにしていこうという施策になります。
今回はこの「baabaa Sketch Guidelines (v.1.0.0)」施策の考え方やを実践してみて良かったなと思う点などをiOS・Androidアプリのデザインデータを元に話していきたいと思います。
1.デザイン運用の現状と問題点の抽出
まずはなぜ私がこの施策をデザインチームの全員に持ちかけたのか、という話からしていこうと思います。
私たちクラウドワークスのデザインチームは元々、少人数かつそれぞれが担当したものを作成していくというデザインの運用方法でした。そのため、それぞれが自己流の命名規則・シンボル・レイヤー構成でデザインデータを作成していました。
作業に取り掛かるため既存のデザインデータを開いた時、本当に衝撃でしたw
な、なんだこのレイヤーは！！き、汚い！！どこになにがあるのか見当もつかない！！
証拠写真を撮ったので是非じっくりと見てください。
今まで明確な規則がなかったため、ここまでSketchのデザインデータが属人化してしまっていたんですね。「なんだ少しデータが汚いだけじゃん」と思う方もいるかもしれませんが、チームで開発していく環境においてこれは大きな問題となります。
ここからは属人化することでどんな悪影響があるのかと、具体的な施策内容をお伝えします。
・完全に属人化してしまったSketchのデザインデータ、なにがいけないのか
会社のデザイナー体制・人数にもよりますが、私が既存のデザインデータを触った時に「どこになにがあるのか」「パーツの親要素はどれか」などの不明点が影響して、作業の効率が極端に落ちたりデータの整理に時間を取られたりと様々な弊害を生みました。
そして、この問題が深刻化していくにつれて下記のような影響が出てくるだろうと仮説を立てました。
- 作業人数が増えるにつれ更に属人化していく
- 可読性低下および改修コストが増える
- 新しく入るチームメンバーへの引き継ぎが難しくなる
- エンジニアへの指示出しや共有・連携が取りにくくなる
- 統一した一貫性のあるデザインができなくなる
私は今回これらの仮説に基づき、具体的な改善施策を考えました。
2.今すぐチームで取り組める、短期的な改善施策
・コンポーネント指向をベースとしたレイヤー構成に変更
皆さんはAtomic Designという言葉を知っていますか？
Atomic Designとは、デザインをコンポーネント指向で5つの単位に分けて考えるというものです。
それぞれ、Atoms(原子)、Molecules(分子)、Organisms(有機体)、Templates(テンプレート)、Pases(ページ)というふうに分けられます。
Atomic Designについての詳しい解説は省きますので、下記記事を参考にしてみてください。
今回はAtomic Designのコンポーネント指向の全てを取り入れた訳ではなく、考え方の一部を利用してクラウドワークス独自のSketchガイドラインにしました。
既存のデザインデータでは、シンボルとレイヤーの関連性がとてもわかりにくくネストした先に何があるのかが予想できない状況でしたが、このようにレイヤーを整理することで、すぐに改修作業にはいることができるようになりました。是非こちらを参考にしてみてください。
ここで注意点を一つ。
あまりガチガチに規則をつくりすぎると今度は規則に意識を取られすぎて、作業効率が落ちてしまうこともあります。
そこで私たちは、
- 頭文字は大文字にすること
- 単語と単語の間には"_"(アンダーバー)を使用する
- 第一階層は「Header」「Contents」「Tabbar」「Background」のみにする
という点だけを最低限のルールとしました。
以上の決まりを守りながらデータを整理していくと・・・
コンポーネント指向をベースにレイヤー構成を変えるだけで、こんなにもわかりやすくレイヤーを管理することができます。
既存のデザインデータと見比べるととてもスッキリとしました。
デザイナーが増えると、その分同じデータを触る人数も増えてきます。
極端な話、10人データを触る人がいるのであれば10人が感覚的にどこになにがあるかわかる、レイヤー構成にしていきましょう。
・SketchでUIパーツをシンボル化・Sketch Libraryの導入
SketchでのUIデザイン作成においてシンボルの活用は必須になっています。
しかし、冒頭でもお話した通りクラウドワークスのデザインチームは元々、少人数かつそれぞれが担当したものを作成していくというデザインの運用方法でした。
なので、同じUIパーツがある場合でもデザインファイルの分だけ個々にシンボルが作成されている状態で、同じデザインのシンボルがあるにも関わらず、また一からシンボルをつくるという作業が発生していました。シンボルの連携が横同士で取れていないことで、デザインガイドラインに沿ったデザインができなくなってしまう場合もあります。
そこで考えたのが「Sketch Library」を使って、シンボルを一括管理するという方法です。
Sketch Libraryをつかえば、デザインデータごとにシンボルが乱立することもなくなります。さらに、色などもシンボル化させることでデザインガイドラインに沿ったデザインをすることができます。
また、シンボルに命名規則を作ってあげることで「デザインをコンポーネント化する」という行為を見える化することができ、イメージがより鮮明になります。
今回はこのような命名規則を作ってみました。
シンボルに命名規則を作ってあげることで、共通認識がグンと上がります。
そして、デザインガイドラインと連携することでユーザーが迷うことのない、UI設計を突き詰めて行くことができるのです。
3.短期的な改善施策として、Sketchガイドラインを作ってみた結果・・・
ここまで、具体的な施策内容を解説してきましたが私個人として「やってみて本当によかった」と感じています。理由としては、
- どこになにがあるのかが明確にわかるようになった
- 作業効率が上がりより完成度の高いデザインデータを作成することができた
- チームでのコミュニケーションコストが大幅に減った
という点があげられます。一人一人がほんの少し意識するだけでも、こんなにデザインの運用が楽になるんだなと改めて感じました。また、同じ課題に向かってチーム全体が取り組むことでそれぞれの頭の中にあった認識を全員の共通認識にすることができました。
・施策を実践した際に見えてきた新たな課題
- デザインのバージョン管理ツールは「Abstract」が適切なのかどうか
- デザインガイドラインとSketchガイドラインは平行して施策を立てていくべきか
- チームでの共通言語はどう構築していくべきか
などなど。また新しい施策ができそうな予感がしているので、それはまた別の記事でご紹介をしていこうかな、と思います。
この「baabaa Sketch Guidelines (v.1.0.0)」も始まったばかりで正直完全体とは言い切れませんが、Sketchのガイドラインを作るということは、デザインチームにとって開発チームにとって、そして作り手だけでなくサービスを使うユーザーにとってもプラスの効果が期待できます。
当たり前のことのようで、デザインガイドラインを作っていない会社もまだまだたくさんあるように感じます。それは会社自体の環境の問題であったり様々な要因が考えられますがデザイナーが効率を考えなくていいという時代はとっくに終わっています。
それぞれの会社ごとに成長していくのではなく、同じIT業界にいるデザイナーたち全員がより良い方法を共有し合い、IT業界全体を率先していけるような存在になっていきたいと考えています。
しばらくはこの運用方法を続けますが、またバージョンアップしたら皆様にお知らせできればと思います。
4.さいごに
私たちクラウドワークスのデザインチームは、新しいメンバーを迎え入れ新しいフェーズに突入しようとしています。
お互いがお互いを高め合い、より良いサービスを世の中に発信していきたいと思っています。気になる方は是非Wantedlyのぞいて見てくださいね！
以上、UIデザイナーの井上でした！
(Twitterよかったらフォローしてください、コメントお待ちしております。)