非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

マウス操作だけでBootStrap4ページが作れる「Froala Design Blocks」がスゴイ!

   

「Froala Design Blocks」というWebサービスで、マウスのドラッグアンドドロップだけで、BootStrap4のWebページが作れてしまうとのことで、早速試してみました。

結論から先に言うと、ほんとにマウス操作だけでページが作れます。ただ、あくまでテンプレートの作成までで、ダウンロー後にHTMLの修正は必要になります。それでもだいぶ楽ですが。

Webサイトはこちらです。

 

下図がトップページです。「Build Webpage」というボタンを押しましょう。

[ad#top-1]

 

すると、こんなページが現れます。右側のブロックを、マウスで左の「Drag & Drop a Design Block」という部分に当てはめていきます。

 

こんな風にドラッグ・アンド・ドロップで当てはめることができます。

 

いろいろなパーツがあって、とりあえず以下のようなデザインにしてみました。

 

下部にあるボタンで各種デバイスごとの外観が見れます。下図はスマホページにした時の外観です。ちゃんとレスポンシブデザインに対応できています。

 

ページのレイアウトが完成したら、画面右下の「Download」ボタンを押します。

 

ダウンロードするためにはメールアドレスが必要になります。入力後、「Download」ボタンを押します。

 

「froala_design_blocks_website.html」というファイル名で保存されます。

 

ダウンロードしたファイルをブラウザで開くと、デザインした通りのページがちゃんと現れました。

 

Froala Design Blocksができるのはあくまでページのレイアウトのみで、細かいところはHTMLをいじる必要があります。エディタで開いて適宜修正する必要があります。まあ、ただ、一から作るよりはだいぶ楽かと。

 

 

[ad#ad-1]

スポンサーリンク

 - HTML/JavaScript, アプリ・サービスレビュー