【UiPath】アポロデザインについて学ぶ

はじめに

この投稿は、RPAツール「UiPath」のデザインシステム「アポロデザイン」についての記事です。

デザインシステムとは？

独自のデザインルールを整備し、統一されたユーザーエクスペリエンスを提供する企業が増えています。有名なものでは、Google の「マテリアルデザイン」や、Microsoft の「フルーエントデザイン」等があります。

UiPath も「アポロデザイン」と呼ばれる独自のガイドラインを2020年頃から整備していて、既に幾つかの製品で採用されています。

アポロデザインとは

アポロデザインは、アポロ11号の月面着陸50周年近くの2020年に「マテリアルデザイン」をベースに作成されました。当時「完全に自動化されたエンタープライズに」を目指して急速に製品ラインナップを増やしていたUiPathにとって、統一感のある一貫したエクスペリエンスを提供できるナビゲーションを提供するために、明確なデザインシステムが必要でした。

自動化ツールを提供するUiPathらしく

1）お客様の声に耳を傾ける、謙虚でよく研究されたアプローチで、使いやすさを向上させる
2）美しく、使用する喜びを持ちながら、未来をサポートし続けるモダンなデザインシステム
3）自動化ツールを目立たないように簡単に使用でき、作業を完了できるようにする

というテーマで作成されたアポロデザインは、その後、UiPath の製品に展開されていきます。

アポロデザインについての具体的な中身は公開されていませんが、「アイコン・文字組み、色、ボタンの配置、テーマ背景」などの定義がされているようです。

AutomationCloud／Orchestrator にみるアポロデザイン

アポロデザインで刷新されたSaaS版 Orchestrator を見ると、その製品ラインナップの統一感を感じられます。

目に付く左側の「製品パネル」ですが、AutomationCloud と同じものが、Orchestrator の画面にも追加されたようです。
AutomationCloudを「Home」として定義しながら「製品ラインナップ」を表し「製品間の行き来」も出来るようなデザイン配置です。

また、Studioで好評だったダークテーマもサポートされました。

右上のプルダウンでテナント切り替えも出来るようになり、テナントを複数管理している場合は非常に便利です。

TwitterやUiPathForumの反応を見ても「とてもいい」「簡素化されているのが好き」「眼鏡をかけているからダークテーマ嬉しい」「テナント変更で時間を大幅に節約できる」「本当にクール」と、新デザインは絶賛されています。

Style Guidelines

UiPathのホームページに「UiPath-brand-guidelines.pdf」というファイルがあり、デザインについての使用注意とともに、色やフォント等について記載されています。ここからも「アポロデザイン」の意向を読み取ることが出来ます。

ロゴはOrange・Black・LightGrayから構成されています。

色は「Orange」が Primaryで「Blue」が Secondaryです。

フォントは「Helvetica Neue（ヘルベチカ・ノイエ）」と「Source Sans Pro（ソース・サンズ・プロ）」です。Helvetica は欧文フォントの一つで、数多くの有名企業のロゴで利用されています。Windows にはデフォルトでインストールされていませんが、MacOS には標準搭載されています。ロゴに使用している日本企業では、Panasonic などが有名です。

背景画像は「UiPath」の「Ui」から「U」「I」「．」の3文字を切り出して使用されています。

Robot

UiPath のキャラクターロボット達です。見てみると、それぞれ名前がありました。これもなかなかいいデザインですよね。

Name	Image	Description
Receiving Robot		お皿とアンテナを介して情報を取得します。ソースは人間の入力またはデータシートのいずれかです。
Searching Robot		常に新しいタスクと作業を探しています。 虫眼鏡は、ロボットが細部に気を配り、正確に動作する様子を具体化しています。
Listening Robot		偉大なリスナー。マイクアームは情報に注意を払っており、目前のタスクを理解できるようになっています。
Flying Robot		どこにでも行き何でも出来るドローンのようなキャラクターは、あるタスクを迅速に実行して別のタスクに移動できること示しています。
Processing Robot		データを取得し正確に処理します。そのドームヘッドはディープラーニングを可能にし、そのホイールは、迅速かつ効率的な移動を可能にします。
Recorder Robot		コンピュータービジョン機能を具現化したそのレンズアイは、情報やデータを人間のように認識出来ることを示しています。

終わりに

いかがでしたでしょうか。

UiPathは「製品のUi デザインがキレイ」というのも強みの一つですが、アポロデザインで更に進化しています。今後の展開にも期待できます。

この記事が参考になったら、 LGTMをお願いします。閲覧ありがとうございました。