近年、生成AIの急速な進化を背景に、Webサイトのデザインツールにも生成AI機能が搭載されるようになりました。既存のデザインツールに生成AIを組み合わせることで、これまで専門知識が必要だったWeb制作が、より多くの人にとって身近なものになりつつあります。

しかし、AI搭載をうたうデザインツールの中には、生成結果の品質にバラつきがあったり、ブランドのトンマナを守れなかったりと、実務での活用に課題を抱えるサービスも少なくありません。ツール選定を誤ると、期待した成果が得られないまま時間とコストを浪費してしまいます。

本記事では、ノーコードWebデザインツールの「Studio」を展開するStudio株式会社様に、Webデザインツールにおける生成AI機能の実態や導入の効果、AIと人間の理想的なデザインワークフローなどについて、詳しくお話を伺いました。AIとノーコードを組み合わせた新しいWeb制作の可能性と、今後のWebデザインの未来について紐解いていきます。

ベンダー情報

Studio株式会社　執行役員 COO　吉岡 泰之 氏

生成AIを使ったデザインツールで何ができるようになる？

Q：Studioの生成AI機能ではどんなことができるようになるのか？

　

弊社が提供しているAI関連の機能は、大きく分けて2つです。従来のStudioエディターに搭載された5つの個別タスクを自動化するAIエージェントと、ゼロからWebサイトを構築するためのAI専用エディター「Studio Assistant」の2つがあります。

従来のStudioエディター		Studio Assistant
Image AI	ページ内の画像生成や画像編集	Draft Build	プロンプトを入力するだけでAIがWebサイトを自動で生成してくれる
Text AI	サイト内のテキスト変更や英語翻訳
Auto Responsive	PC版→SP版などのレイアウト調整
Layer Rename	不揃いがちなレイヤー名の自動整理
タイトル・ディスクリプション生成	ページタイトルや説明文の自動生成

従来のStudioエディターに搭載された5つのAIエージェントについては、いずれもクリエイターが労力を割いていた作業をAIでサポートし、業務効率を高めることを目的としています。

一方で「Studio Assistant」のメイン機能である「Draft Build」は、プロンプトを入力するだけでWebサイトを自動で構築できるというものです。生成速度が早くクオリティが高いのが特徴で、デザイナーやディレクターの業務に使うことを想定しています。

Q：どういったニーズから生成AI機能の実装に踏み切ったのか？

　

そもそも、日本のビジネスの約99%を占める中小零細企業にとって、平均単価70万円といわれるWebサイト制作は、資金面や技術面において制作のハードルが高いという現状があります。もともとStudioには、ノーコードにすることで、そうした技術的なハードルを下げ、Webサイトをビジネスに活用できる人や企業を増やしたいという思想がありました。

近年は、LLM(大規模言語モデル)やエージェント系が発達し、AIでコードを出力できるようになりましたが、実際に30個ほどのAIツールを試したところ「実務で使うには早い」や「ここが不便」というポイントが見えてきました。そこで、プロのデザイナーが使えるAIとして最適な要件定義をやり直し、国内のWeb制作事業者向けに「Studio Assistant」を立ち上げるにいたりました。

生成AIを使ったデザインツールは本当に現場で使える？

Q：クリエイティブの品質は大丈夫なのか？

　

一般的なLLMを用いてサイトを作成すると、通常はコードが出力されるため、AIを介してでしか編集ができない、あるいはコードを直接書き換えなければならないというデメリットがあります。デザインを完全に言語化することは難しく、AIに抽象的な指示を出した結果「思っていたものと違う」というズレが生じやすいのがデザインAIの課題でした。

このズレを解消するため、Studioでは80点のベースをAIがスピーディに生成し、その後の細部にこだわる「クラフト」の工程を、人間がノーコードで直感的に調整できるシームレスな環境を提供しています。AIが生成したデータをそのまま手作業で自由に編集できるため、現場が求める高い品質のクリエイティブへと仕上げることが可能です。

Q：しっかりと意味のあるデザインになるのか？

　

技術的には、生成されたサイトのURLをLLMに渡してデザインの意図を説明させることは可能ですが、我々としては、あくまで「サイトを作るタスクの効率化にAIを活用する」という発想で開発を行っています。そのため、あえてデザイン説明などの機能は搭載せず、AIは制作タスクを効率化・サポートするツールとして、明確に役割を分担しています。

生成AIを使ったデザインツールのデメリットや考えられるリスクは？

Q：既存のブランド(色やトンマナ)は守れるのか？

　

現時点でも、企業のロゴを渡せばAIがデザインのDNAを読み取って生成することは可能ですが、プレーンな状態で使うと、意図しないデザインが生成されることもあり、まだ十分とは言えません。効率的に制作を進めると、どうしてもデザインが似通ってきたり均一化してきたりする傾向もあります。

この課題を解消するために、企業が使うべきコンポーネントやスタイルをあらかじめAIに学習させ、その通りにしか生成しないガバナンス機構の開発を進めています。その会社が持つアイデンティティやDNAをいかに整理して綺麗な状態でAIに渡せるかが、ブランド保護の鍵になると考えています。

Q：AIのモデル学習にデータが使われることはないのか？

　

現在提供しているバージョンに関しては、ユーザーのデータを生成AIが学習するといったことはありません。ただし、将来的には過去のユーザーデータをある程度まで抽象化した上で、モデルの強化や学習に活用する可能性があるという旨は、あらかじめ利用規約に明示しています。

また、生成物の著作権についても心配の声があるかと思いますが、これは生成過程における人の関与の程度や、対象となる表現の内容によって判断が分かれます。UIデザインについても、著作権が発生しないケースがある一方で、一律に著作権が発生しないとは言えず、ケースごとの検討が必要です。

生成AIを使ったデザインツールで制作工数はどれくらい削減できる？

Q：人間による手直しはどれくらい発生するのか？

　

AIが生成したものを手直しせずにそのまま世に出してしまうと、全体的なアウトプットの品質は下がる傾向にあります。ただし、プロンプトの渡し方やサイトの目的によっては、手直しなしの「取って出し」で成立するパターンも存在するでしょうから、ケースバイケースです。

理想的なフローは、AIで70点から80点の土台を出力した後に、人間ならではの経験値を活かしてサイズや色の変更といった手直しを加えることです。AIで100点満点を目指す必要はなく、人間とAIがそれぞれの得意領域を担うことで、高品質なアウトプットを効率よく実現できます。

Q：人間の工程とAIの工程をどう切り分けるべきか？

　

AIは大量生成を得意とする一方で、デザインの細部を言語化して意図通りに再現することは苦手です。そのため、AIには量とスピードを任せ、人間は質を高める工程に集中するのが、双方の得意領域を活かした工程設計といえます。

この役割分担を実現するため、Studioでは以下の2段階で工数を削減することができます。具体的な圧縮成果は状況によって異なるものの、従来の約1/4程度の工数でWebサイト制作を完了できる計算です。

①：ノーコード化による工数の圧縮

HTMLやCSS、JavaScriptのコーディングに加えて、サーバーやファビコンなどの準備作業をノーコードに置き換えることで、これまでの制作工数を約半分程度に圧縮します。

②：AI Draft Buildによる工数の圧縮

ノーコード化で圧縮された工数に対して、AIがサイトの土台を自動で生成します。人間による手直しの時間を含めても、工数をさらに半分ほどに削減することが可能です。

生成AIを使ったデザインツールでより高品質なデザインを作るには？

Q：AI生成物の修正コストを下げるためのコツとは？

　

もちろん、事前に情報を整理してプロンプトを丁寧に書くことで精度を上げるという方法もあります。しかし、人間の脳を直接インプットできる訳ではないので、AIが思い通りのデザインを一発で生成するのはかなり難しいといえます。

1つの生成物をブラッシュアップしようとするから「修正」という工程が発生するのであって、たくさん作って気に入らないものを捨てていくという流れにすれば、修正という概念自体がなくなります。Studioが生成速度の速さや複数案の同時生成にこだわっているのもこのためです。

また、最終的にはノーコードで自由に手を加えられる環境が整っているため、プロンプトを作り込むなど修正コストをあらかじめ下げる努力に過度に神経を使わなくても、後から人間が直接触れるという選択肢が常にあります。この安心感も、Studioならではの強みといえるでしょう。

Q：生成結果はプロンプトでコントロールできるのか？

　

他社のAIツールの中には、精度を上げるためにプロンプトで細かく出力内容を調整できるものもあります。しかし、これは裏を返せば「複数案を作ろうとすれば、それだけ大量の文章を書かなければならない」ということであり、結果それ自体がクリエイティビティを阻害することになってしまいます。

我々が重視しているのは、精度の高い1案を作り込むよりも、80点の生成物を瞬時に複数出力し、その中から人間が良し悪しを判断するというアプローチです。プロンプトへの依存度を下げながら「当たるまで作り、外れたら捨てる」という発想で、スピーディに最適なデザインへと辿り着くことができます。

生成AIの登場によって今後のWebデザイン制作はどう変化していく？

Q：デザイン制作の変化と生き残るデザイナーに求められる能力とは？

　

これまでは、アイデアを形にするための技術的なハードルや資金面の制約によって、デザイン業務そのものが重厚なプロセスとなっていました。しかし、数分かかっていた作業がわずか10秒で完了し、部分的な再生成も即座に行える環境が整うことで、デザイナーはストレスなくクライアントとの確認作業を進められるようになります。「これは違う」と思えばすぐに作り直せるため、より多くのバリエーションを試し、最適なデザインを導く業務スタイルへと変化していくでしょう。

こうした変化の中で、デザイナーの進む道は大きく2つに分かれると考えています。1つは、AIを活用して素早く、多くの制作をこなす「量産型」の道。もう1つは、AIによる均一化が進む世界だからこそ、希少価値が高まる高品質なブランドデザインを追求する「クラフト型」の道です。どちらの道を選ぶにせよ、早めに自分の適性を見極めてポジションを定めることが重要です。

いずれの道においても、共通して求められるスキルがあります。まず、AIの進化に乗り遅れないために最新の情報をキャッチアップする力。次に、人間と仕事をする以上、常に価値を生み出せるホスピタリティや人間力。そして、量産型であれクラフト型であれ、多くの生成物の中から優れたものを見極めるための「審美眼」が必要です。特定の業界や分野への深い専門性も、他者との差別化において大きな強みになります。

Q：プロダクトとして今後どのような価値をユーザーに提供していくのか？

　

今後はノーコードでの制作という強みをベースにしつつ、必要な部分にAIをより深く統合していく方針です。社会全体でWebサイトの数がさらに増加したとき、求められるのは単にサイトを作る機能だけではないでしょう。特に「ビジネスとどれだけシームレスに接続できるか」や「ブランドを守りながら運用効率をどれだけ高められるか」といった点が重視されるようになるだろうと予測しています。

そのため、Webサイトを構築するという領域だけにとどまらず、その周辺の機能や運用まわりのサポートをしっかりと強化していくロードマップを描いています。作るだけでなく、ビジネスの成長に直結し、ブランドを育てるためのプラットフォームとしての価値を提供し続けていきたいです。

まとめ：ノーコード×生成AIが切り拓く、Webサイト制作の新しいかたち

Studioが提供する生成AI機能の最大の強みは、AIが生成した80点のドラフトを、人間がノーコードで直感的に仕上げられるシームレスな環境にあります。この「AIドラフト×人のクラフト」という役割分担により、従来通りのクオリティかつ半分以下の工数でWebサイトを制作できることは、特に中小零細企業にとって大きなメリットとなるでしょう。

生成AIの登場によってWeb制作のハードルは大きく下がり、デザイン業務のあり方そのものが変わろうとしています。Studioはその変化の中で「作るだけでなく、ビジネスの成長に直結し、ブランドを育てるプラットフォーム」としての進化を目指しています。ノーコード×生成AIの可能性をぜひ体験してみてください。