netNews｜web広告、新サービスの解説

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

Web制作

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

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

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

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

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

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

目次

webflow とは

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

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

簡単に解説すると、

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

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

しかも、、、簡単に。

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

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

  1. デザインテンプレートが美しい
  2. デザインパーツが、イマドキ
  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 という ノーコードツール、いかがでしたでしょうか？

こんなにかっこいいwebデザインになるの？

という感想の方も多いかもですね。

結構いいかんじですよね。

ポートフォリオサイトなどを作るときもそうですが、コーポレートサイトを作るときなどにも、結構使えると思います。

まだ、日本では、利用例はすくなさそうですが。

渋谷コード塾のサイトは、webflowで作られているそうです。

渋谷コード塾
https://www.shibuya-codejuku.jp/

しかし、このツールで、マネタイズするなら、

ホームページの量産

というビジネスモデルが多いかもですね。

ただ、それで集客できるのだろうか？というのは、果てしなく疑問です。

むしろ、web制作の業務効率改善、といったところや、アウトソーシングコストの軽減といった部分でのマネタイズのほうが大きいかもです。あるいは、短時間で、広報的なページを作るときや、商品紹介サイトを作るときとかにもいいですよね。

webflow 設定代行のようなビジネスモデルですね。

まだまだ、可能性の大きなwebflow。

ノーコードツールが、日本で、活躍していく未来はまだまだあります！

Slack ビジネス 利用 で 最初 にしておきたい おすすめ 便利 設定 5

◆CMS 関連記事

ワードプレスのテーマなどは別途まとめます！

【国産】ブルーモンキー CMS BlueMonkey 評判 事例 費用 など 簡単 まとめ
https://saras-wati.net/web-make/about-bluemonkey-cms/

無料でホームページ作成 ペライチ 求人や採用ページ作成テンプレートを公開
https://saras-wati.net/news/peraichi-recruit-1908/

webflow ノーコード で きれいな webデザイン の ホームページ制作
https://saras-wati.net/web-make/webflow/

WordPress(ワードプレス)がホームページ制作で人気な理由とメリットを解説
https://saras-wati.net/web-make/wordpress-homepage-merit2001/

ノーコード 3分 webサイト制作 Landen とは アプリ開発 も 可能な webツール
https://saras-wati.net/web-make/landen/

Web制作の最新記事8件