コーディング作業は無しで、デスクトップ・スマホ向けのテンプレートをすぐに構築できる次世代ツール -GrapesJS

HTMLやCSSのコーディング作業は無しで、デスクトップ・スマホ向けのさまざまな種類のテンプレートをすぐ簡単に構築できるフレームワークを紹介します。
ランディングページはもちろんのこと、CMSにも使用できるように設計されており、オープンソースとして利用できます。

普通のページビルダーのように見えますが、実際にはより多くの機能を備えています。

サイトのキャプチャ

GrapesJS
GrapesJS -GitHub

GrapesJSの特徴

GrapesJSは、CMSもサポート

CMSもサポート

  • テンプレートを簡単に作成できる
    Webサイト、スマホアプリ、HTMLメールなど、HTMLベースのテンプレートを素早く簡単に作成できます。
  • レスポンシブ対応
    レイアウトのベースはFlexboxで、デスクトップ、タブレット、スマホに完全対応。
  • CMSをサポート
    動的テンプレートの作成をスピードアップするためにCMS内部で使用できるように設計されています。
  • HTML, CSSのコーディング作業は無し
    コーディング作業は一切無しで、テンプレートを作成できます。
  • ライセンス
    BSD 3-clauseで、OSSの中でも非常に緩いライセンスとなっています。
サイトのキャプチャ

デスクトップ、タブレット、スマホ、各サイズでの表示

GrapesJSのデモ

デモでは、Webページ用とHTMLメール用を試すことができます。

サイトのキャプチャ

デモ: Webページ

サイトのキャプチャ

デモ: HTMLメール

GrapesJSの使い方

GrapesJSは、下記からダウンロードできます。

オンラインのデモ版で、使い方を簡単に説明します。
デモ版ですが、デザインのカスタマイズからHTMLのコード生成まで対応しています。

サイトのキャプチャ

デモ: Webページ

上部のメニューでは、表示方法、エクスポート、インポート、やり直し、削除、ツールの切り替えが選択できます。

サイトのキャプチャ

デモ: Webページ

ツールとかどれ使えばいいのか分からないよ! という人でも大丈夫です。プレビューでカスタマイズしたい要素を選択すると、ツールが自動的に表示されます。

サイトのキャプチャ

デモ: Webページ

Flexboxなど、CSSの知識がなくても、簡単に利用できるのがこのツールのすごいところです。

サイトのキャプチャ

デモ: Webページ

上部のエクスポートを選択すると、HTMLとCSSのコードが生成されます。

サイトのキャプチャ

デモ: Webページ

sponsors

top of page

©2019 coliss