いま、見ておきたいウェブサイト

第179回ノーコードのデザインツールは⁠ウェブサイト制作の世界をどう変えるか

クラウドの普及やDX(デジタルトランスフォーメーション)推進で、人材育成やコスト削減、知識・経験則の蓄積などのメリットから、企業の内製化が注目されています。その中で注目を集めているのが、ノーコードデザインツールです。

図1 代表的な4つのノーコードデザインツールのウェブサイト。Studio⁠左上)Webflow⁠右上)Wix.com⁠左下)Framer⁠右下)

手軽にウェブサイトが制作できるツールの特徴や利用の拡大原因を探りながら、内製化によって変化を迎えている、ウェブサイトの制作環境と今後の方向性を探ります。

ノーコードデザインツールとは

ノーコードデザインツールでは、直感的なインターフェースと視覚的な操作が重視されています。ユーザーは、基本的なPC操作だけで、テンプレート上のレイアウト調整やフォント変更、文章や画像の差し替えなどを行いながら、制作を進めていきます。

表1 ウェブサイト制作に特化した、代表的なノーコードデザインツールの主な特徴をまとめたもの
ツール名 特徴 カスタマイズ性 リアルタイム編集 デザインインポート 価格
Studio 日本語に完全対応。デザインだけでなく、CMSやフォーム、分析ツールなど、運用・管理に必要な機能も提供。 非常に
高い
可能 可能
(プラグイン使用)
無料あり
[個人]月額590円から
[法人]月額3980円から
Webflow テンプレート数が多い。EC向けのプランもあり。有料プランで完成デザインを書き出せるなど、製作者からの支持が高い。GSAPも買収。 非常に
高い
不可 可能
(プラグイン使用)
無料あり
[個人]月額14USドルから
Wix.com 他社に先駆けてAIを活用した「Wix ADI」が有名。制作会社やウェブデザイナー向けの「Wix Studio」も用意。NASDAQ上場企業。 高い 不可 可能
(プラグイン使用)
無料あり
[個人]月額1300円から
[法人]月額1400円から
Jimdo AIを使い、最速わずか3分でウェブサイトを構築する「AIビルダー」など、手軽さやコストパフォーマンスが高い。 低い 不可 可能
(HTML書き出し)
無料あり
[個人]月額990円から
[法人]月額1590円から
Framer プロトタイプツールからノーコードデザインツールに進化。独自のUIコンポーネントを提供。ウェブサイトのパフォーマンス関連機能が多い。 高い 可能 可能
(プラグイン使用)
無料あり
[個人]月額770円から
[法人]月額7500円から

※価格は2024年12月現在

テンプレートをそのまま使用するだけでなく、用意された各種コンポーネントを組み合わせたり、追加でコードを記述したりすることで、より複雑なデザインやレイアウト、アニメーションの追加も可能です。

特定の条件下での動作や外部APIとの連携といった、さらに詳細な設定ができる機能も提供されています。使いこなせば、高度なカスタマイズによる独自機能の実装も可能です。

ノーコードツールが普及した要因

これまで多くのウェブサイト作成ツールやアプリケーションが登場しましたが、幅広い支持は得られませんでした。なぜ、ノーコードデザインツールは急速に普及しているのでしょうか。

使いやすさと、技術の学習コストの低さ

ノーコードデザインツールの制作作業は、⁠コピー・アンド・ペースト」「ドラッグ・アンド・ドロップ」といった、直感的な操作が基本です。基本的な技術の学習は必要ありません。

図2 代表的なノーコードデザインツール「Studio」のデザインエディタの機能紹介ページ。直感的な操作でレイアウトの変更やアニメーション表現が可能

簡単なインタラクションやアニメーションも、コードを書かずに追加が可能です。またツール自体はクラウド上で作業するため、ソフトウェアのインストールも必要なく、開発環境を選ばない点も特長の一つです。

重視される「スピード」「コスト」

近年、企業におけるウェブサイトの内製化が進んでいます。内製化で重要視される点が、ウェブサイトの運営に関連する「スピード」「コスト」です。

外部に制作を依頼している場合、コンテンツの変更には時間がかかります。内部で即時更新したい場合には、社内に技術者を常駐させ、ウェブサイト自体にもCMSの導入が必要です。どちらも時間が必要で、追加コストが発生します。

この「スピード」「コスト」の面から注目されているのが、ノーコードデザインツールです。

ユーザー環境や技術への対応

ウェブサイトは、制作後もユーザーの閲覧環境や技術の変化に合わせた対応が必要不可欠です。

このため大企業では、専門的な知識と技術経験のある外部の制作会社と協力して、ウェブサイトを制作します。一方で中小企業は、外部への依頼は難しく、変化に合わせたウェブサイトの制作が厳しい状況です。

ノーコードデザインツールが提供するテンプレートは、最新のユーザー環境や技術に対応済みです。テンプレートからウェブサイトを制作すれば、外部の環境や変化にすぐ対応できる仕組みになっています。

ウェブサイトの制作側への影響

内製化が進み、コンテンツの制作や迅速な更新が可能になると、ウェブサイトを依頼されていた制作側には、どんな変化が起きるのでしょうか。ノーコードデザインツールの普及が、ウェブサイトの制作に与える影響を考察します。

ビジュアルデザインの向上と依頼内容の高度化

近年、優れたウェブサイトを紹介するギャラリーサイトで、ノーコードツールで制作されたウェブサイトの紹介回数が増えています。3D表現やアニメーションを駆使した事例もあり、世界的にビジュアルの品質が底上げされているのを感じます。

図3 海外のウェブデザインギャラリーサイトAwwwardsで紹介されたウェブサイトHEAVN One⁠。フルスクラッチ制作のように見えるが、実際はノーコードデザインツール「Webflow」で制作されている

ビジュアルデザインについては、ノーコードデザインツールのテンプレート以上の品質が求められ、クライアント側が要求するデザイン品質の最低基準が上がります。

クライアント側の要望以上に答えられる、デザイン実績ある制作会社の数は限られてきます。高いデザイン基準を満たすウェブサイトの制作では、制作会社の同士の受注競争の激化も考えられます。

新技術による、経験則や知見の獲得

数多くのウェブサイトを制作してきた制作会社には、目的達成や効果的なデザインに関する、経験則や知見の深さがあります。この部分が、制作会社の持つ強みと言えます。

動画1 「Wix.com」のAIを利用した各種ツールを紹介した動画「Built-in AI tools」。テキストや画像の作成、レイアウトの提案、ウェブサイトの外観に一致するデザインの提案など、効率的に作業を行うためのツールを提供する

ノーコードデザインツールでは、新たな表現方法が定番化すれば、同様の表現を実現させるライブラリやコンポーネントが提供されます。またAI(人工知能)よる自動生成など、目的に合わせて最適化されたデザインを、誰もが生み出せる環境が整いつつあります。

ツールの進化によって、これまでのウェブサイトの制作・運用で培ってきた⁠見えない部分での知見⁠を示せるかどうかが、制作側の新たな課題となっています。

未来はどうなるのか

ここまで、ノーコードデザインツールと内製化の進む企業側、制作側の変化を説明してきました。AIなどの新技術や意識が変化したクライアント側、競争が激化している制作側。それぞれの今後を、いくつかの観点から予測してみましょう。

生存競争の激しさが増す、デザインツール

2024年1月、⁠InVision」2024年末で事業を中止することを発表しました。⁠InVision」は、デザインを素早くプロトタイプ化して共同作業できるサービスで、2018年には20億ドルの評価額を得るまでに急成長します。

その後、⁠Figma」などのデザインツールとの競争が激化すると、新たなツールの機能開発競争に遅れて、2023年には一部事業を売却。市場シェアの拡大にも失敗して、苦しい経営状態が続いていました。

図4 2017年10月発表のデザインツール、⁠InVision Studio⁠⁠。レスポンシブデザイン対応や複数でのリアルタイム編集などの機能が特徴だったが、ワークフローの複雑さなどでシェアを獲得できなかった

デザインツールは、顧客の要望に素早く対応できるものだけが、シェアを獲得して拡大していきます。最近は効率化の要望から、AI機能の追加が目立ちます。今後は他のツールよりも早く、AI機能を実装できるかが勝負になるでしょう。

図5 生成AIへの投資とAIを使った機能にフォーカスすることを宣言する「Webflow」のBlogエントリーBringing the power of AI to Webflow⁠。⁠ChatGPT」などの生成AI登場で、AIによる支援機能の開発を加速させるノーコードツールも増えている

内製化で進む、ルール化や人材の育成

内製化によって、組織におけるデザインルールを整理した「デザインガイドライン」を導入する企業も増えています。

「デザインガイドライン」は、自社商品だけでなく、ウェブサイトやスマートフォンのアプリなどのデジタルコンテンツやマーケティング戦略などでルールを共有して、品質やサービスを安定させ、効率化の向上を目指すものです。

図7 株式会社サイバーエージェントのメディア事業、⁠Ameba」のデザインシステムSpindle(スピンドル)⁠。ブランド戦略から始まり、原則やスタイル、アクセシビリティなど、細部まで細かく定義されている

「デザインガイドライン」の活用には、高い技術や経験を持つ人材が内部に必要です。社内の人材育成だけでなく、育成人材の獲得や社内研修の実施、外部の制作会社との協力関係構築など、新たな施策も必要になるでしょう。

クライアントとの協調体制と独自性の確立

ビジュアルデザインや技術力を中心としたウェブサイトの制作を売り込む。こうした提案は、内製化の進んだ企業に受け入れられるのは厳しい時代です。

企業側の要望を満たすには、課題に対してのデザインをベースとしたビジネスの提案が必要です。ウェブサイト制作だけのつながりではなく、クライアント側とビジネスを共同運営して、結果を出すという信頼関係も求められます。

コンサルティング能力を含めた総合力や専門分野に特化した高い技術力、綿密な分析による集客と成果力など、制作側が顧客との信頼関係を獲得するための変化が、業界での独自性を生み出していくはずです。

デバイスの変化による、デザインの定型化

ユーザーがコンテンツを消費するデバイスは、スマートフォン中心の時代です。スマートフォン上での情報伝達には、余計なものは必要ありません。わかりやすくシンプルで、素早いことがすべての基本です。

図8 webflowに用意されている、ウェブサイト制作用のテンプレート。画面左側に並んだジャンルを選択すれば、目的に合ったデザインのテンプレートが表示され、すぐに制作を始められる

基本のレイアウトやページ構成は定型化され、ウェブサイトの目的に合わせたデザインの定型化が進みます。ウェブサイトがより洗練され、ビジネスとしての結果を出せる、最適パターンを持ち始めています。

目的に合わせた定型化がすすめば、さらに効率化も進みます。デザインツールへのAI機能導入や、ウェブサイトやアプリのプロトタイプのAI自動生成などが急速に進化していくのは、自然な流れなのでしょう。

まとめ

ノーコードデザインツールの登場で、ウェブサイト制作は身近なものになりました。内製化が進む企業の依頼を受ける制作側には、課題の解決とウェブサイトの枠にとらわれない、新たな提案が求められます。

普及が広がれば、ウェブサイトの目的に合わせた「定型化」も進みます。AIを使った機能が追加されることで、より手軽に、最適化されたウェブサイトが制作できる環境も整います。

その一方で、目的やコンセプトをしっかりと練り上げ、贅沢に時間と手間、予算をかけたウェブサイトの制作は、特別な意味を持ったものになるはずです。

決まった目的に合わせて手軽に作る「プレタポルテ(大量生産された既製服⁠⁠」か。それとも顧客の要望に合わせた「オートクチュール(オーダーメイドによる一点物⁠⁠」か。ウェブサイト制作は、よりはっきりとした⁠2極化の時代⁠へと進み始めています。

おすすめ記事

記事・ニュース一覧