プログラミングや動画編集の勉強ならCANIT (キャニット)

【ノーコード】Webflowの使い方、どこまでWEB開発ができるのか?

【ノーコード】WebflowでどこまでWEB開発ができるのか? ノーコード

これまでアプリ開発のノーコードツールについて解説してきました。そこで猫田さんは何かに気づいたようです……。

猫田さん
猫田さん

これだけノーコードツールが出回っているなら、WEBサイト制作にもノーコードツールある気がするんだけど……

CANIT先生
CANIT先生

……気づいてしまいましたか。では、今回はWEBサイト制作のためのノーコードツールWebflowを紹介しましょう。でも、今後もHTML/CSSの勉強は続けてくださいね

猫田さん
猫田さん

えっ

牛山くん
牛山くん

猫田さん……もしかしてコーディングから逃げようとしてませんか?

猫田さんは早くもコーディングから逃げようとしていますが、今回は非常に自由度の高いノーコードツールWebflowを紹介します。果たしてノーコードでどこまで作れるのか。キャニット先生が解説します。

初心者でも簡単にわかる:Webflowの基本

学生
CANIT先生
CANIT先生

まずは、Webflowがどんなものなのか解説しますね

①:Webflowとは

Webflowは、WEBサイトをコードを書かずに直感的に制作できるサービスです。会員登録をして、専用のブラウザ上で操作をしてWEB制作を行います。

操作はいたって簡単。ドラックアンドドロップで部品を配置していき、リンク先などの設定を設けていけばWEBサイトが作れてしまいます。ノーコードツールではあるものの自由度は高く、プロエンジニア並みのWEBサイト制作も可能です。

②:Webflowの料金

Webflowは、無料でサイト構築を始めることができます。しかし、これをネット上に公開するためにホスティング(サーバーを借りること)すると有料です。価格体系は公式HPで確認できますが、パッケージがいろいろあるので少し分かりづらいです。

牛山くん
牛山くん

たしかに、ちょっとわかりづらいですね

CANIT先生
CANIT先生

料金体系がわかりづらいのは、プランを2つ選ぶからです。サイトプランとアカウントプランの両方から1つずつプランを選択する形になっています

サイトプランとアカウントプランからそれぞれ選ぶ

まず大前提としてプランが2つあり、ユーザーは有償で使う場合、それぞれから1つ以上選択する必要があります。

サイトプラン

サイトプランは完成したサイトをホスティングする際に発生する料金と考えましょう。これは後述するアカウントプランとは異なり、作ったサイト1つ1つに適用していきます。サイトプランの料金は4つです。

サイトプラン
  • Basic(CMSを使用しないサイト)
  • CMS(CMSを使用してブログ機能などを搭載するサイト)
  • ビジネス(データ通信量が多いサイト)
  • エンタープライズ(企業向け)

Eコマース用のプランも選択することができます。Eコマース用のプランにはCMSを搭載したプランがあるため、サイトプランからCMSを選択する必要はありません。

牛山くん
牛山くん

CMSってなんですか?

CMSとはコンテンツ・マネジメント・システム(コンテンツ管理システム)の略称で、簡単にいえばHTMLなどのWeb専門知識がなくても、簡単にホームページの作成・更新・運営ができるシステムのことです。
アカウントプラン

次にアカウントプラントですが、スターター、ライト、プロの3つから選ぶ仕様となっています。

アカウントプラン
CANIT先生
CANIT先生

重要なところのみまとめました。アカウントプランはFreeでサイトを作り、サイトを公開する際に必要に応じたサイトプランを選ぶといいでしょう

  • Project:同時に作れるサイトの数。作ったサイト1つに先ほどのサイトプランで何らかのプランを適用してホスティングした場合、プロジェクト制限のカウントから外れます
  • Client building:Webflowの特徴として、発生する定期的な料金をWebflow側からクライアントへ請求することが可能というものがあります。全プランで使用が可能です
  • Project transfers:Webflowはアカウントをもつ他ユーザーにプロジェクトの転送が可能です。この機能によりクライアント側に無料プランアカウントを作ってもらえば、自分たちでも更新できます

③:Webflowを使うときの注意点

CANIT先生
CANIT先生

Webflowを使うにしてもHTML/CSSは知っておいたほうがいいですよ。paddingやmarginといった用語が設定画面に出てきますから。これらの用語を知らずにWEB制作するのは、けっこう大変です

牛山くん
牛山くん

あとは英語力が必要になりそうですね

猫田さん
猫田さん

よくわからないときは、Google翻訳だねー

Webflowで何ができる?

パソコン 男性
CANIT先生
CANIT先生

つぎに、Webflowでどんなものができるのか解説しますね

ひととおりのWEBサイト制作に対応

Webflowでできることを箇条書きで書き出すとこんな感じです。

  • テンプレートが豊富で今時のサイトを簡単に作れる
  • 動きのあるページを作れる
  • CMS管理(ブログ記事の投稿など)ができる
  • ECサイトも構築可能(決済サイトStripeに接続できる)

テンプレートを使ってどんなサイトが作れるかは公式HPで確認できます。

牛山くん
牛山くん

ランディングページ、コーポレートサイト、ECサイト、メディアサイト、ブログ……なんだかひととおり作れそうですね

猫田さん
猫田さん

デザインもかっこいいー

Webflowのメリット

パソコン 女性
CANIT先生
CANIT先生

では、できることがわかったところでWebflowのメリット面を考えてみましょう。

自由度が高い

牛山くん
牛山くん

キャニット先生、HTML/CSSの知識が必要ということは、裏を返せば自由度が高いってことになりませんか?

CANIT先生
CANIT先生

そうなんです。HTML/CSSを勉強してきた人にとってはうってつけのツールなんです

猫田さん
猫田さん

勉強してきたことは無駄じゃなかったってことかー

開発環境が必要ない

本来WEBサイトを作るためには、エディタを用意して作りやすいようにプラグインを導入して……といった作業が必要です。しかし、Webflowではこれらが不要です。

サーバーをレンタルする必要がない

WEBサイトを作ったあとは、サーバーをレンタルしなければなりません。しかし、Webflowを使えばこの作業も不要になります。

クライアント側で更新ができる

一般的なWEBサイト制作では、クライアントの側でも自由に更新したいときはWordpressなどのCMSに移行させる必要がありました。Webflowではこうした移行作業も不要となるので、クライアント側にもメリットがあります。

Webflowのデメリット

パソコン
CANIT先生
CANIT先生

次にWebflowのデメリットについて考えてみましょう

学習が必要

Webflow自体、機能が豊富なのでそれらを使いこなすにあたっては学習は必要となります。

英語が必要

猫田さん
猫田さん

これなんだよなぁ……

 
CANIT先生
CANIT先生

ノーコードツールは英語が中心ですので、やはり英語がわかったほうが良いですね

逆に少々の学習と英語以外にデメリットらしいデメリットがないのがWebflowの凄まじいところです。

Webflowでノーコード開発を始める方法

パソコン ふくろう
CANIT先生
CANIT先生

では、Webflowを用いたノーコードでの開発の始め方を、実際の画面に沿って解説しましょう

①:アカウント登録手順

まずは公式HPにアクセスします。

webflow

Sign up with email、もしくはSign up with Googleから登録を開始しましょう。

webflow
webflow
webflow

進めていくとどんな職業で、なんのために作るのか、そしてWEBサイトの習熟レベルについて聞かれますので答えましょう。

webflow

最後にどんなサイトを作るのかチェックして初期登録は完了です。

猫田さん
猫田さん

あっという間にWEBサイトの開発画面になった! これすごいね

牛山くん
牛山くん

すぐに作れる準備ができるのは開発意欲が湧きますね

②:Webflowのチュートリアルを利用しよう

webflow

開発画面に入ると、左上にチュートリアルを始めますか?という案内が出ます。チュートリアルは指示にしたがって操作していくだけのもので、だいたい5分〜10分程度で終わります。

チュートリアルを利用すれば基本的な操作方法が理解できますので、Getstartedをクリックしましょう。

webflow

あとは一つの動作ごとに案内が表示されるので、それにしたがってドラッグアンドドロップしたり文字を入力したりしていきます。

左側のパネルがボックスを用意したりするHTML的な役割、右側のパネルがボックスの大きさや文字の色などを決めるCSS的な役割を持っています。

webflow

右側のパネルをみると、MARGIN・BORDER・PADDINGとコーディング用語がガンガン出てきますね。

webflow

チュートリアルにはリンク先遷移の仕方やレスポンシブや仕方なども出てきます。HTML/CSSを一通り学習した人にとっては、え?こんな簡単でいいの?と驚くかもしれませんね。

webflow

テンプレートを選ぶ画面になるので、Blankではなく何かしらのサイトを選ぶと、どのように作られているか勉強になると思います。

Webflowの学習方法

パソコン 女性
牛山くん
牛山くん

学習するにはどのような方法がいいでしょうか?

CANIT先生
CANIT先生

Webflowは動画教材が充実しているのでそれを利用するといいでしょう。英語が苦手な猫田さんのために日本語のものを用意しましたよ

猫田さん
猫田さん

やったー!

Youtube

日本語で解説してくださっているチャンネルがあります。まずはこれを見てみるといいでしょう。

Udemy

大手動画教材サイトUdemyにも日本語の教材があります。こちらは30日以内であれば返品が可能です。

オンラインスクール

有料となりますが、Webflowの動画教材を出しているノーコードツールのスクールがあります。がっつり学びたい場合はこちらを利用するといいでしょう。

自由度の高いノーコードツールWebflow:まとめ

パソコン 女性
牛山くん
牛山くん

HTML/CSSの知識に加えて、ユーザーが使いやすいデザインにするための知識も今後は大事になってきそうですね

CANIT先生
CANIT先生

いい着眼点ですね。そもそもクライアントがWEBサイトを必要とするのは、WEBを通じて売上を増やしたい背景があるからです。デザインやマーケティングについて学んでみるのもいいでしょう

猫田さん
猫田さん

デザインやマーケティングを勉強すれば、がっぽり儲けられるかも!

Webflowには英語やコーディングの知識は要求されますが、その分幅広いWEBサイトをオシャレに作れることができます。実は、WebflowはCustomCodeという設定があり、コーディングをすることもできるんです。

コーディングによってさらに自由度の高いカスタマイズができます。ローコードツールとしても使えるWebflowにますます期待です。

❤内容は役に立ちましたか?皆さまのご意見が励みになります☺
YesNo
手に職をつけてプログラマー転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてプログラマーやエンジニアに転職したいなぁ。でも、プログラミングスクールってものすごくたくさんあるし、なんか敷居が高いのよね

これからプログラマーやエンジニアへの転身を目指すあなたに、どのスクールがもっとも適しているのかを紹介します。

ノーコード
【この記事を書いた人】
CANIT 先生

あらゆるプログラミング言語をあやつるフリーの凄腕講師。温和な性格で「わかるまで教えます」がモットー。たまに時間ができると動物の仲間達に、プログラミングを教えることもある。現在の生徒は牛山くんと猫田さん。

CANIT
タイトルとURLをコピーしました