先日弊社のお客様のコーポレートサイトのリニューアルを担当させていただきました。
その際に以前から関心のあったノーコードツールのwebflowで実装を行うことにしました。
ソフトウェアエンジニアである私がwebflowを使用することで感じたことなどをまとめたいと思います。
webflowを知るきっかけ
私自身、プログラムのコーディングは得意ですがHTML/CSSは苦手です。
既に誰かがコーディングされたものを変更したり調整したりすることはできるのですが、何も無い状態からWEBページを作成することができないのです。
（SNSなんか見ているとITエンジニアの方がCSSは難しいと発言していることをよく目にします）
しかしWEB関係の仕事をしているとHTML/CSSの知識って非常に重要だったりするので無視する訳にはいきません。
今まではHTML/CSSのコーディングは外部に委託していたのですが、システムという動的なものを考慮していないコーディングがなされてた場合、
手直しが結構大変です。
例えば入力フォームでテキストボックスがレスポンシブ表示の時は別のIDのテキストボックスが使用されていたりとか。
ですので設計段階で私の方でHTML/CSSを作成できればそのような手直しが無くなると思い、
苦手な私でもHTML/CSSコーディングできるようなツールは無いかと探してた時にtwitterでwebflowのキーワードを見つけました。
そこから深堀りしていくとアメリカ産のプラットフォームで2013年から展開しているサービスだということがわかりました。
試しに使ってみて
早速、無料アカウント登録して使ってみました。最初の印象は「すごい機能が多い」というUIで、
しかもすべて英語表示なのでこれは操作を覚えるのは大変だな と思い習得するのを諦めかけました。。。
でも搭載されている機能としてはまさに私が求めていたそのものだったので何とか使えるようになりたいとも思っていました。
まだ日本ではメジャーではないノーコードツールの１つなので日本語の情報がとにかく少なく、取っ掛かりをつかむのに苦労した覚えがあります。
そこで目から鱗の教材を見つけます。
Likepay Academyとの出会い
毎日webflowの情報を検索しているとwebflow専門のオンラインスクールがあることがわかりました。
それがLikepay AcademyというスクールでBasic・Standard・Proの３種類のプランがあるとのことでした。
興味はありましたが有料プランで入学することに躊躇していましたがなんと入門編の動画教材が5,500円で販売されているではないですか！https://academy.likepay.dev/courses/webflow-basics
これは即購入して早速視聴しました。
基本的な操作とwebflowの主要機能を日本語で理解しやすく説明されています。
英語ばかりの情報で心が折れそうだった私にとって目から鱗でした。
迷うことなくPro会員で入学しました。入学後に知りましたがPro会員で視聴できる動画教材の数が100本以上と多いです。
webflowだけのネタでここまで動画作成できるのが凄いなと思いますがそれだけ奥が深いツールなのだと思います。
実践で感じたこと
上記のLikepay Academyでの学習、既存サイトの模写、自社サイト、お客様サイトの作成を行いwebflowの一通りの操作、
クセや特徴などが分かるようになってきました。以下は私がwebflowで感じたことです。
- ノーコードツールとは言ってもhtml/cssの知識はあった方が断然良い
webflowと同類の国産のノーコードツールのstudioは割と自由レイアウトで作成できて本当に誰でも簡単にWEB制作が可能という印象がありますが、
webflowのUIは専門的な文言表示やプロパティ設定が多いためHTML/CSSを全く知らない方からすると難しいと感じるかもしれません。
またwebflowでは意図的に出力タグの種類を選択ができますので検索エンジンにコンテンツを認識されやすい作り方というのも任意で作ることができます。
そのためにもやはりHTML/CSSの知識を持っていた方が有利だと思いました。
- javascriptが得意な人であればwebflowの制限を超えることができる
webflowには組み込みコードの実装ができます。
これはwebflowで作成されたページに任意のコードを組み込んで実行させることができる機能なのですがこれが出来ることで
プラットフォームでの制限を超えた機能を実装することができます。
javascriptが得意な人がwebflowを使用すると鬼が金棒を持ったような無双状態になれるのではと思ったりもします。
- Wordpressに比べて安定感・安心感がある
Wordpressは構築が簡単で自由度が高いＣＭＳですがセキュリティホールが見つけられやすく、
記事数が増えるといきなりパフォーマンスが低下することがあります。
またほとんどのサイトがプラグインを用いていると思いますが、プラグインはWPのバージョンに依存するものも多く、
またサポート切れのプラグインを使用せざるを得ない状況も良くあるかと思います。
webflowでは上記の不安点がプラットフォーム側でカバーされているので運用面で安心できます。
- 日本語入力の罠
日本語入力に最適化されていないためか、テキスト入力する際に文字入力できなかったり、
ランダムな文字列が２０文字ほど勝手に入力されたりすることが頻繁に発生します。
一度この状態になると正常な状態に戻ることはほぼ無く、一度プロジェクトを終了して再度開いてから入力することになります。
（これを私の中では罠にはまったと言っています）
日本でもっとユーザーが増えていけばこの不具合も解消されるかもしれません。
- たまにバグるUI
上記の日本語入力の不具合に似たようなもので、使用していると設定した内容が反映されなかったり、
プレビュー表示がおかしかったりすることがあります。それでもプロジェクトを閉じて再度開くと直ってたりします。
これだけ多機能なUIであれば入力パターンによっては不具合起きるかなと思ってたりします。
- 最速実装のポテンシャル
人によって多少差はあるかと思いますが、HTML/CSSコーディングする作業量に比べて５分の１ほどまで抑えることができるかと思います。
コストも工数も抑えることができますので、その分ディレクションやデザインに重みを置くことができるのは
良いWEBサイトを制作する上でとても価値のあることだと思います。
- 自動化ツールとの連携
クラウドツールの良さとして他のツールとの連携が多彩であるのは1つの魅力だと思います。
webflowでもzapierやintegromatなどの自動化ツールで様々な機能が実装できてポータルサイトなんかの作成も出来たりします。
とても魅力的ではあるのですが、多用すると他ツールへの依存度が高くなり今後のマイグレーションなんかに影響するのではないかと考えてしまいます。
（ビビりなので・・・）
もし外部ツールと連携するのであれば、「連携するツールが利用できなくなった場合のリカバリ、代替案を考えておく」、
「ユーザーにリスクを理解していただいた上で使用する」ことが必要かなと思います。
まとめ
ノーコードに関心を持って最初に実務で使用したのがwebflowでしたがかなりその恩恵を感じています。
今まで自分ではできなかったことが出来るようになったり、web制作のお仕事も出来る体制も作れたりできました。
控えめに言っても優秀なツールだと思います。
またwebflowは常に何かしらのバージョンアップが行われていますし、今後さらに使いやすい機能が追加されることが期待できます。
日本語入力の罠は早めに何とかしてほしいですが。。。
