Webページを作るのは主にWebデザイナーの役割ですが、毎回依頼するのではお互い時間がかかってしまいます。運用担当者でも定型であれば画面を作りたいと思うでしょう。そして、それがReact製のWebサービスだったりすれば、デザイナーからエンジニアへと、さらに時間を要するかも知れません。 そこで使ってみたいのがBlocks UIです。JSXベースのページビルダーです。

Blocks UIの使い方

エディタページです。左側が構造、中央がプレビュー、そして右側にコンポーネントが並びます。

要素をプロパティベースで編集できます。

テーマの変更も可能です。

各デバイスの画面幅ごとのプレビューもできます。

そしてコードをエクスポートできます。

Blocks UIで生成されるのはあくまでも静的なコードですが、それでもここでデザインしたものをエンジニアに渡すことで作業効率が大幅にアップしそうです。複雑な構造のUIであっても、ビジュアル的に設計できれば誰でも簡単に画面を作れるでしょう。

Blocks UIはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Blocks UI blocks/blocks: A JSX-based page builder for creating beautiful websites without writing code