【ノーコード×Figma活用でWeb制作を内製化】Webサイト制作に使えるノーコードツールを徹底調査 – Webサイトビルダー選定編

はじめに

自部署でWebサイトを作りたいと思っても、人材を育成するためのコストが高く内製化が難しいと悩んでいる方もいるのではないでしょうか。 そのような方のために、本記事では「Webサイトビルダー」と呼ばれる、デザインから自動的にWebサイトを生成し、そのまま公開したり、ソースコードを生成できるノーコードツール※1をご紹介します。

2023年3月現在、Webサイトビルダーに分類されるノーコードツールが数多く存在しています。一般社団法人NoCoders Japan協会が公開している「ノーコード・カオスマップ」 で紹介されるものだけでも18種類※2あることから、世界規模ではさらに多くの種類が存在していると考えられます。このような数多くの中から、自社に合った適切なツールを選定するにはどうしたら良いでしょうか。

本記事では、企業のWebサイトの制作に適したWebサイトビルダーを選定するため、独自に判断基準を定義し、この基準を満たすツールを調査しました。

結論から先に言うと、「TeleportHQ」が最もおすすめしたいツールです。 TeleportHQは、HTMLタグやCSSプロパティをノーコードでも直接でもどちらでも設定できるため、HTML/CSSの学習にも利用でき「最終的にはノーコードツールを使わなくともコードが書ける人材も育成したい」といった現場にもおすすめできるツールです。

※1 本記事で紹介するサービスの、商標・ロゴマーク、商号に関する権利は、それぞれの権利の所有者に帰属します
※2 ノーコード・カオスマップ で「Webサイト」に分類されているもの

この記事で説明していないこと

世界で最も有名で利用者の多いWebサイトビルダーはWordPressです。フルサイト編集が行えるブロックテーマを利用するとノーコードでサイトが生成できますが、デザインツールからのインポートやソースコード出力には対応していないため、本記事の選定の対象外となっています。 WordPressの以外のノーコード・カオスマップで「Webサイト」に分類されているもののほとんどが、本記事が定めるいずれかの基準を満たしていないため、本記事の選定の対象外となっています。 また、記事によっては、Webサイトが生成できるノーコードツールとして、ShopifyなどのECサイトに特化したツールや、BubbleなどWebアプリ作成に特化したツールなどを、一緒くたに紹介しているのを見かけますが、「企業のWebサイト」制作には向きとは言えず、本記事では紹介していませんので、あらかじめご了承ください。

Webサイトビルダーの選定基準

どんなツールを選ぶ場合でも、そのツールの特徴を理解してから選ぶことが大切です。企業のWebサイトを制作する際の、Webサイトビルダーの選定基準としては、以下の観点が重要であると筆者は考えます。なお、英語が苦手な方にとっては、日本語のドキュメントが提供されていることは重要な選定基準になるかもしれませんが、最近の翻訳機能の精度向上により、ブラウザに内蔵された翻訳機能でも内容を十分に理解できるようになってきていますので、今回は日本語のドキュメントの有無は選定基準から除外しました。

1. 企業のWebサイトとして最低限必要な機能があるか
2. 無料プランがあるか
3. 学習しやすいか、簡単か
4. ソースコード出力に対応しているか
5. 主要なデザインツールからのインポートに対応しているか

1. 企業のWebサイトとして最低限必要な機能があるか

Webサイトビルダーは、編集画面でデザインしたものをそのままWebサイトとして公開できるウェブホスティング機能があります。この方法で公開する場合、以下を企業のWebサイトとして必要最低限の機能として考えました。

• レスポンシブなページが作成できること
• SSLに対応していること
• 所有している独自ドメインで公開できること
• カスタムスクリプトが設定できること（計測タグなど）
• ファビコン/メタタグが設定できること

なお、Webサイトビルダーで作成したものを公開する方法としては、ソースコード出力機能を利用する方法がありますが、この方法で公開する場合は、ホスティング環境を用意し、SSLに対応し、ドメイン設定を行うなどのバックエンドの作業を自前で行う必要があることに注意が必要です。

2. 無料プランがあるか

Webサイトビルダーは無料から始められるものがほとんどです。しかし、中には有料プランしか提供しないものもあります。 イメージしたものと違っていたということを避けるために、主要な機能を無料プランで試せるのが理想的です。

3. 学習しやすいか、簡単か

Webサイトビルダーは、簡単でわかりやすいものが多いですが、どのようなツールにも学習コストが存在します。複雑で学習コストが高いツールは、学習コストに見合う成果が早期に得られない可能性が高くなるため、選定の際は注意が必要です。なお、人の脳は認知負荷を低減させるためにシンプルな情報を好む傾向があり※3、シンプルで分かりやすいツールは利用者も多いため（＝ツールに関する情報をアウトプットする人も増えるため）、情報が得やすくなることにも繋がります。

※3 Kintsch (1974)、ShiffrinとSchneider (1977)

4. ソースコード出力に対応しているか

ノーコードツールの多くはスタートアップ企業から提供されています。 そのため突然サービスが停止される可能性を考慮する必要があります。特にアメリカでは起業から5年のうちに半数以上が倒産または廃業をしているというデータもあります※4。Webサイトビルダーも例外ではないため、本記事では、サービスが停止された場合でも他のサイトにスムーズに移行できるよう、ソースコードの出力に対応したWebサイトビルダーを選定対象としています。なお、ソースコード出力に対応していないWebサイトビルダーとして有名なものは、WixやWixが提供するEditor X、国内では日本企業が開発しているSTUDIOなどがあります（2023年3月時点）。 また、ソースコード出力に対応していれば「既存のサイトと同じサーバーで動作させたい」というニーズにも応えることができます。

※4 文部科学省 科学技術・学術政策研究所「5.4.3主要国における起業の状況 (3)起業後の企業生存率の国際比較」

5. 主要なデザインツールからのインポートに対応しているか

Webサイトビルダーには、FigmaやAdobe XDなど、主要なデザインツールからのインポートに対応しているものがあります。使い慣れたデザインツールで作成したデザインをインポートできることは、制作の効率化につながります。本記事では、WebデザイナーやWeb開発者の間で人気の高いFigmaからのインポートに対応したWebサイトビルダーを選定対象としました。

本記事が定めた選定基準を満たすWebサイトビルダーの紹介

前章で上げた5つの基準の全てを満たすWebサイトビルダーとして、以下の4つを紹介します。

Plasmic

Plasmicは、APIにより既存のWebサイトに組み込んで利用するタイプのWebサイトビルダーです。 PCとSPの表示を同時に確認しながら作成できるのも特徴です。ReactやVueなどのフレームワークやPHPにも対応しており、デザインとコードを同時に作成することができます。HTMLやCSSを直接ソースコードとしてダウンロードする機能はありませんが、Rest APIで取得することができます。

Builder.io

Builder.ioは、Reactコンポーネントのソースコードのインポートに対応している点が特徴です。ヘッドレスCMSとの連携はもちろん、Plasmicと同様にAPIにより既存のWebサイトに組み込んで利用することもできます。機能が豊富で複雑なWebサイトを構築することができます。無料プランでもソースコードの出力に対応している点が魅力です。

Webflow

Webflowは、コーディング知識がなくても、高品質なWebサイトを作成することができるツールです。デザインと開発を同時に行うことができ、他のWebサイトビルダーと比較して機能が豊富であるという特徴があります。また、コーディングに近い形での編集が可能で、高度なカスタマイズもできる点が魅力です。 Webflow Universityを利用すると、Webflowを使ってWebサイトやWebアプリケーションを作成する方法を学ぶことができます。

TeleportHQ

TeleportHQは、他のWebサイトビルダーと比較すると機能は少ないですが、Web制作の現場でよく利用されるhtmlタグやCSSプロパティがノーコードでもソースコード直接でもどちらでも設定することができます。 そのため初心者には簡単に、ある程度コーディングがわかる方はより効率的に利用することができます。また、テンプレートやカスタムコンポーネントの利用も可能です。無料プランでも複数の形式でのソースコード出力に対応している点が特徴です。

ここまで紹介した4つのWebサイトビルダーの中で、最も機能が豊富なのはWebflowですが、ソースコード出力機能は有料プランのみで利用できます。また、他のWebサイトビルダーよりも機能が多いため、料金も高めに設定されています。 Builder.ioとPlasmicを本格的に利用するには、エンジニアの協力なしには難しいかもしれません。

まずはTeleportHQでスモールスタートし、ランディングページの制作などから始めて、運用に耐えられるかを検証することをおすすめします。もし、TeleportHQで必要な機能が足りないと感じた場合は、他の3つのWebサイトビルダーを再度検討してみてください。なお、TeleportHQは、Web制作の現場でよく利用されるHTMLタグやCSSプロパティをノーコードでも直接でもどちらでも設定できるため、HTML/CSSの学習にも利用できます。「最終的にはノーコードツールを使わなくともコードが書ける人材も育成したい」といった現場にもおすすめです。 Webサイトビルダーは、どれもUIが似ているので、1つでも慣れておけば、他のツールへの移行もスムーズに行うことができます。

まとめ

企業のWebサイト制作にWebサイトビルダー（ノーコードツール）を導入する際に重要になる判断基準と、本記事が定めた基準に合致するWebサイトビルダーをご紹介しました。 Figmaのインポートに対応し、且つソースコードに対応するツールは複数あり、その中でも、TeleportHQで小さく始める方法を、おすすめしました。

今後もノーコードにまつわる技術などをご紹介していきたいと思いますので、今後ともお楽しみください。