アプリやWebサイトの企画を行う際には、まず紙やホワイトボードに手書きのラフを作ると思います。入力欄なども大ざっぱに決めて、みんなで話し合うでしょう。最近ではラフを写真に撮って、アプリの導線を確認できるサービスもあります。 今回はさらにその一歩先、ラフデザインをHTMLにしてくれるSketch2Codeを紹介します。

Sketch2Codeの使い方

試してみたところ。日本語があったり、あまり細かいデザインだと再現が難しいようです。

できあがったHTMLはダウンロードできます。

サンプルより。これくらいのデザインなら精度の高い再現ができるようです。

Sketch2CodeはMicrosoftのAI技術を用いて手書きのラフスケッチをHTMLにしてくれます。フォームなどを組み合わせたデザインであれば十分に再現できるようです。これでHTMLコーダーが不要になるとは思いませんが、5年後にはこういった技術を使うのが当たり前になっているかも知れませんね。

Sketch2CodeはC#製のオープンソース・ソフトウェア(MIT License)です。

Sketch2Code - Transform sketches into HTML using AI ailab/Sketch2Code at master · Microsoft/ailab