みんなの開発指針！デザインガイドラインを最小工数でつくった話
こんにちは、デザイナーのターナーです。
クラウドワークスのプロダクトチームでは、フルリモートフルフレックスの制度が始まり、朝の通勤時間を家事や運動に使ったり、時間を有効活用できるようになり、日々の充実度がアップしたと感じます。
チームメンバーに会って話したいときは自由に出社できますし、対面できる時間の密度は逆に濃くなったと感じます。
また、普段からリモートメンバーにも伝わるコミュニケーションを工夫するようになり、 様々なツールを使いこなし情報をまとめることで、より正確な情報を効率よく共有することができるようになりました。
弊社が提唱する「働き方革命」、自ら先陣を切って実践できていると身を以て感じます。
さて今回は、そんなフルリモート制度が初導入される中で 私がアプリチームにジョインしてからの4ヶ月を振り返り、アプリのスタイルをどのように整えていったかをレポートしたいと思います。
歴史的な経緯について
今までクラウドワークスのアプリは1人のデザイナーがAndroid / iOSを兼任することが多く、なかなかスタイル改善に時間を割くことができない状況が続いていました。
またアプリのデザインガイドラインが存在しなかったため、担当するデザイナーが入れ替わる度に少しずつ色や形が変わることが積み重なり、ルールが一貫せずわかりづらくなっていました。
そのような中、弊社リードデザイナーの上田とマネージャーの新がデザインの大切さを社内に浸透させるべく、UXガイドラインの作成、デザイン組織の考案、その他多くのデザイン普及活動を続けた結果、社内ではデザインの大切さを理解する人々が増え、続々とデザイナーが採用されました。
その結果、今年からAndroid / iOS、各OSの専任デザイナーが配置されることになり、今夏から私と林で、アプリデザインを担当することになりました。
ガイドラインづくりを、他タスクと同時進行する方法
デザイナーが2人体制になったものの、アプリチームにデザインガイドラインは存在しておらず、スタイル改善の施策もありませんでした。
そのような状況でしたが、チームにジョインしてすぐ、デザインに理解ある頼もしいエンジニアから意見を聞く中で、アプリ全体のスタイル改善の必要を感じたため、チーム内で自発的にデザインガイドラインをつくることにしました。
デザインガイドライン とは、 言葉の通り「どうやってデザインするかを判断するための指針」となる、デザイン（色、文字、レイアウトなど）に関するガイドラインのことです。
しかし、スタイル改善を含まない施策の途中であったため、開発スピードを落とさず、走りながら整備する必要がありました。
そこで、ガイドラインを作成する目的を、以下のように設定しました。
既存デザインの基本ルールを活かし「アクセシビリティ改善」にフォーカスする
常に更新 & 運用していき、チーム全員がスタイルガイドをいつでも参照できる状態にする
今後追加される機能もしくは改修するデザインから、ガイドラインに沿って開発するフローに変える
上記のような目的を予め設定することによって、どこからどこまでガイドラインをつくるべきか優先順位が決めやすくなりました。
また、アクセシビリティ改善の緊急度が高いコンポーネントから新ガイドラインを順次反映していくことに決めたため、スムーズに運用することができました。
デザインガイドライン作成のプロセス
今回のデザインガイドライン 作成の目的は「アクセシビリティ改善」であり、全体改修を考えているわけではありませんでした。
そのため、ガイドラインは最初からすべて定義しようとせず、スピード重視で必要なものから適宜定義していくことを心がけました。
1. カラーガイドライン
実際には、改修する画面のテキストカラーが薄く読みづらかったため、最初にテキストのガイドラインをつくりました。
ベースカラーは既存に合わせ、読みやすい濃さに調整 & 使われる状況により変化する透明度のルールを定義しました。
そして、改修のタイミングに合わせて、順次テキストカラーを改善していきました。
その結果、改修した画面のテキストは、ルールが一貫し、はっきり読みやすくなりました。
各OSに最適な形式で色を指定したカラーガイドライン
2. ボタンガイドライン
ボタンは、様々な色や形が存在していて、中でも「薄いグレーのTertiary（優先順位3番目の）ボタン」があることで、押せるボタンであることがわかりづらく、アクセシビリティを下げる原因となっていました。
そのため、Tertiaryボタンとして定義されていた薄いグレーの代替色を決め、他のボタンもAndroid / iOSで共通の色に統一し、各OSで最適なインタラクションを定義しました。
Androidのボタンガイドライン。各OSに最適なインタラクションを定義。
ボタンは一部だけ色を変えてしまうと全体のルールが分かりづらくなってしまうため、「ボタン改善プロジェクト」を立ち上げ、一気に新しいボタンカラーに改修していきました。
ここでは施策を一旦とめて、ボタン改善に集中する必要がありましたが、スコープを「アクセシビリティ上問題のあるボタン」に絞ったことで、短期間で無理なく完遂することができました。
3. 定義が必要になったものは、都度追加
その後、ボーダーや背景色、マージン、ユーザーアイコンの形なども、施策で必要になったタイミングで、順次ガイドラインに追加していきました。
4. アイコンリニューアル
基本のガイドライン作成が落ち着いたタイミングで、改修する画面に様々なスタイルのアイコンが複数存在したため、アイコンのスタイルも整備していきました。
また、Fontawesomeを中心とした既成のアイコンからオリジナルアイコンに変更することで、 クラウドワークスらしいをオリジナリティをアプリに与えたいという理由もありました。
そこで、ゼロからアイコンをつくり、アプリ内ほぼ全てのアイコンを新アイコンにリプレイスしました。
オリジナルアイコンは一度に大量に作成すると時間がかかるため、施策と並行して、日々少しずつ作っていくことで、無理のないスケジュールで改修することができました。
以下が新しいアイコンを適応したフッターアイコンです。
"Filled Style" と "Outlined Style" が混在し、アイコンの選択 / 未選択の状態がわかりにくい状態だったため、スタイル改善しました。
また「スカウト」アイコンに関しては、既存の紙飛行機のモチーフは世間一般的に「メッセージ送信」を連想させてしまうため、「ターゲット」のモチーフに変更しました。
その他のアイコンは、Outlined Styleに統一し、Android / iOS 各OSに最適なスタイルにアップデートしました。
難しかったこと
デザインが既に存在していたため、「既存の制約と共存する形で、今後の指針となるガイドラインを考える」ことは、考慮すべき点が多く難しいと感じました。
例えば、インタラクションなどは、Android / iOSそれぞれのOSに最適な定義をしたいという思いがありながらも 現在のアプリはWebViewが多いため、共通のガイドラインにすべきところ / 共通でなくても良いところを把握し考慮する必要がありました。
この点は、エンジニアと頻繁に情報共有し、沢山のアドバイスをもらうことでカバーしました。
エンジニアの協力のおかげで、既存の制約と共存する最適なガイドランを考えていくことができたと感じます。
デザインガイドラインを作ってよかったこと
ガイドライン作成前は、エンジニアにZeplinの要素を一つ一つ確認してもらうことでしか、実現したいデザインを伝える術がありませんでした。
そのため、些細なことでも全てデザインする必要があり、エンジニア、デザイナー双方にとって非常にコミュニケーションコストがかかっていました。
しかし、誰でもいつでも参照できるデザインガイドラインをつくったことで、デザイナー以外の職種でもガイドラインをみれば、デザインの指針がわかるようになり、開発フローを効率化することができました。
また、デザイナーにとっては、確実にルールが一貫したデザインができるようなり、アプリ全体のスタイルを容易に把握することができるようになりました。
ガイドライン作成の目的は案件によって様々だと思います。
今回の目的は、既存デザインの「アクセシビリティ改善」であり、施策と並行で進める必要がありスピード重視でしたので、 エンジニアが実装に必要な情報量を都度確認し、最低限必要なものを用意して、エンジニアと一緒に補強していくというスタイルで進めていきました。
そのため、現在のアプリのガイドラインには、まだ定義のないものがたくさんあります。
今後も、必要なコンポーネントを適宜追加し、開発を進めながらガイドラインも充実させていきたいと思います。
デザインガイドラインを作成する手間はありましたが、「開発者全員のデザインの指針」となり、デザイナーとエンジニアのコミュニケーションを大きく補足することができました。
さいごに
今回ご紹介させていただいたガイドラインづくりは施策にはないものでしたが、 デザイナーとエンジニアの提案からはじまり、施策の途中で共につくりあげました。
クラウドワークスでは「こうしなくてはいけない」と言った小難しいルールはあまり存在せず、 やる気があれば様々なチャレンジができる風通しの良い雰囲気で、 1人1人が裁量権を持って仕事に取り組めます。
そんな環境で、情熱を持って一緒にサービスを作っていける仲間を大募集中です。
是非ご連絡お待ちしております！