.webp)
私は2020年からWebflowを中心に教育とWeb制作代行事業とコミュニティ運営を行なってきました。今回の記事では専門家の立場からWebflowについて詳しく説明したいと思います。
ノーコードツール Webflow
WebflowはWebサイトを作成するためのツールです。ノーコードのツールですので、普段webサイトで使われるHTML/CSS/JavaScriptのコードを書く必要なく制作ができます。
WebflowはユニークなGraphic User Interface（略：GUI）を提供しています。そのGUIはドラッグアンドドロップであるが、コーディングに近い設定を細かく行うことができます。そのおかげでWebflowは他のノーコードツールよりクオリティの高いWebサイトが作れます。
技術面だけではなく、ビジネス面でもWebflowが注目を集めています。2013年にアメリカで創業されました。有名なY Combinatorというベンチャーキャピタルから支援され、2019年にシリーズAで70億円と2022年にシリーズBの150億円の資金調達を行なってきた急成長の企業です。2023年の時点に企業価値が4000億円を超えているユニコーン企業です。
他社ツールとの比較
WebflowはノーコードのWeb制作ツールの中ではユーニックなものです。多くのツールはテンプレートベースであったりして、細かいカスタマイズができないか、コードを書く必要があるか、制限枠の狭いものが多いです。
一方で、Webflowはビジュアル開発（Visual Development）のアプローチをとっていて、コーディングに近い概念を取り入れながらGUIの視覚的な操作を可能にしています。そのアプローチは、使いやすさと機能性の理想なバランスを生み出しています。
Webflowはどんな人におすすめ？
多くのノーコードツールがありますが、そのなかでもWebflowがどのようにニーズに答え、使用することで得られる恩恵を大きく受けられる人は、以下の通りです。
- これからウェブ制作を学習する初心者
- デザインはできるけどコーディングができないデザイナー
- 社内サイトを柔軟に運用したい企業
1.これからITを学習する初心者
まず最初に、これからプログラミング、ウェブ制作を学びたいという、IT未経験の方にオススメできます。従来はHTML/CSS,JavaScriptを記述して作成するウェブサイトですが、初心者にとってこの作業は難しく、挫折してしまう方が非常に多いです。それに対してWebflowはコードを一切書くことなく、ボタン操作で視覚的にWebサイトを構築していくことができます。従来のコーディングは記述した後にビューに表示させ、またコードエディタを開いて〜の繰り返しで、直感的に自分の行っている操作がイメージしずらいものでしたが、Webflowではリアルタイムで視覚的に作成ができるので、初学者のうちは特に難しいと言われているCSSも難なく理解することができます。Webflowで概念を理解した後にプログラミング言語の学習に進んでも良いですし、デザインを学んでWebflowウェブデザイナーとして活躍することもできます。
2.デザインはできるけどコーディングができないデザイナー
デザイナーがWebflowを使うことは非常にオススメです。従来のウェブ制作ではデザイナーが洗練れたデザインを作成して、コーダーが実装するという流れでした。これだとサイトが完成するまで多くの時間が掛かりますし、実際に出来上がったものがデザイナーがイメージしていたものと違う。ということが起きることがあります。これはコーディングに特化したコーダーと、デザインに特化したデザイナー、２人を経て行われるので、どうしても起きてしまう問題です。
しかしWeflowを用いることでデザイナー自身がWebサイトを実装することができます。これにより大幅に制作時間・費用の削減になりますし、人的なトラブルを減らすことができます。FigmaやXDなどでデザインを作成してからのWebflow実装はもちろん、Webflowに直接Webサイトを構築することで圧倒的に開発コストを削減することもできます。
現在はFigmaのデザインをWebflowにコピペできるツールがWebflow公式から発表もされています。
3.社内サイトを柔軟に運用したい企業
ビジネスを成長させるためのウェブマーケティングとして、Webflowでサイト運用を行うことは企業にとって有益です。
更新の行いやすさ、最速なPDCA、縦覧な管理、高度なセキュリティなど様々な恩恵を受けることができます。次の項目では、企業が導入したことで得たメリットを紹介しています。
右サイドバーの紹介
右のサイドバーから、様々な機能をもったツールを使用することができます。
ペンのアイコン、歯車のアイコン、雨のアイコン、雷のアイコンがあります。ペンはCSSを付与するスタイルパネル、歯車は設定を行う設定パネル、雨は使用しているクラスを一覧で表示するスタイルマネージャー、雷はアニメーションの作成するインティラクションパネルです。
右のパネルでCSS付与
Webflowのデザイナー画面の両橋にサイドバーがあり、CSSの付与は右のパネルにある「スタイルパネル」から行うことができます。
Flex Child、Spacing(Margin,Padding)、Size、Position、Typograph、Backgroundなど、同じみのプロパティがそれぞれセクションでまとめられています。例えば、上記画像のTypographyをご覧ください。ここには、font-sizeやfont-weight、font-size、color、align、そしてstyleなどの設定を行うことができます。オレンジ色箇所は親要素から継承されているプロパティで、青い箇所は今回そのクラスに新しく付与したプロパティになります。このように、スタイルパネルでは決まったCSSプロパティをクラスに対して与えるHTML/CSSの概念を用いた構築を行うことができます。
大企業による導入事例
Dell
デル・テクノロジーズは、アメリカ合衆国の多国籍コンピュータテクノロジー企業です。世界最大級のテクノロジー企業で、世界各国で16万5000人以上の従業員がいます。
Dellのデザインチームは、Figmaなどのデザインツールでプロトタイプを作成するのではなく、Webflowを使うことでホバー状態からトランジションなど、すべてのフロントエンドのスタイリングを作成できるようになったため、デザインとエンジニアリングの間の行き来が少なくなりました。
8つの
楽天SL
楽天スーパーロジスティクスのウェブサイトもWebflowで作成されています。楽天SLはサイトをワードプレスからWebflowに移行したことで、12.7%のページビューの増加、9.5%の新規ユーザーの獲得、27.9%の直帰率の低下を実現しました。
楽天SLのマーケティングオペレーションマネージャーは、ワードプレスからWebflowに移行をしたことで数ヶ月間で数千ドルの節約ができ、通常プログラマーにお願いすると4~5時間かかる変更を20分で行うことができるようになったと話しています。
Dropbox Sign
デジタル署名ツールのDropbox Signは、Webflowを使用して視覚的に魅力的でユーザーフレンドリーなウェブサイトをデザインしました。Dropbox SignはWebflowに移行したことで、市場投入までのスピードが4倍早くなり、コンテンツ作成とダウンロード数が2倍以上に増加しました。
- 楽天SL
- 数字を用いる。ワードプレスより良いことを記述する。
- 日本の大企業の導入事例
国内企業も導入
RICOH360 Blog
上場企業「株式会社リコー」の制作案件です。こちらは弊社がご対応させていただきました。WordPressからの移行に伴い複数のサイトの統一をWebflowで行っており、日本語だけではなく、英語とフランス語のページといった多言語対応もされています。
TGVP - 凸版印刷株式会社
凸版印刷株式会社のWebサイトです。こちらも弊社でご対応をさせていただきました。米国のカリフォルニア州で新しいベンチャーキャピタルの事業のウェブサイトになります。
Booko
出版業界のDXに取り組む株式会社ミンガコのWebサイトです。こちらは弊社がラボ型開発で携わらせていただいております。文字の入力と画像の置き換えだけで、テンプレートから本のデザインが作れる、そして紙の本として出版して、Amazonで売れる「Booko」というWebサービスです。
バックアップとバージョン履歴機能
Webflowで作成するすべてのプロジェクトは無制限のバックアップを取ることができます。これはWordPressやSTUDIOなど他のノーコードツールにはない魅力の１つです。バックアップを取るには3つの方法があります。
自動でバックアップ
Webflowは50回に自動保存ごとにバックアップが作成されます。何か大きな不具合が発生した時も安心してバックアップからその時点の状態に復元することができます。
手動でバックアップ
意図したタイミングにバックアップを作成することもできます。手順は以下の通りです。
- Command + Shift+S(Mac の場合) または Control + Shift + S(Windows の場合)をクリックします。
- Descriptionを追加する
- Saveをクリックします
復元時の自動バックアップ
バックアップから以前のバージョンに復元する際に、自動的にバックアップが作成されます。
Eコマースの機能
EコマースとはElectric Commerceの略称で、インターネットを介して決済などを行う取引形態のことを言います。Amazonや楽天などのインターネット通販サイトをイメージするとわかりやすいと思います。WebflowはECサイトを作成する機能があるので、優れたデザインで商品を販売することができます。
WebflowはSEOにどれくらい優れている？
WebflowのSEO（サーチエンジン最適化）は非常に優れています。以下のような多くの主要なSEO対策タスクを簡単に実行することができます
- ページタイトル、URL、メタディスクリプションの記述
- 画像にaltタグを追加
- 301リダイレクトの作成
- スキーママークアップの編集
- robots.txtファイルの編集
- 完全レスポンシブページのデザイン
サイトマップ は、自動的に生成された XML サイトマップを使用することも、独自のXMLサイトマップを作成することもできます。
ページ速度
読み込みが速いサイトは、検索結果で上位表示に繋がります。
GoogleのPageSpeed Insightsツールでテンプレートを計測すると、90以上のスコアを取ることができています。ページ読み込み速度が遅くなる大きな要因として、画像サイズが大きすぎるということがあります。Webflowはこれを回避するために、アップロードした画像の複数のバージョンを作成し、様々なサイズで、サイトが表示されている画面解像度に対して、適切なものを表示します。さらに、Webflowの「画像読み込み」設定で画像の読み込みのオプションを、Lazy: loads on scroll. Eager: loads immediately. Auto: defaults to browser settingsの3種類の中から選択することができます。
さらに、最も軽量な画像形式WebPにも対応しています。Webflow内に設置されたjpeg、png画像などはWebflow内でWebPに一括変換することが可能です。
安心のサポート体制
Webflowのカスタマーサポートから問い合わせることができます。私はこれまでに料金の支払いに関する問い合わせ、料金体制変更時の問い合わせ、払い戻しの問い合わせなどを行いました。24時間以内に返信が届き、丁寧にサポートしてもらえました。問い合わせは英語のみですが、DeepLなどの翻訳ツールを用いて連絡をすることで、円滑にやりとりを行うことができます。
まとめ
今回の記事でWebflowとは？について紹介をしました。現在はワードプレス、エレメンター、STUDIOなど様々なノーコードツールが数多く存在しています。その中でもWebflowは自由度の高さから、開発後の運用のしやすさから、ウェブマーケティングのツールとして事業を成長させるために重要なポジションを築いています。ワードプレスで作成されたサイトの運用に困っている方はWebflowに移行することで解決することができます。是非一度、Webflow専門家にご相談ください。以下のURLから無料相談を予約することができます。
.webp)
