Webページを作る際に一からHTMLを作るのは大変です。開発者ですら大変なので、非開発者にとっては特に大変でしょう。Webサイトの運用は大抵開発者ではないので、運用担当者でも簡単にページを更新できる仕組みを作りましょう。 今回紹介するBuilder.ioはWebページをドラッグ&ドロップで作成できるコンポーネントです。

Builder.ioの使い方

デモです。左側にコンポーネントが並んでいます。

右側の画面でブロックを追加できます。

イメージブロックを追加しました。

スマートフォンサイズのプレビュー。

テキストの追加。

カラムやボタンを自由に配置できます。

Builder.ioはあらかじめ用意されたコンポーネントを追加して画面を作成します。できあがった画面はReactやGatsbyAngular、AMPなどに対応したコードを生成できます。この仕組みは様々なCMSやWebサイトで利用できそうです。

Builder.ioはTypeScript製のオープンソース・ソフトウェア（MIT License）です。

BuilderIO/builder: Drag and drop page building using your code components