AIアフター設計サービス
「AISIA Design Recognition」デモサイト

AISIA Design Recognitionは、デザインを認識するという全く新しい発想のAIサービスです。よくある画像認識が人や犬、自転車、標識など3次元のオブジェクトとして認識するのに対し、このサービスは2次元の画像や平面図からデザイン(オブジェクトと位置情報)を認識します。貴社がお使いのアプリケーションで、どの程度認識精度が実現できるか、画面キャプチャーをアップして確認してみてください。


クリックして画像をアップロードしてください。 ※解像度3000x3000以内、JPEG, PNG, GIFのいずれかの画像形式を指定してください。
※アプリケーション画面には機密性の高い情報が含まれている場合がありますので、
 デモでお試しいただいた画像は一切当社では保持しません。安心してお試しください。
※デモでは試せませんが、製品版ではアクティブラーニング(追加学習)機能が用意されています。
 認識結果の誤りを人が修正することで、追加学習して認識精度がより高まる仕組みになっています。

認識精度が不十分だった場合は、次の2つを調整してみてください。

背景の指定とは?


画像の背景となる部分の色を決めるオプションです。背景が1色の場合は「背景色を指定」で指定して問題ありませんが、背景がグラデーションとなっている場合や、単色でも画像が荒い場合に認識結果が悪くなる場合もあります。その場合は「しきい値を指定」を設定し、基準となる濃さを1~255の範囲で指定します。


既定では「自動」になっています。自動の場合、できるだけ多くオブジェクトを検出できるようしきい値を自動調整しますが、余分に検出される場合は当オプションで調整してください。

背景が有色の場合に背景色を指定すると認識率が上がります。

領域結合の指定とは?


ラベルやラジオボタンなどの文字列系コントロールを検出する際の、各文字の離れている間隔を指定するオプションです。
例えば以下のようにラベルの文字間隔が離れていて2つのラベルとして認識されてしまった場合はこの数値を上げることで1つのラベルとして認識させることができます。


ただし、この数値を上げすぎてしまうと別々に認識させたいオブジェクトがくっついてしまう場合もあります。対象の画像により適宜調整してください。

文字列間に余白を設定。一つの文字列が分離された場合に大きくしてください。
 ピクセル以内の領域を結合する
画面キャプチャーがない場合は、下記のサンプル画像をクリックすることで試すこともできます。当社のアプリケーションから、OB(Object Browser)、OBPM(Object Browser PM)、WS(SI Web Shopping)の3製品。そしてWeb型ERPのGRANDIT、スマホアプリ「花の名前ダウト」、そしてExcelやWordで書かれた設計書をサンプルとして用意しています。
  認識する
 


AISIA Design Recognitionの利用シーン

通常のアプリケーション開発では、図1Aのように①SEが設計書を作成して、②プログラマがプログラミングして、③アプリケーション画面が出来上がります。しかし、最近はアジャイル開発が一般的になり、設計書がないままにシステムを作ることが増えています。
アジャイル開発は、イメージ通りのものが作れるというメリットは大きいのですが、完成した後で設計書がないためにメンテナンスコストが膨れ上がる問題があります。システムを開発した人がいなくなっていることも多いため、ちょっとした変更でも膨大なコストがかかってしまい、新規開発より運用保守の方にシステム投資が偏重している原因にもなっています。 この悩みを解決するために、図1Bのように①実際のアプリケーション画面から②画面デザインを認識して、③設計書をリバースする仕組みをAI技術を使って実現したものがAISIA Design Recognitionです。


図1:AISIA Design Recognitionの利用シーン



AISIA Design Recognitionの仕組み

このサービスは、図2のように①画面からオブジェクト(設計部品)を検出する、②部品の種類や文字、位置を認識する、③取得した情報をもとに設計データを生成する、という3つの連続した処理で実際の画面から設計データを逆生成します。

①オブジェクト(部品)検出
画面の中から部品(コントロール)を検出する処理です。一般に写真の中から人物や自動車、家などのオブジェクトを検出するAI画像認識は多く出回っていますが、画面内のコントロール部品を検出するという用途にはどのモデルも使えませんでした。そのため、独自にオブジェクト検出機能を作成して高い検出率を達成しています。  

②認識
・部品認識(コントロール種類判定)
検出したオブジェクトが「ラベル」なのか「テキストボックス」なのかという部品認識にはGoogle Tensorflowを採用し、CNN(畳み込みニューラルネットワーク)アルゴリズムを使っています。Web-ERP「GRANDIT」やObject Browserシリーズの画面で学習した「学習済モデル」も一緒に提供しますので、ユーザーは一から学習しなくてもすぐに利用できます。また、自社システムの画面を使って追加学習することもできるのでさらに認識精度を向上させることもできます。  

・文字認識
「ラベル」や「ボタン」、「テキストボックス」などに書かれている文字は、設計データとしても重要です。そのため、オブジェクトに含まれている文字をOCR(光学文字認識)により読み取っています。ここでも従来技術のOCRではなく、Google Cloud Vision APIによるAI技術を使ったOCRとしているため、英数字だけでなく日本語も高い文字認識率を達成しています。


図2:AISIA Design Recognitionの仕組み


・位置認識
設計データをもとに画面設計書を自動生成するためには、部品の位置や大きさの情報も必要です。そのためオブジェクト検出機能では、それらの必要な座標情報も一緒に読み取っています。  

③生成
抽出・判定した設計データは、外部で利用しやすいようにJSON形式(簡単に利用できる構造化されたデータ形式)で出力します。
アプリケーション画面は、一般にコントロールと呼ばれる部品で構成されています。部品には、値を入力する「テキストボックス」、説明文字の「ラベル」、選択につかう「ラジオボタン」や「チェックボックス」、押しボタン「ボタン」、画面を切り替える「タブ」、プルダウンで候補を表示する「リストボックス」などがあります。



SI Object Browser Designer(デザイナー)と連携し、設計書を後から作成できる

当社は、アプリケーションソフトウェアを設計するCAD(コンピュータを使った設計)ツール「SI Object Browser Designer」を販売しています。この製品は、「他の業界はみんなCADで設計しているのに、この業界だけ手作業で設計しているのはどう考えても変だ!」という想いで企画開発した製品です。これまでWordやExcelなどで手書きしていたソフトウェア設計書作成作業をCAD技術により効率化した画期的な設計ツールです。
昨今ではウォーターフォールからアジャイル、プロトタイプ型の開発にシフトし、「開発終盤で設計書を一気に作成する」 「要件定義はモックアップで進め、その後、設計書を作成する」等のケースが増えています。

AISIA Design Recognitionは、図2のように「SI Object Browser Designer」と連携してシームレスに実際の画面情報から 抽出した設計データを「SI Object Browser Designer」に取込むことができます。
その結果、「出来上がった画面から設計情報をリバースし、後から設計書を作る」という開発ができるようになりました。


アクティブラーニング

AIの認識結果が間違っている場合は、簡単な操作で正しいコントロール種類に変更できます。修正内容を学習データとして追加学習させるアクティブラーニング機能も用意されていますので、自社システム向けに少し利用するだけで認識精度を高めることができます。



画像認識中...
しばらくお待ちください