皆さんはWebサイトの制作に時間や労力などのコストをかけすぎていませんか？そんな時は、コード書かずに簡単に構築できるノーコードツールの一つである「Webflow」が非常に役立ちます。
今回はタイトルにもある通り、「Webflow」がいかに最強かを示す記事になるのではないかと思います。どうぞ最後までお付き合いください。
個人のデザイナーさんチャンスです
Webサイトを構築していくためには、HTML, CSSなどのフロント言語やデザイン分野の知識が必須になってくると思います。
多くの学習をこなして、やっと初めてよりデザイン面が洗練されたWebサイト制作の案件がこなせるようになると思われがちですが、今の時代はそんなにコストをかけなくても良い時代が既にやって来ています。
ノーコードツールの「Webflow」を使えばコードを書かずに比較的容易にデザインが整ったWebサイトを構築できるようになります。
よって、特にコードは書きたくないが、個人で高速に案件をこなしたい、または自ら運用したいと考えるデザイナーさん及びWebサイトを構築したい人に、非常に有益な記事になっていると思います。
そもそもノーコードとは？
「ノーコードとは何！？」と疑問に思う方もいると思うので、前提知識として、「ノーコード 」について軽く説明していきます。
「ノーコード(NoCode)」とは、一言で言えば、ソースコードを書かずにWebサイト/アプリを開発するための開発手法及びそのツールのことを指します。
前述したように、基本的に開発の過程でソースコードを書く必要が全くないことから「ノーコード」と呼ばれています。
ノーコード開発ツールの最大の特徴は、あらかじめ用意されたパーツを画面上にドラッグ＆ドロップするだけで、エンジニアではない人でも簡単にアプリケーションを構築できることです。
ノーコードのメリット
NoCodeを使って開発を行うことで、より短期間で低コストでWeb/スマートフォンアプリを開発することができます。
実際、アプリ開発会社に開発を依頼した場合、3ヶ月～6ヶ月かかることが多いです。しかし、NoCodeの開発ツールを使えば、わずか2週間でアプリが完成するケースもあります。また、開発工数の削減は、大幅なコスト削減にもつながります。
このようなメリットを考えると、NoCode開発は、新規事業開発やMVP(Minimum Viable Product)設計における仮説検証に適した開発手法と言えます。
多様化するノーコードツール
現段階で既に世界中には、沢山のノーコードツールが誕生し、今後もその勢いや成熟度は益々増していくでしょう。ノーコードツールで有名な「Bubble」ではより複雑なWebアプリを構築でき、「Adalo」ではスマホアプリを構築できるというように、それぞれのノーコードツールの強みは割とはっきりしています。
今回紹介する「Webflow」はHPなどのWebサイト制作に特化したノーコードツールになっています。
「Webflow」のご紹介
アメリカのサンフランシスコを拠点とする「Webflow Inc.」が提供する「Webflow」は、「Dreamweaver」や「Bind」などのアプリケーションや、「Wix」「Jimdo」「STUDIO」などのWebベースの開発環境など、コードを書かずにWebサイトやWebアプリケーションを作成できるツール中でも、最もポピュラーな開発ツールの一つです。
これ1つのツールでサイト作成から公開までを完結させることができます。
HTMLやCSSの知識があればいいのですが、実際の作業ではコードを書く必要はなく、基本的にはボタンをクリックするだけでOKなのです。特に最近コーディングを少しお休みしているデザイナーやディレクターの方にオススメです。
どんなデザインにも仕上がる
静的ページのコーディングに関しては、この「Webflow」で基本的にできないWebサイトのデザインはほとんどありません。デザインを作成する際には、あなたの創造性を存分に発揮しましょうまた、視差効果などのエフェクトも簡単に追加することができます。
今までエンジニアに任されていたものが作れるのは素晴らしいことです。
これがエンジニアではない人がWebflowを使う醍醐味だと言っても過言ではありません。また、優秀な無料テンプレート集が豊富に用意されているので、多様なデザインを想像する選択肢が増えるのは大きいのではないでしょうか。
1つのツールでCMSを完成させる
更新のしやすさから外部ツールとの連携に泣かされていたCMSが「Webflow」ひとつで簡単に作成できるようになりました。データテーブルを作成したら、写真やタイトルを追加していくことができます。
CMSとは、Content Management Systemの略で、ホームページを管理・更新できるシステムのことを指しますが、簡単に言えば、ホームページを簡単に更新できるツールのことです。
そのメリットは、更新がしやすい、管理・運用がしやすい、問い合わせなどの管理ができるなどです。
ホームページとなると、HTMLタグを使って更新しなければならなかったり、サーバーを使っている限りセキュリティが心配だったり、問い合わせの数で効果を測ったりと、初めての方には少し気が引ける作業がたくさんあります。しかし、CMSは担当者の負担を大幅に軽減できるツールです。
「Webflow」が最強と言われる一つの要因がこれに当たります。
注目すべき項目
- Googleフォント、Adobeフォント、カスタムフォント(任意のフォントをアップロード)が使用可
- ECサイトの作成が可能
- HTML、CSSのソースコード出力が可能
- SEO対策に使いやすい
- 開発環境が不要で使いやすい
有料プラン
検索エンジンのインデックス化をの防止、カスタムコードでのnoindexの設定、転送パスワードの設定などの機能を使いたい場合は、有料プランも考えてみてはどうでしょうか。
詳しくはこちらを参照してください。
具体的にどのようなプランに申し込めばいいのか、海外のサービスなので分かりづらいと思います。「Site plans」から一つと「Account plans」から一つの両方に申し込む必要があります。
つまり「Site plans」と「Account plans」のどちらか一方だけを契約すればいいように思われるかもしれませんが、ここで注意が必要です。
学習方法
まずは無料プランでWebflowを使ってみましょう。海外のサービスなので、日本語で説明している記事が少なく、最初は少し戸惑うかもしれません。しかし、ご安心ください!以下のページを参考にして勉強してみてください。
NoCode School(ノーコードスクール)
https://www.youtube.com/playlist?list=PLiDMHhMXhuXQiLGSyf6OwoJiEHyTufLLv
シンジの解説動画です。まずはこちらをオススメします!
Webflow University
https://university.webflow.com/
公式チュートリアルです。英語ですが、Google翻訳を使えば大体のことは理解できます。
フォーラム
https://forum.webflow.com/
使い方がわからない方はこちらもチェックしてみてください。(もちろんGoogle翻訳)
無料テンプレート
https://webflow.com/templates/free-website-templates
無料でダウンロードできますので、自分で作る際の参考にしてみてください。
良い口コミ
市場で群を抜いて最高のツールです。ある程度の学習が必要ですが、Webflow Universityを使用すると、非常に簡単になります。
出典：https://www.trustpilot.com/reviews/5fda9c38755dc10b48256861
サービスが大好き！誰かがコードに触れることなくウェブサイトを完全にカスタマイズするための素晴らしい方法です！ 組み込みの要素のいくつかはより良く、より多くのカスタマイズを可能にするかもしれませんが、少し創造的な思考でほとんどのことが可能になるはずです。 ただし、いくつかの大手広告会社やGDRP機能との統合がさらに強化されていれば素晴らしいと思います。 100％人々にお勧めします！
出典：https://www.trustpilot.com/reviews/5dca84b1c845450a84916af4
コーディング能力のないデザイナーにとって非常に便利な素晴らしいサイト。少しバグがありますが、それが提供するものには価値があります！
出典：https://www.trustpilot.com/reviews/5c0854259d37800098869c26
悪い口コミ
それは大きなサイトには良くなく、2ページしか許可されておらず、比較するとほとんどのウェブサイトビルダーよりも悪いです:(。 Webflowはデザインを素晴らしいものにすることでこれのバランスをとろうとしますが、それでも、大きなサイトや中規模のサイト、そしていくつかの小さなサイトはそうではありません我慢できます。
出典：https://www.trustpilot.com/reviews/5ee4981a7dd7530828bfcda3
明らかな理由もなく高すぎる。ビルダーは複雑で、学習曲線が大きくなります。しかし、一度習得すれば、かなり簡単になります。無料プランは役に立たず、2ページに制限されています。ビルダーを効率的に使用するには、有料プランにアップグレードする必要があります。
出典：https://www.trustpilot.com/reviews/5f2825aa1a5a690a041e7b05
まとめ
いかがでしたでしょうか。「Webflow」の強みがはっきりしたのではないでしょうか。
個人的にやはりCMSをこのツール一つで完結させるのは圧巻だと感じました。口コミにもある通り、無料プランでの制限があることで満足度が高くないケースもあると思うので、有料プランにアップグレードすることをオススメします。しかし、無料プランでも豊富にテンプレートが存在しているため、試す価値はあります。
デザインが洗練されたWebサイトを比較的容易に構築可能な「Webflow」の最大の恩恵を皆さんで受けてみませんか？
