Web開発用のオーサリングソフトウェアと言えばDreamweaverですが、価格や使いこなせないことを考えて購入まで至れない人は多いのではないでしょうか。それにWebブラウザ上でデザインした方がレンダリングエンジンによる差異に悩むこともありません。 そこで使ってみたいのがGrapesJSです。Webブラウザ上で動作するオーサリング、テンプレートエディタです。

GrapesJSの使い方

GrapesJSのメイン画面です。普通にオーサリングツールとして使えますね。

文字の装飾は太字、イタリック、下線くらいですが、細かい設定はプロパティを使って行えます。

大きさやマージンなどはプロパティとして編集します。

フォントの種類やサイズも変更できます。

DOMを追加してグリッドの設計も可能です。

最終的にできあがったHTMLとCSSです。

GrapesJSを使えば開発者であっても手軽にUIの調整ができるようになりそうです。機能的にオーサリングツールとして十分とは言えませんが、コーディングも不要なのでユーザに自分で最後の調整を行ってもらうのにも良さそうです。

GrapesJSはHTML5/JavaScript製のオープンソース・ソフトウェア（BSD License）です。

GrapesJS GrapesJS Demo artf/grapesjs: Free and Open source Web Template Editor. Next generation tool for building templates without coding