業務系システム開発 │ 内製化支援サービス事例株式会社TKC 様

目的・目指したこと

自社でデザインを見直せる体制構築とスキルの習得

「デザインガイドライン」の策定を目指す

レトロなデザインから脱却するために、画面デザインを外注するのではなく、社内で「デザインガイドライン」を策定することにしました。見直しが必要なシステムの数が多いことを踏まえると、社内にデザインスキルやノウハウを蓄積し、自分たちでデザインを更新していけるような体制づくりが必要だと考えたからです。

さらに、システムの設計を担当する多数の設計者に、「TKCの画面設計は“こう”だ」という共通認識を持ってもらいたいという思いがありました。また、トレンドは時代と共に変わっていくため、デザインのトレンドにも対応し、画面をメンテナンスしていく力も欠かせません。

そこで、外部のデザイン会社からコンサルティングを受けることで、自社でシステムのデザインスキルを向上させていく上での指針となる「デザインガイドライン」の策定に乗り出しました。

業務系システムの開発経験が豊富なＳｋｙ株式会社を選定

デザイン会社の選定にあたり、Ｓｋｙ株式会社のほかにも数社にお声掛けし、見直しが必要な画面のデザインサンプルを作成してもらいました。あくまでも会計事務所で活用いただく業務システムであるため、単に見栄えが良ければいいというわけではなく、ユーザーの皆さまが使いやすいデザインでなければなりません。

Ｓｋｙ株式会社に決めたのは、提示されたサンプルのクオリティーが高かったことに加え、業務系システムのデザイン制作の実績が多かったためです。また、何度かやりとりするなかで、担当者が柔軟に親身になって対応してくれる姿勢にも好印象を抱きました。

幅広い年齢層が見やすいデザインを目指す

弊社のシステムユーザーは、会計事務所に勤務する年配の税理士から、高校を卒業したばかりの若い職員まで、年代はさまざまです。そのため画面デザインのリニューアルでは、幅広い年齢層の方にとって見やすくわかりやすいデザインにすることを重視しました。

また、今回の画面デザインリニューアルでは、画面遷移や画面に表示される情報の変更までは踏み込んでいません。私たちが開発するシステムは、税制改正後、短期間でリリースし、申告期限に間に合うよう活用いただくという流れですので、画面を大きく変更するとユーザーが操作に迷い、期限がシビアな申告業務に影響が出る恐れがあります。ユーザーを混乱させないことを第一に考えました。

効果1

「センスからセオリーへ」。デザイン研修を機に意識が変わる

「近接」「整列」「強弱」「反復」。デザインの基礎から学ぶ

ユーザーを混乱させないデザインリニューアルのために、弊社のUIの設計思想、既存画面に配置しているボタンの意味、画面遷移のルールなどをＳｋｙ株式会社の担当者の方にご説明し、それを基に弊社で選定した8つの画面について、画面デザインのサンプルを作成してもらいました。

しかし、作成してもらったサンプルを弊社のレビューで報告した際に、「なぜそのようなデザインになったのか」との問いに自分の言葉で的確に説明できませんでした。「デザインの知識がないために、的確な説明ができない」「もっとデザインの知識が必要だ」と感じたことで、Ｓｋｙ株式会社の担当者の方にデザインに関する研修を依頼。この研修が私たちの意識を変える転機となりました。

研修では、デザインの4原則である「近接」「整列」「強弱」「反復」などの基礎から教えてもらいました。私たちはこれまで、デザインは「センス」によるものだと考えていました。しかし研修を通じて、デザインにも「セオリー」があるのだと強く感じたことで、「デザインを『センス』から『セオリー』に変えていこう」と意識を大きく変えていくことができたのです。

「なぜ改善すべきか」。既存画面の問題点に気づく

また、サンプルを作成してもらった8画面について、既存のデザインのどこに問題があったのかを洗い出した資料を作成してもらいました。各画面で多くの指摘があり、これまで弊社が作ってきた画面にこんなにたくさんの問題があったのかと、あらためて認識できました。研修の中で、デザインのセオリーを示しながら「なぜ改善すべきなのか」を説明してもらい、理解が深まりました。

そして、まずはデザインの4原則を守ることから始めようと、自分たちで画面のデザインを見直してみたところ、とても見やすくなったことを実感できたのです。チーム内で話し合う際に「ここが近接だ」など、デザインのセオリーに関する“共通言語”もできていきました。私たちデザインチーム以外のメンバーにも、こうした原則を落とし込んでいくために、ガイドラインを作ることの重要性をあらためて感じることができました。

株式会社TKC様よりご提供

効果2

約4か月でデザインガイドラインの策定を実現

改善を繰り返しながらガイドラインを作成

デザインガイドラインには、8つの画面デザインのサンプルを盛り込むとともに、タイトルバーやヘッダ、フッタなどに関する「画面構成（UI）」、ボタンや入力フォーム、タブなどの「画面構成要素」、フォントや色などの「ビジュアルデザイン」といった項目を設定し、それぞれに指針を定めています。

こうしたガイドラインの内容やサンプル画面について、Ｓｋｙ株式会社の担当者の方と週1回ミーティングを行って密に連携しながら、詰めていきました。社内レビューで随時成果物を報告し、次回のミーティングで指摘された課題を改善、というアジャイルのようなサイクルを繰り返すことで、約4か月でガイドラインを策定することができました。自社だけで取り組んでいたら、これほどのスピード感で形にすることはできなかったと思います。

手を動かしながら実践的な知識を習得

デザインのセオリーへの理解は深まっていきましたが、いざ画面を見直そうとすると、手が止まってしまうこともありました。そこでガイドライン作成期間の終盤に、自分たちで見直した画面をＳｋｙ株式会社の担当者の方に見てもらい、文字の間隔やボタンの位置など、細かくレビューしてもらいました。壁打ちのようにやりとりしながら改善していくことで、実践的なノウハウが身についていったことを実感しています。

私たちがデザインの知識を得たことで、デザインチーム以外の開発メンバーにも、「なぜこのデザインではだめなのか」を言語化して説明できるようになりました。そのほかのメンバーが「なるほど、そうなのか」と納得感を持てることで、開発の速度が上がっていったように感じます。ガイドラインと併せて、私たちが実践的な知識やノウハウを得て、それを横展開していくことで、組織力の高まりにもつながったと思います。

ガイドラインの活用

順次画面デザインをリニューアル。ユーザーから好評の声が寄せられる

リニューアル後、デザインに関わる問い合わせは5件ほど

これまでのレトロなデザインのコンポーネントを作り変え、デザインリニューアル用のコンポーネントを作り込みました。現在はそれを各システムに展開し、新たなデザインのシステムを順次リリースしており、ユーザーの皆さまからもご好評をいただいています。

弊社のコールセンターには、ユーザーの皆さまからシステムの操作方法や不明点について問い合わせが寄せられます。最初に画面デザインをリニューアルしたシステムについての問い合わせはたったの5件でした。ユーザーを混乱させないことを第一に考えていたので、この結果を大変ポジティブに捉えています。リニューアル後のデザインに慣れ、むしろまだ見直しされていないシステムの方に違和感を覚えるという方もいらっしゃるほどで、「早くすべてのシステムのデザインをリニューアルしてほしい」という要望をいただくこともあります。

ガイドラインの更新、開発メンバーへのノウハウ共有を

画面デザインのリニューアルと併せて、ガイドラインのブラッシュアップも続けています。新しいデザインパターンの画面が出てきたときなどに、ガイドラインに随時新たな項目を追加しており、最新版はVer.4まで更新しています。今後もガイドラインを更新し続けていきます。

今回Ｓｋｙ株式会社に依頼したことで、私たちのデザインに関する知識が増え、デザインガイドラインも自分たちで更新していけるようになりました。実際にデザインのリニューアルができたことだけでなく、私たちがコアメンバーとして、デザインの知識をそのほかの開発のメンバーに対して広げていく体制づくりができたこともコンサルティングを受けた成果だと感じています。今後もさらに、開発メンバーのデザイン知識向上やノウハウの共有に取り組んでいきます。

私たちが開発するシステムは、税務システムである特性上、毎年の税制改正に完全準拠する必要があります。今後も、税制改正に合わせてデザインのリニューアルを進めるとともに、時代に合わせたデザインであり続けるよう、ガイドラインのメンテナンスを続けていきます。