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