ホワイトボードに描くだけでコードに変換されます。AI は UI デザイナーに取って代わるのでしょうか?

「新製品のホームページについてどう思いますか？」あなたは、UI、フロントエンド、マーケティング、運用の各部門との会議に参加しています。

「まずはイベントバナーを上に載せますか？」

「次に、異なる列にアイコンを追加します。2 行で十分です。」

「あそこに柱を立てるスペースがあるよ。」

「次回はユーザーメニューを追加するのを忘れないでください。」

…

同僚の提案を聞きながら、ホワイトボードにプロトタイプを描きます。「これに基づいて議論しましょう。時間がなくなってきました。UI デザインとフロントエンドの開発は後で必要です...」

「だいたいこんな感じですよね？」フロントエンド開発者の Xiao Ding があなたの言葉を遮りました。

Xiao Ding のコンピューターでは、おっしゃるとおり Web ページが動作しています。すべてのバナー、ボタン、ジャンプはクリックできます。すべてのテキストと画像は、表示されるべき場所に配置されています。サイドの HTML コードは簡潔で明確で、まるで製品がすでに作られているようです。

[[246240]]

どうやってそんなに早くできたんですか？

これらの開発者はすべて AI ですか?

まあ...そうかも知れません。

手描きブロック図、同期自動生成

Xiao Ding さんは以下の動画のような方法を採用しています。ホワイトボードの下書きをカメラがリアルタイムで撮影し、デザイン・開発された Web ページを自動的に生成することができます。

ビデオでは、製品マネージャーがホワイトボードにプロトタイプをスケッチしています。

コードと UI インターフェイスのプレビューが生成されている間、画面には認識プロセスが表示されます。

拡大された詳細により、認識プロセスが明確に示されます。

絵を描いていたプロダクトマネージャーが書くのをやめると、認識が完了し、コードがはっきりと見えるようになりました。

Web ページも生成され、通常の Web ページと同様に、自由にサイズを変更したり調整したりできます。

プロセス全体を通して、コンピューターはカメラを使用して、プロダクト マネージャーがホワイトボードに描いていたプロトタイプのドラフトをキャプチャし、同時に UI を「描画」し、コードを生成して、完成した Web ページを表示しました。

プロダクトマネージャーがバナーを描き、バナーが画面に表示されます。

製品マネージャーがサブ見出しにマークを付けると、サブ見出しが画面に表示されました。

製品マネージャーがテキスト領域を描画すると、画面にテキスト領域が表示されます。

各ステップで、マシンは製品マネージャーが描いたものを自動的に認識し、HTML コードを添付して対応する Web ページ スタイルに直接変換します。追加や削除はリアルタイムで追跡および更新できます。

[[246246]]

以前は、Web ページの外観を決定するために、製品マネージャー、UI、フロントエンド開発者、マーケティング担当者が集まり、コミュニケーションを取り、話し合い、議論し、N 個のプランを考え出し、N 個の会議を開催する必要があり、完了するまでに数日、場合によっては数週間もかかっていました。

ニーズの分析から始まり、プロダクトマネージャーがプロトタイプを作成し、全員が集まって×Nを修正します。

UI が設計図を描き、全員で集まって N 回修正します。

フロントエンドのコードが書かれ、みんなで確認してコミュニケーションをとる × N...

それだけでなく、想像力が乏しく、最終製品を見ないと問題点を見つけられない人もいます。そのような人は、製品、UI、フロントエンドを何度も作り直さなければなりません。

その結果、工期はどんどん延び、残業もどんどん遅れ、ヘアラインもどんどん高くなっていきます…

[[246247]]

このツールがあれば、ホワイトボードに描くだけで完成品がどのようなものになるのかをすぐに確認でき、計画を確定して一気に形にすることができます。また、UI やコードの改善にも直接使用できるため、デザイナーやフロントエンド開発者の労力を大幅に節約でき、1～2 週間の作業を 1～2 日に圧縮して効率を N 倍に高めることができます。

ヨーロッパからのteleportHQ

ドラフトで生成された Web ページのこのビデオは、LinkedIn と Twitter で話題になりました。ビデオに出てくる魔法のツールとは一体何でしょうか?

このツールは、ヨーロッパの 2 つの企業、Evo Forge と Corebuild が共同で作成し、欧州地域開発基金の資金提供を受けた teleportHQ というプロジェクトから生まれました。このプロジェクトにより、技術者以外の人でもビジュアル アプリケーションや Web ページを簡単に作成できるようになることを期待しています。

このプロジェクトは、サポート ベクター マシン (SVM)、ニューラル ネットワーク、XGBoost を通じて Web ページのセマンティック セグメンテーションを実現します。現在、React、React Native、Vue、HTML/CSS、AngularJS コードを生成できます。

Twitterの「衝撃スタイル」を誘発

正式な製品はまだ発売されていないが、多くのTwitterユーザーが衝撃を受けた。この動画に対する反応は以下の通り。

[[246250]]

それで：

[[246251]]

こんなのもあります:

[[246252]]

ネットユーザーたちは、これはまさに未来だと言っています。

「時々、これを見た時のように、未来を見たような気がする。」

「UI は時代遅れになる気がしますが、それでもこれはとてもクールです！」

しかし、他のデザイナーは、これによって多くの時間を節約できると考えています。

この技術の将来的な応用を想像した人もいます。

「2025年までに、すべてのスピーチはおそらく講演者によって手描きされ、その後AIによって自動的に生成されるようになるでしょう。」

しかし、リアルタイム同期は素晴らしいけれど、役に立たないのではないかと思う人もいます。

「ビデオは確かに素晴らしいですが、ビデオの中で最も強力なリアルタイム変換は最も役に立たないです。なぜすべてのステップをリアルタイムでコードに変換する必要があるのでしょうか？」

他の選択肢もあります

このクールな効果を見た後、あなたも自分のブレーンストーミング会議でそれを使用したいと思いませんか?

ただし、テレポートHQはまだ完全には開発されていません。このプロジェクトは、2017 年 8 月 16 日から 24 か月以内に課題を完了する必要があります。つまり、欧州の2社が成功すれば、おそらく来年の夏には発売されるだろう。

幸いなことに、他の企業も同様の製品を数多く開発しています。オープンソースの製品を見つけて試してみてください。隣の会社の UI は、あなたに驚愕するでしょう。

マイクロソフト スケッチ2コード

マイクロソフトは今年の夏、ユーザーがアップロードした手描きのインターフェース図面を HTML ページに変換できる Sketch2Code というプロジェクトをオープンソース化しました。

一般的な手順は次のとおりです。

「・ユーザーは自分の手描きスケッチを写真に撮ってアップロードします。

ビジョン モデルは、画像内に存在する HTML コンポーネントを検出し、その位置をマークします。

すべての部分の手書きテキストを認識します。

レイアウト アルゴリズムは、各コンポーネントの境界ボックス空間情報に基づいてグリッド構造を生成します。

· HTML 生成エンジンは上記の情報を使用して HTML コードを生成します。 ”

プロセス全体では、Microsoft カスタム ビジョン モデル、Microsoft コンピューター ビジョン サービス、および一連の Azure サービスを使用してそれらを接続します。

Uizard の pix2code

デンマークの企業 Uizard Technologies は、UI コンポーネントを認識してレンダリングを生成できる、同社がトレーニングした pix2code モデルを紹介する論文を発表しました。

このモデルのトレーニングには、約 3 つのステップが必要です。

まず、シーン (スクリーンショット) と UI コンポーネント (ボタン、テキスト領域など) を識別するためにコンピューター ビジョン技術が必要です。

次に、モデルはフロントエンド コードを学習し、文法的および意味的に正しいコード サンプルを生成する必要があります。

***、トレーニングの最初の 2 つの手順を繰り返します。

デモンストレーション効果はおそらく次のようになります。

pix2codeは商品化されており、製品名は社名と同じUizardと呼ばれています。現時点では、効果はかなり良いようです。ビデオのデモンストレーションによると、携帯電話でスキャンしてUIレンダリングを直接生成できるだけでなく、UIデザインソフトウェアに直接インポートして修正することもできます。

エアビーアンドビー

Airbnb には、手描きの Web ウィジェットを直接完成品に変換できる社内プロジェクトがあります。

彼らは、漢字のような何千もの複雑な手書き記号を機械が認識できるようになれば、Web UI でよく使われる 100 以上のコンポーネントを認識するのもさらに簡単になるだろうと考えています。

そこで彼らは、ホワイトボード上のスケッチからプロトタイプ コードとデザイン ファイルを自動的に生成できる 12 個の UI コンポーネントを使用してプロトタイプをトレーニングしました。

△ 左側が生成された効果

この技術は、Airbnb 製品の開発と設計に使用されています。

ポータル

テレポートHQ

https://teleporthq.io/

(2 つの技術ブログが含まれています)

Microsoft の Sketch2Code

https://github.com/Microsoft/ailab/tree/master/Sketch2Code

pix2code: GUI スクリーンショットからコードを生成する

トニー・ベルトラメリ、UIzard Technologies、デンマーク

論文: https://arxiv.org/abs/1705.07962

github: https://github.com/tonybeltramelli/pix2code

ウェブサイト: https://uizard.io/research/#pix2code

別の作者によって改良されたオープンソース プロジェクト: https://github.com/ashnkumar/sketch-code

Airbnb によるインターフェースのスケッチ

https://airbnb.design/sketching-interfaces/