中小企業の力になる、AIチャットボット「Kotae」リニューアルプロジェクト Part 1：リサーチと発見
当社プロダクトデザイン部門のブログ第一弾！自社製品のリニューアルにあたり、ユーザーの声と徹底的な調査で明らかになった課題、使いやすさ向上のために取り組んだ事例をご紹介します。
.png)
ビジネスを次のステップへ
Tokyo Techiesが伴走します
Tokyo Techiesが伴走します
新製品 多言語AIチャットボット「Kotae」をリリースしました！製品サイトはこちら
詳細を見るデザインシステムは、チームや組織が足並みを揃えるのに役立つ、UX/UIデザインの重要な一部です。チームが大きくなるほど、デザイナーや開発者全員が同じ認識を保つための、明確でしっかりしたデザインシステムが重要になります。
じゃあ、デザインシステムって一体何でしょう？ アプリやウェブサイトのようなデジタル製品を作る人なら誰でも使える、究極のツールキットのようなものだと考えてください。基本的には、再利用可能な部品（ボタン、メニュー、アイコンなど）と、その使い方に関するルール（色、フォント、スペースの取り方など）を集めたものです。チームの全員がこのキットを使うことで、見た目の一貫性が保たれ、ものづくりがずっと速くなります。
ウェブサイトやアプリが、まるで同じファミリーの一員のように見え、同じように感じられます。これにより、ユーザーが混乱することがなくなり、ブランドがしっかりとして信頼できるように感じられます。
完成済みの部品（パーツ）と明確なルールがあるので、チームははるかに速くものを作ることができます。些細なことのために毎回「車輪の再発明」をする必要がなくなり、無駄な時間が減って、より早く製品をリリースできます。
新しい機能を追加したり、新しい製品を作ったりする必要があるとき、デザインシステムがあれば、ぐちゃぐちゃになったり一貫性がなくなったりすることなく、ずっと簡単に成長させることができます。しっかりとした土台（基盤）を提供してくれます。
デザイナー、開発者、その他関係者全員が同じルールブック（共通認識）を使います。これにより、混乱や意見の衝突が減り、チームでの作業がよりスムーズに進みます。
デザインシステムには、障がいを持つ人を含む誰もが製品を簡単に使えるようにするためのガイドラインが含まれていることがよくあります。これにより、最初からアクセシビリティを考慮したデザインを組み込みやすくなります。
通常は以下のような手順でデザインシステムが完成します。
最初に行うのは、すでにある要素をすべて集めて確認することです。現在使っているホームページやアプリの中から、ボタン、色づかい、文字の大きさや種類、図の印、画面の並び方などをすべて集め、一つの場所にまとめて見えるようにします。この段階では全てが統一されていないことに気づいても問題ありません。まず現状を把握することが大切です。
1で集めた内容をよく観察し、うまく使われているもの、ばらつきが目立つもの、利用者にとって分かりやすいかどうか、自分たちの会社やサービスの印象に合っているかなどを考えながら、残すもの、直すもの、やめるものを決めていきます。
デザインシステムをつくるには、必ずしも特別な高機能ソフトが必要なわけではありません。ただし、作業をスムーズに進めるために、いくつかの便利な道具（ソフトウェアやサービス）を使うと、設計や管理がぐっと楽になります。
実際には、チームの状況に合わせて複数の道具を組み合わせて使うことが一般的です。
① 図や画面の設計に使う道具（デザインツール）
Figma（フィグマ）
インターネット上で動作するため、複数人で同時に作業ができ、再利用できる部品やスタイルを作りやすい点が特徴です。現在多くのデザイナーに支持されています。
Sketch（スケッチ）
特にMacでの利用に強みがあり、使いやすい画面と豊富な追加機能（プラグイン）で知られています。
② 実際の部品を作り、確認するための道具（部品の開発・確認）
Storybook（ストーリーブック）
開発担当者の間で特に人気があります。画面部品（ボタンや入力欄など）をひとつひとつ独立して表示・確認できるため、作りながらすぐに見た目や動作をチェックできます。そのまま開発者向けの説明書としても使われます。
③ ルールや使い方をまとめる道具（文書作成・管理）
Zeroheight（ゼロハイト）
先ほど紹介したFigmaやSketchで作った部品をそのまま読み込んで、まわりに説明文を書き加えることができます。デザインと説明を一緒に管理したいときに便利です。
Notion（ノーション）
本来は情報整理やチーム共有のための道具ですが、多くのチームがデザインシステムの説明書としても活用しています。自由度が高く、読みやすく整理できます。
④ その他の便利な道具
Specify（スペシファイ）：色や文字のサイズなど「デザインの基本設定（デザイントークン）」を、設計から開発まで自動で同期するための道具。
Git（ギット）：コードを管理するために欠かせないしくみ。GitHubやGitLabなどが使われます。
結局、大切なのは道具より「進め方」
どの道具を使うかよりも、「どんな流れで進めるか」が成功のカギです。
チームの規模・予算・目的に合った道具を選び、「誰が、何を、どうやって使うのか」をきちんと決めることが、よいデザインシステムづくりの第一歩です。
「どんなデザインシステムを作ればいいのか、いまいちイメージがわかない…」
そんな時は、実際に公開されている他社のデザインシステムを見るのが近道です。
すべてを真似する必要はありませんが、どのように部品を整理しているか、どんなルールを書いているか、開発者やデザイナーがどう使うのか、といったヒントがたくさん見つかります。
以下は、特に有名なデザインシステムの一部です。まずは気になるものを覗いてみましょう。
■ Google Material Design（グーグル）
AndroidアプリやGoogleの各種サービスで使われている、有名なデザインシステムです。
洗練された見た目と柔らかい動き（アニメーション）が特徴で、色・形・間隔などがとても細かく決められています。全体として、シンプルで現代的な印象を保つことを重視しています。
■ Shopify Polaris（ショッピファイ）
ネット販売サービス「Shopify」が提供しているデザインシステムです。
販売者（ショップ運営者）が使いやすい画面を作ることに特化しており、実用的でわかりやすいガイドラインが整備されています。開発者とデザイナーが協力しやすいように、部品や文章の書き方が丁寧に設計されています。
■ IBM Carbon Design System（アイビーエム）
大規模な企業向け製品に対応するために作られた、非常に堅牢なデザインシステムです。
特に「誰にとっても使いやすくする＝アクセシビリティ」への配慮が行き届いており、開発チーム向けの説明も充実しています。
■ Atlassian Design System（アトラシアン）
「Jira」「Confluence」「Trello」などの業務用ソフトで知られるAtlassianのデザインシステムです。
複数の製品にわたって見た目や使い勝手をそろえることを目的にしており、ソフトが違っても「同じグループの製品」だと感じられるよう工夫されています。
参考事例を見ると得られること
どれも「ゼロから作られた」ものではなく、課題に対応しながら育てられてきた実例です。
自分たちのチームや部署で取り入れられそうな、よい事例が見つかりますように！
デザインシステムとは、本質的には、企業のホームページやアプリをつくる際に使う「再利用できるデザインパーツ」と「統一されたルール」を一つにまとめた、とても便利な道具箱のような存在です。
こうした仕組みがあると
初めのうちは準備や整備に時間がかかるかもしれませんが、それだけの価値があります。
手戻りが減り、混乱が少なくなり、結果として利用者にとっても使いやすい製品をつくることができるようになります。
「本気でよいオンライン体験をつくりたい」と考える企業やチームにとって、デザインシステムは非常に心強い味方になります。
デザインルールの設定、共通部品の作成、技術的な実装、運用ルールの整備──これらをすべて自社で行うのが難しい・・・そんな企業様に対し、Tokyo Techies では、こうしたデザインシステムの構築・運用を、技術面・デザイン面の両方からサポートしています。
「一貫性のある、使いやすいWeb・アプリを作りたい」とお考えの企業様は、ぜひお気軽にご相談ください。
