びっくりするほど簡単!HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール

さくっと短時間で、慣れれば1分! デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。

HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。

サイトのキャプチャ

Froala Design Blocks
Froala Design Blocks -GitHub

Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。
作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。

短時間で、Bootstrap 4ベースのページを作成してみる

という訳で、作成してみました。
組み合わせに悩まなければ、1分でページを作成できます。

まずは、下記ページにアクセス!

サイトのキャプチャ

Froala Webページ ビルダー

右パネルにはヘッダ・フッタ・コンテンツ・フォームなどのコンポーネントがあり、左パネルにドラッグ&ドロップして、ページを組み立てます。

サイトのキャプチャ

好きなコンポーネントを組み合わせて、ページを作成

コンポーネントはすべてレスポンシブ対応で、左パネルの下部から各デバイスでの表示を確認できます。

組み合わせが終わったら、右下の「Download」をクリック!

サイトのキャプチャ

終わったら、ダウンロード

ファイルをダウンロードするには、メールアドレスが必要です。

サイトのキャプチャ

ダウンロードページ

ダウンロードしたファイルをブラウザで表示してみました。
組み合わせた通りのデザインです。

サイトのキャプチャ

ダウンロードしたHTMLファイルを表示

テキストや画像などはダミーなので、自分で使用するテキストや画像に変更して、ご利用ください。
対応ブラウザは、下記の通り。

  • IE 10+
  • Edge 14+
  • Chrome
  • Firefox
  • Opera
  • Safari 6+
  • Safari iOS 7.0+
  • Android 6.0+

用意されているコンポーネント

Froala Design Blocksでは、170種類以上のレスポンシブ対応のコンポーネントが用意されています。
これらを自由に組み合わせて、利用できます。

用意されているコンポーネント

コンポーネント一覧: Header

用意されているコンポーネント

コンポーネント一覧: Footer

用意されているコンポーネント

コンポーネント一覧: Call to Action

用意されているコンポーネント

コンポーネント一覧: Contacts

用意されているコンポーネント

コンポーネント一覧: Contents

用意されているコンポーネント

コンポーネント一覧: Features

用意されているコンポーネント

コンポーネント一覧: Forms

用意されているコンポーネント

コンポーネント一覧: Pricings

用意されているコンポーネント

コンポーネント一覧: Teams

用意されているコンポーネント

コンポーネント一覧: Testimonials

sponsors

top of page

©2024 coliss