これまでアプリ開発のノーコードツールについて解説してきました。そこで猫田さんは何かに気づいたようです……。
これだけノーコードツールが出回っているなら、WEBサイト制作にもノーコードツールある気がするんだけど……
……気づいてしまいましたか。では、今回はWEBサイト制作のためのノーコードツールWebflowを紹介しましょう。でも、今後もHTML/CSSの勉強は続けてくださいね
えっ
猫田さん……もしかしてコーディングから逃げようとしてませんか？
猫田さんは早くもコーディングから逃げようとしていますが、今回は非常に自由度の高いノーコードツールWebflowを紹介します。果たしてノーコードでどこまで作れるのか。キャニット先生が解説します。
初心者でも簡単にわかる：Webflowの基本
まずは、Webflowがどんなものなのか解説しますね
①：Webflowとは
Webflowは、WEBサイトをコードを書かずに直感的に制作できるサービスです。会員登録をして、専用のブラウザ上で操作をしてWEB制作を行います。
操作はいたって簡単。ドラックアンドドロップで部品を配置していき、リンク先などの設定を設けていけばWEBサイトが作れてしまいます。ノーコードツールではあるものの自由度は高く、プロエンジニア並みのWEBサイト制作も可能です。
②：Webflowの料金
Webflowは、無料でサイト構築を始めることができます。しかし、これをネット上に公開するためにホスティング（サーバーを借りること）すると有料です。価格体系は公式HPで確認できますが、パッケージがいろいろあるので少し分かりづらいです。
たしかに、ちょっとわかりづらいですね
料金体系がわかりづらいのは、プランを2つ選ぶからです。サイトプランとアカウントプランの両方から1つずつプランを選択する形になっています
サイトプランとアカウントプランからそれぞれ選ぶ
まず大前提としてプランが２つあり、ユーザーは有償で使う場合、それぞれから１つ以上選択する必要があります。
サイトプラン
サイトプランは完成したサイトをホスティングする際に発生する料金と考えましょう。これは後述するアカウントプランとは異なり、作ったサイト１つ１つに適用していきます。サイトプランの料金は４つです。
- Basic（CMSを使用しないサイト）
- CMS（CMSを使用してブログ機能などを搭載するサイト）
- ビジネス（データ通信量が多いサイト）
- エンタープライズ（企業向け）
Eコマース用のプランも選択することができます。Eコマース用のプランにはCMSを搭載したプランがあるため、サイトプランからCMSを選択する必要はありません。
CMSってなんですか？
アカウントプラン
次にアカウントプラントですが、スターター、ライト、プロの３つから選ぶ仕様となっています。
重要なところのみまとめました。アカウントプランはFreeでサイトを作り、サイトを公開する際に必要に応じたサイトプランを選ぶといいでしょう
- Project：同時に作れるサイトの数。作ったサイト１つに先ほどのサイトプランで何らかのプランを適用してホスティングした場合、プロジェクト制限のカウントから外れます
- Client building：Webflowの特徴として、発生する定期的な料金をWebflow側からクライアントへ請求することが可能というものがあります。全プランで使用が可能です
- Project transfers：Webflowはアカウントをもつ他ユーザーにプロジェクトの転送が可能です。この機能によりクライアント側に無料プランアカウントを作ってもらえば、自分たちでも更新できます
③：Webflowを使うときの注意点
Webflowを使うにしてもHTML/CSSは知っておいたほうがいいですよ。paddingやmarginといった用語が設定画面に出てきますから。これらの用語を知らずにWEB制作するのは、けっこう大変です
あとは英語力が必要になりそうですね
よくわからないときは、Google翻訳だねー
Webflowで何ができる？
つぎに、Webflowでどんなものができるのか解説しますね
ひととおりのWEBサイト制作に対応
Webflowでできることを箇条書きで書き出すとこんな感じです。
- テンプレートが豊富で今時のサイトを簡単に作れる
- 動きのあるページを作れる
- CMS管理（ブログ記事の投稿など）ができる
- ECサイトも構築可能（決済サイトStripeに接続できる）
テンプレートを使ってどんなサイトが作れるかは公式HPで確認できます。
ランディングページ、コーポレートサイト、ECサイト、メディアサイト、ブログ……なんだかひととおり作れそうですね
デザインもかっこいいー
Webflowのメリット
では、できることがわかったところでWebflowのメリット面を考えてみましょう。
自由度が高い
キャニット先生、HTML/CSSの知識が必要ということは、裏を返せば自由度が高いってことになりませんか？
そうなんです。HTML/CSSを勉強してきた人にとってはうってつけのツールなんです
勉強してきたことは無駄じゃなかったってことかー
開発環境が必要ない
本来WEBサイトを作るためには、エディタを用意して作りやすいようにプラグインを導入して……といった作業が必要です。しかし、Webflowではこれらが不要です。
サーバーをレンタルする必要がない
WEBサイトを作ったあとは、サーバーをレンタルしなければなりません。しかし、Webflowを使えばこの作業も不要になります。
クライアント側で更新ができる
一般的なWEBサイト制作では、クライアントの側でも自由に更新したいときはWordpressなどのCMSに移行させる必要がありました。Webflowではこうした移行作業も不要となるので、クライアント側にもメリットがあります。
Webflowのデメリット
次にWebflowのデメリットについて考えてみましょう
学習が必要
Webflow自体、機能が豊富なのでそれらを使いこなすにあたっては学習は必要となります。
英語が必要
これなんだよなぁ……
ノーコードツールは英語が中心ですので、やはり英語がわかったほうが良いですね
逆に少々の学習と英語以外にデメリットらしいデメリットがないのがWebflowの凄まじいところです。
Webflowでノーコード開発を始める方法
では、Webflowを用いたノーコードでの開発の始め方を、実際の画面に沿って解説しましょう
①：アカウント登録手順
まずは公式HPにアクセスします。
Sign up with email、もしくはSign up with Googleから登録を開始しましょう。
進めていくとどんな職業で、なんのために作るのか、そしてWEBサイトの習熟レベルについて聞かれますので答えましょう。
最後にどんなサイトを作るのかチェックして初期登録は完了です。
あっという間にWEBサイトの開発画面になった！ これすごいね
すぐに作れる準備ができるのは開発意欲が湧きますね
②：Webflowのチュートリアルを利用しよう
開発画面に入ると、左上にチュートリアルを始めますか？という案内が出ます。チュートリアルは指示にしたがって操作していくだけのもので、だいたい５分〜１０分程度で終わります。
チュートリアルを利用すれば基本的な操作方法が理解できますので、Getstartedをクリックしましょう。
あとは一つの動作ごとに案内が表示されるので、それにしたがってドラッグアンドドロップしたり文字を入力したりしていきます。
左側のパネルがボックスを用意したりするHTML的な役割、右側のパネルがボックスの大きさや文字の色などを決めるCSS的な役割を持っています。
右側のパネルをみると、MARGIN・BORDER・PADDINGとコーディング用語がガンガン出てきますね。
チュートリアルにはリンク先遷移の仕方やレスポンシブや仕方なども出てきます。HTML/CSSを一通り学習した人にとっては、え？こんな簡単でいいの？と驚くかもしれませんね。
テンプレートを選ぶ画面になるので、Blankではなく何かしらのサイトを選ぶと、どのように作られているか勉強になると思います。
Webflowの学習方法
学習するにはどのような方法がいいでしょうか？
Webflowは動画教材が充実しているのでそれを利用するといいでしょう。英語が苦手な猫田さんのために日本語のものを用意しましたよ
やったー！
Youtube
日本語で解説してくださっているチャンネルがあります。まずはこれを見てみるといいでしょう。
Udemy
大手動画教材サイトUdemyにも日本語の教材があります。こちらは30日以内であれば返品が可能です。
オンラインスクール
有料となりますが、Webflowの動画教材を出しているノーコードツールのスクールがあります。がっつり学びたい場合はこちらを利用するといいでしょう。
自由度の高いノーコードツールWebflow：まとめ
HTML/CSSの知識に加えて、ユーザーが使いやすいデザインにするための知識も今後は大事になってきそうですね
いい着眼点ですね。そもそもクライアントがWEBサイトを必要とするのは、WEBを通じて売上を増やしたい背景があるからです。デザインやマーケティングについて学んでみるのもいいでしょう
デザインやマーケティングを勉強すれば、がっぽり儲けられるかも！
Webflowには英語やコーディングの知識は要求されますが、その分幅広いWEBサイトをオシャレに作れることができます。実は、WebflowはCustomCodeという設定があり、コーディングをすることもできるんです。
コーディングによってさらに自由度の高いカスタマイズができます。ローコードツールとしても使えるWebflowにますます期待です。