[Froala Design Blocks ]無料でオシャレなサイト作成ができるHTMLのテンプレート

こんにちは,ちゆりです。

店長
うちのお店のサイトを作成したい。でも,1から作成するのは手間がかかるんだよなぁ。テンプレートみたいなのがあったらなぁ。
駆け出しエンジニア
ホームページ(自サイト)を作ってみたい!!だけど,何から始めたらいいのか分からないや。

たしかに,今の時代なんでも1から作成するのは面倒だし,時間の無駄。
というわけで今回は自分好みでHTML(もちろんCSSも)のテンプレートを作成できる
「Froala Design Blocks」を紹介させてほしい。

オシャレなHTML/CSSのテンプレート

「Froala Design Blocks」は自分好みでテンプレートを作成できます。
しかもオシャレ。シンプル。

テンプレートを作成できるとは??実際に使ってみたほうが早いでしょうね。

まずは,Froala Design BlocksのURLを貼っておきます。

Froala Design Blocks

Froala Design Blocksホーム画面
Froala Design Blocks

様々なUIのパーツがテンプレートとしてあるので,それらを組み合わせていくとオリジナルのサイトを作成することができます。非常に簡単です。

テンプレートの種類は目的ごとにまとめられています。

ざっと紹介...
Call to action: ユーザーに操作を促すときに最適
Contacts: 電話番号,E-mail等ユーザー情報を入力させるフォーム
Contents: 主となる情報を載せる場合
Features: 比較したり,特徴を記載するのに最適
Footers: おしゃれなフッター
Forms: ログインや会員登録のフォーム
Headers: おしゃれなヘッダー
Pricings: サービス(商品)の価格を扱いたいとき
Teams: メンバーとか人物の紹介(もちろん商品とかもOK)
Testimonials: 紹介文を記載するのに最適

これらのテンプレートから好きなパーツを組み合わせてオリジナルなサイト(ホームページ)のテンプレートを作成できるんです。

まずは,習うより慣れろということでさっそく触っていきましょう。

テンプレートの作成

テンプレートを作成する場合は右上のBuilderから

Froala Design Blocks テンプレート作成

 

ドラッグ&ドロップでUIパーツを自由に組み合わせてテンプレートを作成できます。非常に簡単で,素人でもわかりやすい。

Froala Design Blocks テンプレート作成2

とりあえず無難にヘッダーから1つ,コンタクトフォームから1つ,フッターから1つずつパーツを組み合わせ,それっぽいサイトのテンプレートを作成してみました。

パーツを組み合わせたら右下のダウンロード(Download)からソースをダウンロードします。

ダウンロードされた.htmlファイルを開くと作成したテンプレートのままのページが表示されると思います。
BootStrapを使っており,.htmlファイルだけで装飾(CSS)までされているので,別途CSSを準備しなくても良い点が楽ですね。

ちなみに僕がUIパーツを並べて作成したテンプレートがこちらです。
う〜ん!オッシャレー!! っぽい感が出てますね。

Froala Design Blocks テンプレート

約15秒でテンプレートまで作成完了です。
1から作るよりもテンプレートを使ったほうが断然効率が良いですね。

HTMLの編集

しかし,このまま使っちゃうのはテンプレ感バレバレですから,サイトのカスタマイズはhtmlの知識が必要となります。

Bootstrapの知識もあると尚良しですね。

さて,僕がこのテンプレートを僕なりに編集してみました。

テーマは「アルバイト募集」ページです。

Froala Design Blocks テンプレート編集

なんと作業時間わずか5分でテンプレートを流用した,それっぽいサイトの出来上がりです。

これを1から作ったら5分で完成なんて出来ませんよ。
さすが,「Froala Design Blocks 」

サイトを外部に公開するには,ドメインの取得,サーバーの準備等が必要になりますが,まずは,お試しで作って外部公開したい!!って方におすすめがHerokuですね。

Herokuを使えば,ドメインやサーバーの準備が必要ないです。誰でも簡単にサイトを公開できます。本番環境に向けてサイトを作成していきたいのであれば使うことをおすすめ致します。

Herokuの始め方はこちらの記事を参考に

PaasサービスとしてHerokuを使ってみる。

2019年4月28日

5分くらいで簡単に導入できます。

レスポンシブデザイン

Froala Design Blocksで作成したテンプレートはなんとレスポンシブ対応
作成したサイトはパソコンでもスマホでも対応しています。
なんて素晴らしいのだ。

僕はHTMLは一通りかけるのですが,レスポンシブに対応させるのは苦手。というか時間がかかります。。
これをテンプレートで補えるのは非常に助かります。

HTML/CSSコードとしてダウンロード

いちいちテンプレートをドラッグ&ドロップして作成して,それをコードにしてダウンロードをするというのが手間になるという方は,テンプレート一式をまるごとダウンロードできますので,ローカル環境に落としてから,パーツを切り貼りしてサイトを作成するというのも良い手です。

テンプレートパーツの一式ダウンロード方法は

①右上のダウンロード(Download)から
②Zipでダウンロード

Froala Design Blocks ソースダウンロード

CSSとImageファイルも別構成でダウンロードされるので適宜編集して,より詳細なカスタマイズが可能になります。

最後に

Froala Design Blocksはこんな人におすすめ。

  1. サイトを作成したい。しかし具体的なイメージが沸かない人。
  2. 駆け出しエンジニア。HTML,CSSを勉強したい人。
    まずは,テンプレートのHTML・CSSソースからボックスの色を変えてみることからスタートしてみてもカスタマイズの楽しさを感じられると思いますね。
  3. Boot Strapとはなんぞや。実は勉強してみたい..な人
    Froala Design BlocksはBootStrapベースで作られているから,BootStrapの知識があれば取っ付きやすいです。
    (実は,僕もこれを機にBootStrapを学びました。)

次回は,作成したHTMLを外部に公開する手順を紹介します。
もちろん無料でできます。

僕の大好きなPaasサービスのHerokuを扱うと簡単に外部公開できますので,お楽しみに

ありがとう

★人気の記事一覧

合法的に女の子に精液の匂いを嗅がせる方法

【精子を食べる!?】食ザーが理にかなっているというお話

[Froala Design Blocks ]無料でオシャレなサイト作成ができるHTMLのテンプレート

スムージーは本当に健康に効果があるのか化学の観点でのみ考えてみる












★人気の記事一覧

合法的に女の子に精液の匂いを嗅がせる方法

【精子を食べる!?】食ザーが理にかなっているというお話

[Froala Design Blocks ]無料でオシャレなサイト作成ができるHTMLのテンプレート

スムージーは本当に健康に効果があるのか化学の観点でのみ考えてみる

気に入ったらLet's Share!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

ちゆり

6年間化学を専攻していたのになぜか一部上場のIT企業のエンジニアへ。脱サラ田舎暮らしに憧れ,なんだかんだプログラミングが好き。口癖は仕事辞めたい。凡人にはなりたくない凡人。