UIのデザインチェック作業を80%削減する自動化ツール「UI SCAN」。無料β版サービスの受付開始

株式会社BLUEは、UIのデザインチェックを自動化し「品質の向上」と「作業コスト削減」を同時に実現するサービス『UI SCAN』の無料β版サービスの受付を開始しました。UI SCANは高品質なUIの実装を誰もが可能にするツールです。従来の確認作業のコストを80%削減*し、エンジニア、デザイナー、ディレクターなどが抱えていたストレスも軽減します。
*当社でエンジニア、デザイナー、ディレクターが通常通りデザインチェックをした場合との比較
[画像1: https://prcdn.freetls.fastly.net/release_image/140874/2/140874-2-699d24a521d0efeffd31acbcd0293c49-1920x1080.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]

「デザインの実装が不完全なままリリースせざるを得ない状況を変えたい」UI SCAN 開発の背景
[画像2: https://prcdn.freetls.fastly.net/release_image/140874/2/140874-2-3f5326e4529c33ef9dc444ae6578cdf9-1920x1080.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]

開発プロセスにおいて、実装した画面とデザインの設計に違いがないかをひとつひとつ目視で確認する「デザインチェック」(UIテスト)は、必要不可欠な作業です。一方で、エンジニアにとっては面倒な作業だったり、確認を依頼することがストレスを感じたりする作業でもあり、ディレクター/デザイナーにとっても大変骨の折れる作業でもあります。

また、十分な時間とリソースをかけてデザインチェックを行っても、実装ミスを完全に解消したうえでリリースするのは極めて難しいのが現状です。デザインチェックは最後の工程になることが多いため、機能は直しても、“デザインの実装が不完全のままリリースをしてしまう”ケースは、あるあるではないでしょうか。

この現状を変えたいという思いから開発をしたのが『UI SCAN』です。デザインチェックを効率化することで、負荷を軽減しながら機能もデザインも品質が高い状態でサービスをリリースできます。
デザインチェックを自動化することで細かなミスも見逃さない「UI SCAN」
[画像3: https://prcdn.freetls.fastly.net/release_image/140874/2/140874-2-397ba583c3739893f5b237c726ffe087-1920x1080.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]

UI SCANは、デザインチェックを自動化することで、「品質の向上」と「作業コスト削減」を同時に実現します。

従来のデザインチェックは、デザイナーとエンジニアが何度も目視をして確認する作業に頼らざるを得ませんでした。デザイン変更があればその都度確認が必要なため、コストがかさむのが大きな課題でした。


独自の特許技術（第7386560号）を使って開発されたUI SCANは、この状況を一変します。当社でエンジニア、デザイナー、ディレクターが通常通りデザインチェックをした場合との比較では、確認作業のコストを80％削減できました。
[画像4: https://prcdn.freetls.fastly.net/release_image/140874/2/140874-2-eb938e9298668ff5f3a0af7e32cb3cf0-1920x1080.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]

UI SCANに取り込んだ開発中の画面のスクリーンショットを、自動でFigmaのデザインデータとマッチングを行います。また、色・大きさ・形状・太さ・余白など、あらゆる要素から徹底的に分析。デザインと実装された画面の違いが分かりやすく表示されるので、差異に簡単に気付けます。

UI SCANを導入することで、開発プロセス全体の生産性が飛躍的に向上します。UI SCANは、誰もが高品質なUIを実現できるよう支援する強力なツールです。
[画像5: https://prcdn.freetls.fastly.net/release_image/140874/2/140874-2-86b655d8ee0ecedcae91980cc2dea051-1920x1080.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]

UI SCANの主な機能
１.デザインデータのインポートが簡単
UI SCANは、世界中で広く使われているデザインツール「Figma」向けに専用プラグインを提供しており、Figmaからワンクリックでデザインデータを簡単に取り込めます。
２.開発中のスクリーンショットのインポートも簡単
・Webサイトのスクリーンショットを取得したい場合
UI SCAN専用のChromeエクステンションを利用すれば、簡単な操作で開発中のWebサイトのスクリーンショットを取得し、UI SCANにアップロードできます。

・iOS/Androidアプリのスクリーンショットを取得したい場合
アプリのスクリーンショットを取得したい場合は、UI SCAN専用のSDKを開発中のアプリに組み込むことで、アプリの各画面のスクリーンショットを簡単にアップロードできます。
３.デザインとスクリーンショットは自動的にマッチング
UI SCAN に取り込む「デザインデータ」と「スクリーンショット」は、独自の画像認識エンジンにより自動でマッチングされるため、手動で紐付ける手間はかかりません。
４.デザインと実装の差が一目瞭然
UI SCANでは、フォント、マージン、大きさ、色など様々なUIの差分が、分かりやすく可視化されます。デザインと実装でどこが異なっているのか、UI SCANの比較画面を見ればすぐに分かります。該当箇所を修正し、スキャンして結果を確認することを繰り返すことで、短時間でUIの品質を効果的に向上させることが可能です。
無料β版サービスのお申し込み方法
UI SCANの無料β版サービスはWebサイトよりお申込みいただけます。

Webサイト
https://ui-scan.com/

お申し込みいただいた方には、β版サービスの提供開始時に、招待コード*をメールにて送付いたします。β版サービスの提供開始は2024年6月中を予定しています。
β版サービスは、一定期間無料でご利用いただけます。

*招待コードは順次お送りいたします。
*無料でのサービス提供期間については、Webサイトなどで後日お知らせいたします。
*自動的に有償プランに切り替わることはありません。
参考）UIのバグを取り巻く現状の調査
[画像6: https://prcdn.freetls.fastly.net/release_image/140874/2/140874-2-b963998bead961f761ffe757bc551936-1920x1080.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]

BLUEが実施した、Webサイト開発、スマホアプリ開発に携わる429人を対象にした調査*では、「満足の行かないUIのままでリリースを迎えてしまうことがありますか？」という質問に対して、エンジニア・デザイナー・ディレクターの70％以上が「ある」と回答しました。
[画像7: https://prcdn.freetls.fastly.net/release_image/140874/2/140874-2-21b44bf90e06813935c3eee418fc5b12-1920x1080.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]

また、エンジニア・デザイナー・ディレクターの60～70％が「デザインチェックを心理的な負担に感じていている」と回答しました。

*調査概要
調査実施時期：2023年10月27日（金）～2023年10月31日（火）
調査手法：クロス・マーケティング モニターに対するインターネット調査
調査対象：全国の18歳~64歳、男女429名(有効回答数)
株式会社BLUEについて
株式会社BLUEは、「世の中のすべてのサービスをより美しく、より使いやすいものに」を掲げ、世界中の人たちから必要とされるUI/UXソリューションの提供を目指す企業です。BLUEは約20年にわたってUI/UX・開発に取り組んできたクリエイティブ・スタジオである「エクストーン」と、AIなどさまざまな最新技術を顧客価値に転換するスペシャリスト集団「KICONIA WORKS」が共同で設立した事業会社です。デザインチェックを自動化し「品質の向上」と「作業コスト削減」を同時に実現するサービス『UI SCAN』を開発・運営を行っています。
株式会社BLUEの会社概要
[表: https://prtimes.jp/data/corp/140874/table/2_1_077b2000f9f31e222d5363055ea8f66c.jpg ]
【本件に関するお問合せ先】
株式会社BLUE 広報担当：松本
電話　：[phone]
メール：[e-mail]

企業プレスリリース詳細へ
PR TIMESトップへ