びっくりするほど簡単!HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール
Post on:2018年4月20日
sponsors
さくっと短時間で、慣れれば1分! デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。
HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。

Froala Design Blocks
Froala Design Blocks -GitHub
Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。
作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。
短時間で、Bootstrap 4ベースのページを作成してみる
という訳で、作成してみました。
組み合わせに悩まなければ、1分でページを作成できます。
まずは、下記ページにアクセス!

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

好きなコンポーネントを組み合わせて、ページを作成
コンポーネントはすべてレスポンシブ対応で、左パネルの下部から各デバイスでの表示を確認できます。
組み合わせが終わったら、右下の「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