紙に何かを描いて、それを現実の世界で生き生きとさせることがどれほどクールだろうと思ったことはありませんか？これは、ボタンをクリックするだけで手書きの図面をホワイトボードからHTML Webサイトに変換できる、AIを利用したSkletch2CodeWebアプリでMicrosoftが達成したことです。
Sketch2Codeは、ウェブサイトの手描きのレイアウトをわずか数秒でHTMLに変換できます。このツールは、MicrosoftのComputer Vision AIサービスを使用して図面内のHTMLオブジェクトを検出し、テキスト認識を使用して図面内の手書きテキストを抽出し、画像内のすべてのデザイン要素のHTMLスニペットを結合して構築します。
これにより、Webデザイナーや開発者は、WebサイトのHTMLプロトタイプを数秒でさまざまなスタイルで作成することが非常に高速になります。これがバックエンドでどのように機能するかを知りたい場合は、MicrosoftのWebサイトでSketch2Codeに関する技術的な詳細を必ずお読みください。
以下は、Sketch2Codeを使用してWebサイトのレイアウト図を実際のHTMLページに変換するのがいかに簡単かを示す簡単なチュートリアルです。
まず、ホワイトボードまたは白いシートにWebサイトのレイアウトを描画します。次に、写真を撮り、コンピューターに保存します。その後、下のボタンをクリックして、ブラウザでSketch2CodeWebアプリを開きます。
Sketch2CodeWebアプリを起動します
Webサイトを開いたら、をクリックします。 デザインのアップロード ボタンをクリックして、ホワイトボードまたは白いシートに描いたWebサイトレイアウトの画像を選択します。
手描きのウェブサイトのデザインをアップロードした後、座って、Sketch2CodeがAIを使用して、アップロードした画像のレイアウトに基づいてHTMLページを自動的に生成するのを見てください。
プロセスが完了すると、新しく生成されたHTMLページのプレビューと、完全なコードをダウンロードするオプションが表示されます。クリックしてください HTMLコードをダウンロードする ボタンをクリックして、手描きのWebサイトレイアウトの.htmlファイルを取得し、Webブラウザでローカルにテストおよびプレビューできるようにします。
それでおしまい。 Sketch2Codeを使用すると、Webページレイアウトのプロトタイピングにかかる時間を節約できます。