こんにちは、ディレクターの澁谷です。
主にアプリケーション開発の手法であるノーコード・ローコードですが、Web制作に対応するノーコード・ローコードツールも多く登場しています。
今回はWebサイト制作における、ノーコード・ローコードツールの選び方・出会い方・付き合い方を紹介します。
- ノーコードツールとは？ローコードツールとは？
- ノーコード・ローコードツールが、Webサイト制作にもたらす恩恵
- 「選び方①」作りやすさ（ツール操作の難易度）から選ぶ
- 「選び方②」コード編集のしやすさ（カスタマイズ性）から選ぶ。
- 「選び方③」生成物（コード書き出し）の形式から選ぶ
- ノーコード・ローコードツールとの「出会い方」
- ノーコード・ローコードツールとの「付き合い方」
ノーコードツールとは？ローコードツールとは？
◎ノーコードツール
ノーコード（No Code）とは、アプリケーションなどを開発する際に、まったくソースコードの記述をしなくてもいい開発手法のことです。ノーコードでの開発ができるツールを活用すればソースコードが一切不要なため、プログラミング言語を習得しておらず、ITの知識がない方でもプログラミングが可能です。
◎ローコードツール
ローコード（Low Code）もプログラミングに関する専門知識がほとんどなくても、ソフトウェアを内製できる開発手法です。ローコードでは、ゼロからプログラミングするよりも、ソースコードの記述がずっと少ない量で開発できます。
ノーコード・ローコードツールが、Webサイト制作にもたらす恩恵
ノーコード・ローコードツールにより、Webサイト制作における実装業務の、大幅な効率化が期待できます。
効率化に伴い、
・ブラッシュアップに割ける時間が増え、品質UPにつながったり、
・対応可能な案件数が拡大し、業績UPにつながったり、
という効果が、考えられます。
ノーコード・ローコードツールには、様々なものがあります。
つづいては、上手なノーコード・ローコードツールの選び方を3つの視点から見ていきましょう。
「選び方①」作りやすさ（ツール操作の難易度）から選ぶ
ツールにより、扱うための難易度が異なります。利用者のスキルや、学習コスト等の兼ね合いも、ツールを選ぶ一つの軸になります。
| ツール操作の難易度 | とても簡単 | 学習が必要 | 学習が必要 |
|---|---|---|---|
| 作り方 ＝プロンプトの形式 |
"Text" to Website (テキスト入力でデザイン制作) |
"Original Tool" to Website (オリジナルツールでデザイン制作) |
"Figma" to Website (Figmaでデザイン制作) |
| 専門知識 | 不要 | オリジナルツールの知識が必要 | Figmaの知識が必要 |
| メリット | 非常に簡単 | デザイン自由度とコード品質のバランスが良い | デザインの自由度が高い |
| デメリット | 意図するデザインを実現しづらい | ・ノーコード/ローコードツールとセットで提供されているオリジナルのデザインツールを使用するスキルが必要 ・提供ツールで実現可能な範囲内でのデザインに限定される |
・コンポーネント指定やオートレイアウト指定など、質の高いFigmaデータを作成する必要あり、デザイン制作に工数がかかる ・デザインの自由度が高い分、生成されるコードに不備があるケースや、質の低いコードが生成されるケースがある |
| ツール例 ※ツールのアップデートにより、ポジションが変わる可能性あり |
10Web dora AI |
STUDIO Webflow |
QUEST AI Locofy Framer |
「選び方②」コード編集のしやすさ（カスタマイズ性）から選ぶ。
デザイン細部の調整や、コードのブラッシュアップなど、生成物に対するコードのカスタマイズ性も、ツールを選ぶ一つの軸になります。
| コード編集のしやすさ | あまりできない (ノーコードツール) |
できる部分も多い (ローコードツール) |
自由にできる (手作業・ハンドメイド) |
|---|---|---|---|
| 相性の良いWebサイト | ・コード品質はあまり求められないサイト ・短期間限定のサイト |
・ある程度のコード品質が求められるサイト ・長期で運用していくサイト |
・高いコード品質が求められるサイト ・長期で運用していくサイト |
| Webサイト例 | ・ランディングページ ・キャンペーンサイト 等 |
・企業サイト ・サービスサイト 等 |
・セキュリティレベルの高い企業サイトやサービスサイト 等 |
| コーディングの作業量 | まったくなし | 多少あり | 多い |
| 専門知識 | 不要 | 必要な場面もあり | 必要 |
| 開発の早さ | 非常に早い | 早い | 時間がかかる |
| 開発の自由度 | 低 | 中 | 高 |
| ツール例 ※ツールのアップデートにより、ポジションが変わる可能性あり |
STUDIO Webflow 10Web dora AI Framer |
QUEST AI Locofy |
ー |
「選び方③」生成物（コード書き出し）の形式から選ぶ
コードの書き出し形式や、書き出しの可否がツールにより異なります。制作するサイトの実装方針も、ツールを選ぶ一つの軸になります。
| 生成物(コード書き出し) の形式 |
HTML/CSS | React | コード書き出し不可 (ノーコード・ローコードツール内のプラットフォーム上で表示) |
|---|---|---|---|
| 用途 | ・静的Webサイト制作 ・システム開発に向けたモック制作 |
Reactでのシステム開発に向けたモック制作 | シンプルな要件の静的Webサイト制作 |
| 拡張性・カスタマイズ性 | 高 | 高 | 低 |
| ツール例 ※ツールのアップデートにより、ポジションが変わる可能性あり |
Locofy Webflow |
Locofy Webflow QUEST AI |
STUDIO dora AI Framer |
選び方①～③を参考に、用途・目的に合ったノーコード・ローコードツールを探していきましょう。
ノーコード・ローコードツールとの「出会い方」
世界のスタートアップ関係者や投資家が注目しているシリコンバレーで生まれた世界最大のプロダクト投稿サイト「Product Hunt」で、ノーコード・ローコードツールをキャッチアップするのが、おすすめです。
Product Huntの特徴は2つあります。
・毎日、いろんなカテゴリーのプロダクトが数百個以上投稿される
・投票機能があり、投稿されたプロダクトに対する、世界中のユーザーの評価やランキングが見られる
Product Huntには色々なカテゴリーのプロダクトが集まっています。
ノーコード・ローコードツールにおいても、以下のように、様々なものが掲載されています。
◎ノーコードツール
・The best website builders in 2024
◎ローコードツール
・The best ai coding assistants in 2024
・The best automation tools in 2024
ノーコード・ローコードツールとの「付き合い方」
ノーコード・ローコードツールは、人間の仕事を「奪う」ものではなく、「軽減」してくれるものです。
つまり、ノーコード・ローコードツールから生成されたアウトプットを、「ディレクション」「ブラッシュアップ」できるスキルが必要になってきます。
0→1の実装はノーコード・ローコードツールが担い、人間は 1→10の「ディレクション」「ブラッシュアップ」を担うようになると、これまでの「エンジニア」という仕事は、今後「テクニカルディレクター」としての役割が強くなってくるかもしれません。
そのような、ツールとの付き合い方を意識しながら、情報収集やスキル向上をしていくことが大切だと思います。
