Froala Design Blocksとは、Webページのパーツとなる「ブロック」を組み合わせていくことで手軽にWebページのベースとなるHTMLファイルを作ることができるサービスです。

そんなFroala Design Blocksですが、新バージョンが公開されたことにより使用できるブロックの種類が大幅に増え、作成可能なWebページの幅がさらに広がりました。

今回は、新しくなったFroala Design Blocksについてご紹介したいと思います。

Froala Design Blocksとは

Froala Design Blocksとは、パーツとなる「ブロック」を組み合わせることによって、Webサイトを作ることができるツールです。

Bootstrap4をベースにして作られており、レイアウトの調整が不要でレスポンシブにも対応していることが魅力のサービスです。

用意されているブロックの中から使用したいものを選んで組み合わせていくことで、あっという間にWebサイトのHTMLのベースとなるファイルを作ることができます。

HTMLファイルをダウンロードしたら、後は画像やテキストなどを編集していけば、1時間もかからずにWebサイトの基礎が完成してしまいます。

オンラインで利用できるページビルダー

Froala Design Blocksでは、オンラインでブロックを組み合わせていき、ダウンロードすることができるページビルダーが提供されています。

ページビルダーでWebページのデザインを作ったらファイルをダウンロードして、、テキストや画像など差し替えれば、後はサーバーにアップロードするだけでWebページ公開の準備が完了してしまいます。

どんなブロックが用意されているの?

Froala Design Blocksでは、様々な種類のブロックが用意されており、自身のWebページに必要な要素だけを組み合わせることによって最適なレイアウトのWebページを作ることができます。

下記に種類ごとのブロックをご紹介します。

CTA

ダウンロードや、問い合わせなどのアクションにつなげるためのブロックです。最近流行りの流体シェイプを使ったデザインのブロックもちらほら見かけられますね。

コンタクトフォーム

問い合わせフォームのためのブロックです。フロント側のデザインはブロックによって作ることができますが、裏側の処理は自分で作らなければならないのでご注意を。

コンテンツ

メインとなるコンテンツ紹介のためのブロックです。種類が豊富で、様々なデザインのブロックの中から好みのものを選ぶことができます。

特徴紹介

サービスや商品の特徴を紹介するためのブロックです。よく見かけられるデザインで、サービスについて分かりやすく伝えることができます。

フッター

Webサイトには欠かせないフッターのためのブロックです。暗めの色にすると、ページ全体が締まった印象に仕上がります。

フォーム

サインアップや、サブスクライブなど様々なフォームを作れるブロックです。こちらも同様に、裏側の処理は自分で作らなければなりません。

ヘッダー

メニュー等を表示するヘッダー要素です。配色は明るい色と暗い色の2種類から選べます。

料金プラン紹介

料金プランを紹介するためのブロックです。コンバージョンに大きく影響する所なので、慎重に選びましょう。

メンバー紹介

コーポレートサイトでよく見られるメンバー紹介のブロックです。メンバーが写真付きで紹介されていると、問い合わせなどの際に安心して問い合わせることができます。

お客様の声

利用している企業や、利用者のコメントなどを紹介するブロックです。利用者の声に信頼できる企業の名前などが上がっていると、サービスの格式も向上します。

完全オリジナルデザインのWebサイトを作りたい方は

Froalaのようにコードを書くことなく、時間をかけずにWebページを公開したいけどデザインはもっと凝りたいという場合は、STUDIOがおすすめです。

STUDIOは、ブラウザ上で動作するデザインツールを使ってページのデザインを作ったら、そのままWebサイトとして公開することができます。

HTMLやCSSの知識が必要ないので、初心者の方でも簡単にオリジナルデザインのホームページやWebサイトを公開することができます。

まとめ

ブロックを組み合わせるだけでWebページのレイアウトとデザインのほとんどを済ませてしまえるFroala Design Blocksは、新しいサービスのティザーサイトや、フリーランスの方のホームページなど、お金と時間をかけずにWebサイトを作りたいシーンではとても役立つでしょう。

Webサイトのテンプレートを提供しているサービスであれば他にも色々なものがありますが、Froala Design Blocksは、自分の必要なパーツだけを簡単に組み合わせることができるので、圧倒的に手間と時間がかかりません。

ぜひ、手軽に簡単なWebページを作りたい場合は使ってみてください。