ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2