渋谷コード塾のサイトはWebflowでできています。使ってみてわかったメリット・デメリットまとめ。

この記事を書いた人

Tomoya Shirai
株式会社スタック&ソリューションズ代表。「誰もが技術で問題解決できる社会」の実現を目指し、2017年に創業。現在、中野にある東京コンテンツインキュベーションセンターにて、学習管理ツールのUPACITYを始めとし、育成と採用を促進するプラットフォーム開発を行う現役バリバリのエンジニア。(略歴)

こんにちは、白井です。

さて、渋谷コード塾ではプロダクトを開発する能力を鍛え上げることを意図しており、その関連で「NoCode系」と呼ばれるサービスを意識的に試し始めました。
きっかけは以下の記事。

https://note.com/__shinji__/n/n4fc0052716e8

NoCode系とは、主にドラッグ&ドロップでWebサイトやアプリケーションができるというサービス群を指します。
上の記事ではメルカリのようなサイトを作っていますが、10年ほどこの業界にいる身としては、いよいよ来たかという感じ。
今後、確実にエンジニアの人材市場を脅かしてくる存在であり、動向に注目する必要があります。

とはいえ現段階では、エンジニアが実装するよりは手の届かないことが多いですし、アプリケーションを作るにはまだまだ黎明期という感があります。

「しかし、Webサイトのような単調なものを作るなら現段階でも十分に便利なのでは?」

と思い、Webflowというサービスを使って渋谷コード塾のサイトを作ってみました。
そんなわけで無事にサイトができたわけですが、今回はそんなNoCode系サービスを作ってみて感じたメリット、デメリットを共有します。

メリット

メリット1. 圧倒的な作業スピード。

私は非デザイナーなのでWebサイトを作ると「ここをもっとこうしたら良かった」となり、修正するというタスクが何回も発生します。
その場合、まずはDeveloperToolで要素を検証し、Styleを調整してデザインの反映を確認し、これだと思った変更を適応して本番に反映するんですが、これがなかなか手間でした。
一連の作業に、どんなに頑張っても数分かかります。

それがNoCode系だと、ドラッグ&ドロップとオーサリングツールのようなパラメータの微調整で終わります。

これ、作業がとんでもなく速い。おおよそ30秒程度で一連の作業が終わるので、時間を気にせず何度も調整ができます。
このサイト自体、4時間ほどで作りました。テンプレを使っても1日はかかる作業が4時間。これは通常のサイト制作の5-10倍のスピード感です。(体感比)

メリット2. 初心者でも簡単に高品質サイトが制作できる。

月並みな見出しですが、、、一般にWebデザインは「デザイナーが持っている引き出しの数」に比例すると言われます。

Webflowの場合は決まったコンポーネントから選んで組み込んでいく形なので、個人のスキル差が出づらい仕組みになっています。

もちろん、文字の大小や色合い、配置などは基本的なデザイン理論を知っておく必要があります。

しかし、Webflowでは知識がなくてもデザインテンプレートがあるので、ここから作ればそこそこの物が出来上がります。

(NoCode系というよりWebflowの良いところだな・・・)

メリット3.SEO対策が簡単

実は白井は20代の頃に何でも屋みたいなことをしていた関係でSEO対策がちょっとできます。
コストさえかければビッグキーワードでも1枚目に行くぐらいには可能。(まぁ言うだけなら自由だし・・)

そんな白井を毎回悩ませるのもSEO対策。なまじ知識があるので細かいところが気になってしまいます。
さらにWordpressとかだと、いくらでも拘れるのでキリがない。

対してNoCode系だと触れる項目が限られており、内部対策はある意味でサービス側に一任できます。
外部対策でも十分上位に表示はできるので、開き直ってコンテンツ作成に集中できると言うわけですね。

メリット4. 負荷対策を放置プレー

サイトを運営していると意外にわずらわしいのが負荷対策。
kusanagiなど、早いパッケージもありますが、それでも負荷対策を全く意識しないで良いと言うことはありません。

Nocode系ですと、ここもサービス側に一任できるので安心して放置できます。

デメリット

デメリット1. 学習コストが高い

いくら簡単とはいえ、慣れていればこそ。やはり他人様のサービスを使っている以上、操作方法などの学習コストはある程度覚悟しなければなりません。

特にWebflowの場合、ドラッグ&ドロップの挙動がおかしい時があります。

そう言う時はHTML/CSSの知識を動員し、内部の動きを推測して組んだりすると解決できるようになっていますが、初心者には敷居が高いかも。

一応チュートリアルっぽいものもありますが、不親切極まりない。と言うか機能が複雑すぎてチュートリアルではカバーできず、不親切にならざるを得ないんだと思います。

もし全くの初心者であれば、誰かできる人に教えてもらった方がいいかもしれません。

デメリット2. 細かい修正ができない

メリットでもあるのですが、細かい修正に手が届かないのはデメリットでもあります。

特にJavaScript周り。何かの設定をミスったのか本来動くはずのコンポーネントが動かない。

自分で作っている場合はサクッとdeveloperToolを開いてサクッと直すのですが、GUIだと直す手段がない。

これがWebサイトならちょっとデザインを変えれば良いだけですが、業務アプリケーションなら大問題でしょう。

デメリット3. 日本語入力がたまにバグる

NoCode系のサービスは主に海外で作られたものが多く、日本語入力のサポートが弱いのが欠点です。

Webflowでは一度入力した日本語がdeleteで消えず、状態を保存して画面をリロードしなければ直せないと言うことが多数発生しました。これは煩わしい。

サービスによってはそもそも日本語入力に対応していないものもあります。

これって結構大きなビジネスチャンスでは?

まとめ

結局、NoCode系のサービスを使うのは「単調でも良いからアプリケーションを量産したい」と言うニーズのあるユーザだと思います。

自由度を上げれば生産性が落ちる、自由度を下げれば生産性が上がる。自由度と生産性のトレードオフを実感しました。

こういった観点から、NoCode系のサービスはプロトタイプ制作や事業のBootstrapingに向いていると思いますし、お金をかけないWebマーケティングにも良いと思いました。

個人的な用途としては「Web制作にNoCode系を使うのは全然アリ」と言うのが結論です。

みなさんもこれを機に試してみてはいかがでしょうか?