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

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

ベンダー情報

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

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

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

A：StudioのAI機能を活用することで、デザイン制作における多くの作業をAIに任せられるようになります。デザイナーはより創造的な業務に集中できるでしょう。

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

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

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

Q：Studioはなぜ生成AI機能の実装に踏み切ったのか？

A：クリエイティビティを損なうことなく生産性を高め、デザイン業務全体の効率化につなげることを目的に、生成AI機能の実装に踏み切りました。

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

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

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

Q：生成AIを使ったデザインツールではクリエイティブの品質は大丈夫なのか？

A：実用レベルの品質を担保することができます。個人的な主観にはなりますが、生成AIはおおよそ「80点」のクオリティを持つWebサイトを生成することに向いています。

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

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

Q：生成AIを使ったデザインツールではしっかりと意味のあるデザインになるのか？

A：意味のあるデザインを生成することは可能です。ただし、そのデザインの意図を説明する役割はAIではなく、人間のディレクターが担うべきものであると私たちは考えています。

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

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

Q：生成AIを使ったデザインツールでは既存のブランド(色やトンマナ)は守れるのか？

A：現時点では、ブランドトーンを完全に守ることは難しいため、現在改善に向けた対応を進めています。

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

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

Q：生成AIを使ったデザインツールではAIモデルの学習にデータが使われるのか？

A：現時点では、ユーザーが入力したデータがAIのモデル学習に使用されることはない仕様になっています。

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

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

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

Q：生成AIを使ったデザインツールでは人間による手直しはどれくらい発生するのか？

A：ほとんどのケースで、人の手による最終的なチェックや微調整といった手直しを推奨しています。

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

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

Q：生成AIを使ったデザインツールでは人間の工程とAIの工程をどう切り分けるべきか？

A：全体の80%をAIに任せ、残り20%の細部を人間が担当するというのが理想的な切り分けです。

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

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

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

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

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

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

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

Q：生成AIを使ったデザインツールで生成物の修正コストを下げるためのポイントとは？

A：まずは「修正する」という発想を手放し「たくさん作って当たりを選ぶ」というアプローチに切り替えることが、高品質なデザインを生み出すための第一歩です。

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

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

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

Q：生成AIを使ったデザインツールの生成結果はプロンプトでコントロールできるのか？

A：もちろん可能ですが、そもそもStudioはプロンプトの入力量を最小限に抑えられるように設計されているため、詳細なプロンプトを入力する必要はありません。

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

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

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

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

A：今後はAIが適材適所に配置され、誰もが簡単に高品質なWebサイトを作れる時代へとシフトしていくのではないかと考えています。

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

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

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

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

A：私たちとしては「作るだけでなく、ビジネスの成長に直結し、ブランドを育てるプラットフォーム」としての価値を提供していきます。

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

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

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

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

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

投稿 ノーコード×生成AIでWebサイト制作はどう変わる？Studioに聞くデザイン業務の効率化と未来 は ITreview Labo に最初に表示されました。

そこでこの記事では、使いやすさの向上に欠かせないUI・UXの重要性と考え方について解説します。必要な対策やUI・UXの改善に役立つデザインツールについてもご紹介しますので、ぜひ参考にしてください。

Webサイトやアプリのデザインに重要なUI・UXとは？

UIとはユーザーインターフェース（接点）、UXとはユーザーエクスペリエンス（体験）という意味を持ちます。

UIは、Webサイト・アプリに用いるデザインなど、利用者の目に触れるすべての情報が対象です。文字として認識するCUI、グラフィックして認識するGUIなど複数の要素を持ち、操作性や視覚性に大きな効果をもたらします。

一方UXは、ユーザーがWebサイトやアプリを通して感じる体験や経験が対象です。提供されるサービスにクオリティの高さを感じたり、記載されている文章に読みやすさを感じたりと、利用するうえで感情を動かす要素がUXに当たります。

またUI・UXは同様のものだとイメージされがちですが、UIは視覚・操作といった要素、UXは使いやすさといった経験が関わる要素をもつ異なるジャンルです。ただし、Webサイトやアプリ制作においてはどちらも必要な要素であるため、同時に覚えるのが望ましいといえます。

UI・UXの関係性

サービスを制作するとき、UI・UXが横並びの要素だと考えられがちです。しかし、正確にはUXの中にUIの要素が含まれているイメージが正しいと覚えておきましょう。

まずUXは、ユーザーが感じる体験や経験のために必要な考え方です。この体験を感じるためには、Webサイトやアプリのデザインやフォントを検討する必要があります。つまり、サービス提供の大枠としてUXがあり、その中の細かい要素にUIが散りばめられているのです。

ただし注意点として、UIを高めればUXが高まるのかというとそうではありません。UXを満足させるためには、UIの他にも次の要素を組み込む必要があります。

• 成約のために必要なリンクの配置は正しいか
• ユーザーニーズを満足できるコンテンツか
• UIに特化しすぎて機能性が劣っていないか

IT化の進行に伴い、ユーザーが求める要素は複雑化している状況です。そのため、UI・UXを満足させることはもちろん、利用者に寄り添ったサービス開発が欠かせないことを覚えておきましょう。

WebサイトやアプリのUI・UXはどのような場面で必要とされる？

UI・UXはWebサイトやアプリ制作に欠かせない考え方ですが、新規サービスの新規開発時および既存サービスの改善時に必要とされるのが一般的です。それぞれ異なる動きとなるので、各項目について詳しく解説します。

サービス・システムの新規開発時

これからWebサイトやアプリ制作を開始する場合、開発の進行に合わせてUX・UIについての検討がなされます。このとき必要となるのが、事前のユーザーニーズ分析です。例えば、同業他社が提供するサービス、過去の事例などを参考にUI・UXについての検討が重ねられます。

また、Webサイトやアプリの公開後は、継続的に利用者の動きや数値などを分析しつつUI・UXを改良していくことが重要です。世の中の変化に合わせてユーザーニーズも変化していくため、サービス提供後の分析が欠かせません。

既存サービス・システムの改善時

なかには、UI・UXのことを検討せずにサービス開発を行ったWebサイトやアプリもあります。この場合には、既存サービスの見直しを行って、UI・UXを改善する必要があります。

これらの対策をする際にも、まずはユーザーニーズの分析を行います。全体的な改良方法は同じですが、サービスのデザインを現代のものに変更したり、読みやすさや使いやすさに改良を加えたりするのが一般的です。また開発と同時進行で実施できないため、新規開発時に比べて反映できるUI・UXに限界があることも理解しておく必要があります。

UI・UXを向上させるために必要な対策

UI・UXを向上させるために、主に次のような項目について対策することが重要です。

• サービスレイアウト
• 成約ボタンの配置
• テキスト（フォント・カラー）
• 入力補助

基本的には、ユーザーが見る・触れる部分はすべてUI・UXの対策が必要です。サービスを提供するユーザーのペルソナ（人物像や特徴）を想定し、ユーザーが求める使いやすさをサービス全体に反映することが望まれます。

また上記項目を網羅するためには、Webデザインツールを使用するのもおすすめです。サービスページの作成や編集、更新が実施できることはもちろん、ビジュアル対策の効率を高められるため、結果的にUI・UXを向上できます。

サービスのUI・UXを高めるポイント

WebサイトやアプリのUI・UXを向上させるためには、考え方を理解して計画的に反映することが重要です。このときUI・UXという2つの要素の品質を決めるのは次のポイントとなります。

• ゴール設定を行う
• 仮説と検証を繰り返す
• 継続的な改善を行う

まずは制作しているサービスをどれくらいのユーザーが利用し、どれくらいの収益を上げられるかゴール設定を行いましょう。設定する項目は利用者数、収益額など明確な数値で表しておけば、ゴールから逆算して必要な対策が見えてきます。

またUI・UXの検討・向上において、ユーザーニーズは動き続けるものなので正解というものがありません。よって、仮説と検証を繰り返しつつ、どのようなWebサイトやアプリならユーザーに利用してもらいやすいのか分析することも大切です。

Webサイト・アプリ公開後もUI・UXの分析が欠かせません。サービス運営と同時並行で、利用者の分析はもちろん、当初設定したゴールを達成できたのか確認して不足があった場合には、もう一度仮説・検証を立て、改良を実施する必要があります。

UI・UXはサービス提供の質を大幅に向上させる

UI・UXはWebサイト・アプリの品質を高め、利用者に「使いやすい」を提供する重要な要素です。どちらの考え方も欠かすことができず、サービスを提供する際には必ず2つの要素で満足する必要があります。

Webサービスを運営しているが、イマイチユーザーが増えないとお悩みでしたら、サイトやアプリの全体設計から見直してみることも一手です。難易度は非常に高いものですが、日々新しいサービスが誕生し、大なり小なりサービス改善のための更新が繰り返されています。ユーザーにとって必要とされるサービスの開発に真摯に向き合いましょう。

投稿 Webサイトやアプリにおけるデザインの重要性とは？UI・UXの考え方を解説 は ITreview Labo に最初に表示されました。