Techtouch Developers Blog

テックタッチ株式会社の開発チームによるテックブログです

俺たちには、ガイドラインが必要だ

俺たちには、ガイドラインが必要だ

この記事はテックタッチアドベントカレンダー17日目の記事です。

デザイナーの keita です。

先日、社内のメンバー10人くらいで体育館を借りてバスケをしました。バスケ自体はおよそ20年ぶりでしたが、日頃の筋トレのおかげか、3ポイントは昔よりも余裕でゴールに届きました。ゲーム中にはたったの1本しか決まりませんでしたが。来年は、テックタッチのステフィン・カリー、もしくは三井寿と呼ばれるよう、嫌いな下半身の筋トレをがんばろうと思います(シューティング練習しないんかい)。

さて、この記事では「Techtouch User Interface Guidelines」として一旦完成(まだまだブラッシュアップ中)したガイドラインの、作成にまつわるアレコレを紹介します。ぜひ、最後までお付き合いください。

きっかけ

テックタッチは、正式リリースからもうすぐ3年が経とうとしています。まもなく3歳。導入いただいた企業の方から、日々いろんな要望やフィードバックをいただくのですが、うれしいことに「UI いいですよね」「UX いいですよね」という声をいただくことが多々あります(ちょっと盛ったかも)。ほんと、デザイナー冥利に尽きます。

もともと競合と差別化できるよう意識して設計はしていましたが、「なにがどうなっているからイケてるのか」という部分がまったく言語化できていませんでした。

  1. せっかくデザインの評判がいいんだから、プロダクトをスケールさせるためにもっと力を入れるべき!
  2. デザイナーを採用しよう!(ただいま全力で採用活動中)
  3. でも、デザイナーが採用できたとしても、属人化している今のままだとチームでデザインできない
  4. じゃあ keita の頭の中、ちゃんと言語化しようぜ

となったわけです。

目的

ガイドラインを作る目的は、下記のように設定しました。

共通言語を定義し、プロダクトの一貫性を保つ

共通言語を定義することで、テックタッチのすべてのメンバーが的確なデザイン判断を行えるようにする。その結果、コミュニケーションは短時間で精度の高いものになり、プロダクトの開発スピードは加速する。

また

  • 個人的な意見(声の大きい人の意見が採用される)
  • 多数決によるデザイン判断
  • 属人化

を防ぎ、高い拡張性の維持と、それによるブレないユーザー体験を提供する。

どうやって作ったのか

テックタッチというプロダクトに限らず、自分がデザインをするうえで気を付けているポイントを書き出していきました。ここで出てきたものは、デジタルプロダクトのデザインをしている方なら「全部知ってるよ」というレベルの当たり前のことがほとんどです。

次に、これらのポイントをガイドラインとして成形していくにあたって、他社のガイドラインを参考にしながら、わかりやすい例を加えて Notion にまとめていきました。デファクトスタンダードである Apple , Google はもちろんですが、個人的には SmartHR のライティングに関するガイドラインはわかりやすくまとまっていてとても参考になりました。

参考にしたガイドラインは、下記の通りです。

デファクトスタンダードとして目を通したガイドライン

Apple / Human Interface Guidelines

developer.apple.com

Google / Material Design Guidelines

material.io

国産なので参考にしやすかったガイドライン

ソシオメディア / ヒューマンインターフェース ガイドライン

www.sociomedia.co.jp

SmartHR / Design System

smarthr.design

その他

Adobe / Spectrum

spectrum.adobe.com

salesforce / Lightning Design System

www.lightningdesignsystem.com

作ってみた感想

実際に作成したガイドラインは、まだまだ外部に公開できるようなレベルのものではないためここではお見せできないですが、今後ブラッシュアップを続け、いつの日かお披露目できる日がくるといいなと考えています。

よかった点

  • プロダクト開発の議論中に「これってガイドラインにありましたっけ?」といった会話が生まれるようになった
  • 先日の shiori さんの記事にあったように、エンジニアでも判断ができるようになった

tech.techtouch.jp

改善が必要な点

  • ガイドラインとして不足している部分が多いので、まだまだ判断に迷うことがある
  • ガイドラインをもとにプロダクトの改善をしていきたいが、そのためのリソースがない
  • 一般的なガイドラインしかなく「テックタッチとしてはどうあるべきか」というプロダクトの方向性を定義するものがない

最後に

今回、ガイドラインを作ったことでデザインを評価するための最低限のものさしができました。今後は、このガイドラインを育てていくと同時に、チーム・プロダクトとしてスケールさせるためにはどうすればいいのかを考えなければいけないと思っています。

そこで今、私が考えていることを誤解を恐れずに書いて締めたいと思います。

1.デザイナーの採用

やっぱりこれに尽きます笑 1人よりも2人、2人よりも3人のほうが、アイディアの量も質もいいに決まってる!

2.デザインはデザイナーがするべき

デザインはデザイナーのものではないです。でも、やっぱりデザイナーがするべきだと思っています。組織が大きくなり業務がより細分化してきたときに、UI やユーザー体験についての責任はやっぱりデザイナーが持つべきだし、それにより各職種が自らの責任範囲のなかでパフォーマンスを最大化することができれば、結果、チーム・プロダクトとしてよりよいものを作ることができると考えているからです。

3. ガイドラインの普及活動

ガイドラインを社内へ浸透させるための普及活動は続ける必要があります。ガイドラインの浸透によって、プロダクトチームだけではなく、ビジネスチームのメンバーからもデザインに関する会話がとびだしたらそこはユートピア。テックタッチはもっといいプロダクトになること間違いなし!