webflow ノーコードできれいな webデザインのホームページ制作

2020年8月26日
2021年10月14日
Web制作
EC, クラウドサービス, web制作, webマーケティング, webサービス, 無料

Web制作

ノーコードローコードが 2019年後半に盛り上がりました。そして、いろいろなノーコードツールが脚光を浴びてきています。

私の作成した、ノーコードローコードの記事も、多くの方に、アクセスしてきてもらっているページになっています。

ノーコードローコードプログラミング知識なしでも、webサービスを作れる

Google 検索回数が徐々に増えてきている証拠だと思っています。

そんなノーコードローコードツールの中でも、比較的有名なツールが、 webflow です。歴史のあるツールなんです。そして、その名のとおり、 web をがんがん作れるノーコードツールです。

webflow について、今回は、まとめていきます！

1 webflow とは
2 webflow できること
3 webflow メリット
4 webflow デメリット
5 webflow 料金
6 webflow 利用方法
7 webflow クチコミをツイッターで探してみた
8 まとめ webflow を活用したビジネスモデルは成長する？
9 ◆CMS 関連記事

webflow とは

webflow 公式ホームページ
 https://webflow.com/

webflow とはホームページを提供されたパーツ、テンプレートを元に、ドラック＆ドロップで作れるサービスです。

簡単に解説すると、

webflow はエクセルやパワーポイント感覚で、webサイトを作れるツールなんです。

しかも、、ハイクオリティなwebデザインのサイトを構築できます。

しかも、、、簡単に。

まさに、プロのwebデザイナーが作ったようなかんじの出来上がりになります。なぜ、そんな高いクオリティのWebサイトができるのでしょうか？

この理由は3つあります。

デザインテンプレートが美しい
デザインパーツが、イマドキ
細かくカスタマイズができる

webflow 操作画面は、フォトショップや、ファイヤーワークス、イラストレーター、といったAdobeのデザイン系ツールのUIに近いです。

それゆえ、PhotoshopやIllustratorを使ったことのある人なら、直感的に操作も可能かもしれませんね。

また、それゆえに、webflowは、細かいデザイン調整が可能で、フォントの縁取りや、曲線の配置なども、簡単にできてしまいます。

また、コーディング実装の観点でも、アクションを簡単につけられます。

たとえば、

ページ読み込み時のアニメーション
パララックス表現

自動車メーカーの商品紹介サイトみたいなデザインも、さくさくできるわけです。

しかも、ドラック＆ドロップだけで！

ただ、細かい修正は、CSSの修正をしていくことも必要になるので、カスタマイズするスキルとしては、そういう修正のスキルもあると、便利ですね！

なお、webflowは、無料プランでなければ、データの吐き出しもできるので、自分でwebflowで、ホームページを作りました！それをエクスポートして、さくらインターネットなどのサーバにアップして、実際のホームページとしての公開も可能です。

webflowは、CMSの機能としての活躍もできるのがいいですね！

そして、最近では、ECサイトの機能も実装できるようになっています。

ECサイトもデザイン力が、勝負のサイトもあります。

誰だって、きれいなwebデザインは好きですからね。

webflow できること

ここは、さらっと！

webflow でできることをまとめていきます！

webデザイン
コーディング
HTML＆CSS＆画像の書き出し
CMS（コンテンツマネジメントシステム）としての構築
スマートフォン対応レスポンシブデザイン
ECサイト構築

本当に、こんなにも簡単にできるの！というくらい、さくさくできます。

webflow メリット

webflow メリットも、箇条書きでまとめていきますね。

制作時間の短縮
WFやモックが不要
SEO対策がしやすい
おしゃれなwebデザイン
動きのあるコーディングも簡単

というところでしょうか。

制作時間の短縮や、おしゃれなwebデザインは、いわずもがな、かもしれません。

WFやモックが不要！というのは、そもそも、直接webflowで作っていけば、パワーポイントや、エクセルで、webサイトの構成を作る必要がない、ということです。

webflow で、ホームページを作る過程が、ワイヤーフレームや、モックになるため、全体的な開発スピード短縮につながりますね。

SEO対策がしやすい理由は、HTMLだからです。

エクスポートしたHTMLを、少しカスタマイズすれば、SEO対策としてもやりやすくなります。プログラムファイルのように、分割されているわけではないので、非常にSEO対策としてのカスタマイズはしやすいです。

また、HTMLファイルなので、画像以外は軽くできるのも嬉しいですね。

webflow デメリット

さて、いいことばかり書いていても仕方ないので、webflow デメリットをいくつかあげていきます。

デザインを追及するとCSSの知識が必要
webflow 機能が豊富すぎて使いこなせない
日本語のサポートが弱い
海外のwebサービスなので、マニュアルがわかりにくい

この辺が、実際問題、デメリットかもしれませんね。

また、このwebflowを学習する過程で、フリープランで使い方を学ぶことはできるのですが、そのまま、自分のwebサーバにはあげられないので、何か障害があったときに気づきにくいのもあります。

ただ、これは、お金を払えばいいだけの話ですが。

ちなみに、日本語のページも作れるのは、webflow のいいところでもあります。

ただ、たまに、うまく動作しなくなることもあります。

webflow 料金

2020年8月13日現在で、webflow 料金は、

1ユーザーあたり　月額

無料プラン
16ドルライトプラン
35ドルプロプラン

の３つの料金形式があります。

このうち、16ドルと35ドルの違いは、webflow のロゴが付いてきてしまったりするところがあります。

35ドルのプランでは、ついてこないので、もし、ビジネスで使うなら、この35ドルのプランを使うべきだと思います。

なお、この35ドルのプランは、年間契約のときなので、月額だと42ドルになります。

ですが、日本円で5,000円程度です。

アドビのフォトショップなども、月額で5,000円程度。

同じくらいの金額感だと思えば、有り！かと思います。

webflow 利用方法

webflow 利用方法は、意外と簡単です。

まずは、フリープランに申込み
その後で、クレジットカードで決済
あとは、テンプレートを選択
そして、画面内で、文字修正や、ボタンを配置
リンクを張ったら、完成です。

具体的な Webflowの使い方であれば、以下の動画などが参考になります。

参考にしてくださいね。

webflow クチコミをツイッターで探してみた

webflowを日本国内で、どれだけ、利用している人がいるのでしょうか？

クチコミはあるのでしょうか。

ツイッターで、探してみましたが、結構、クチコミ、たくさんあります！！

日本語環境についてのクチコミも発見しました。

webflowの日本語入力がかなりマシになっている。以前は入力しても全部消えるなんてことがザラにあったのに、これのおかげで操作性が非常に快適に。Webflowに戻るべきか否か・・・
— TomoyShirai@中野のIT社長 (@shiraponsu) October 7, 2020

今更ながらWebFlow使ってみたけど、難しい
— edit login user kado (@yuuki_network) August 5, 2016

さっきのwebflow使ってみたけどさ、ソースきれい！そんなに作り込んでないからかもしれんが、muse
は糞コードしか吐き出さんかったならなー
— aok123 (@aok123_) July 9, 2018

webflowトレンドだから色々と調べてみたんですけど、なかなか良さそうですね。良さそうってのは実務で使ったわけではないので断言できないってことで。CSSの知識必要だからコーダーを食うって訳でも無さそうだし。
【webflow入門】ノーコードを初めて使ってみた | arutega https://t.co/30YqQjti8a
— TAK / Web Creator. (@tak_dcxi) June 4, 2020

#NoCode #noproblem #easyuse #takeuteasy in ⁦@japan⁩ thank you for ⁦@AdaloHQ⁩ and ⁦@webflow⁩ #nocode #radio #expect 誰でもエンジニア「ノーコード」ツール　記者が使ってみた：日本経済新聞 https://t.co/chGvWEZoo8
— satoshiyone2 (@satoshiyone2) July 22, 2020