AIに任せるのではなく、プロがAIを使いこなす。

生成AIの進化によって、Webサイトのデザインやコーディングは、これまでよりもずっと短時間でできるようになりました。

ソーイでは現在、AIをWeb制作の実務にどう活用できるか、さまざまな実験と検証を重ねています。私たちが目指しているのは、単にAIでWebサイトを作ることではありません。プロのデザイナーやコーダーがAIを使いこなし、これまで以上の価値をお客様に提供できる制作の仕組みを作ることです。

例えば、ページの構成やデザインの方向性を事前に設計し、それをもとにAIでデザインを生成。さらにデザイナーが修正を重ね、完成度を高めていく方法を検証しています。また、デザインだけでなく、その後のコーディングやCMSの構築まで、制作工程全体にAIをどう組み込むべきかを見直しています。

今回は、ソーイが現在取り組んでいるAI活用の方法と検証で得られたデザイン結果を公開します。また、このAI時代にWeb制作において大切にしている考え方もあわせてご紹介します。

先にお見せすると今回AIで作成したデザイン（架空の工務店）が下記です。

AIで作る前に、何を伝えるかを考える。

Webサイトを制作するとき、まず重要なのは、誰に何を伝えたいのか、どんな行動につなげたいのかを整理することです。

そのうえで、ページに掲載する情報や順番を決める「ワイヤーフレーム」、見た目の方向性を定める「デザインコンセプト」を作っていきます。お客様の事業やサービスを理解し、情報を整理して、どう伝えるべきかを考える。この工程は、AIを使う場合も変わらず大切にしています。

今回の検証でも、実際の案件を想定したワイヤーフレームとデザインコンセプトの資料を事前に用意しました。

デザインの生成には、ソーイで独自に開発しているWebデザイン用のAIスキルを活用しています。デザインのルールや制作手順をAIに伝え、一定の方向性に沿ってデザインを生成するための仕組みです。

AIに「いい感じのデザインを作って」と頼むだけでも、見栄えのよいものは生成できます。しかし、私たちが重視しているのは、AIが一度でどれだけ美しいデザインを作れるかではありません。

事前に設計した内容を、AIがどこまで正確に再現できるか。

そこを重要な評価基準にしています。正直なところ、独自のAIスキルはまだ改良の途中で、思ったように機能していない部分もあります。

それでも今回の実験では、事前にワイヤーフレームやデザインコンセプトを用意したことで、初期生成の段階から、たたき台として十分に検討できるデザインができました。

この経験からも、AIを使う場合こそ、事前の設計が重要だと感じています。

生成されたデザインを、プロの視点で修正する。

AIが生成したデザインを見て、第一印象では「いい感じだな」と思うことがあります。

しかし、実際にお客様のWebサイトとして使うためには、見た目の印象だけでなく、伝えたい情報が適切に伝わるかどうかを確認する必要があります。重要な情報が目に入りやすくなっているか。文章は読みやすいか。レイアウトや余白、文字の大きさ、写真の使い方が、目指している印象に合っているか。そもそもブランドアイデンティティを再現できているのか。

そうした点をデザイナーが確認し、必要な修正をAIに指示していきます。

今回の実験でも、AIによる初期デザインをもとに、デザイナーの視点から何度かAIで修正指示を重ねました。

最初の段階でもたたき台としては悪くありませんでしたが、細かな調整を繰り返すことで、さらに完成度を高めることができました。今回はそこまでやっていませんが、このAIで作成・修正したデザインはデザインソフトに取り込み可能なので、ここからさらにデザイナーが最終的なデザインとしてブラッシュアップする工程を組むことができます。

AIへの修正指示は、単に「もっとおしゃれに」「もう少しよくして」と伝えるだけではありません。何が課題なのか、どこをどう変えるべきなのかを具体的に判断し、指示する必要があります。こうした判断には、デザイナーとして培ってきた経験や技術が活きてきます。

AIの出力をそのまま完成品にするのではなく、プロが評価し、修正を重ねることで品質を高めていく。

私たちは、このプロセスを大切にしています。

デザイナーが編集可能なデザインデータへ。

AIでWebデザインを作る方法として、画像でデザインを生成し、それをもとにコーディングするアプローチもあります。一般的に画像で生成するとより創造性のあるデザインが作成可能で、LPやバナー制作には向いていると思います。

ただ、私たちが重視しているのは、AIで生成した後も、デザイナーが自由に編集・調整できることです。実際のWeb制作では、後から情報を追加したり、細かなレイアウトを調整する場面が多くあります。また、デザイナーが自身で直接デザインデータを編集し細かな調整をすることで、デザインのクオリティがぐっと上がります。

画像生成したデザインをコーディングに落とし込むこともできますが、そもそもコーディングを前提とせずに画像ベースでデザイを生成するとどうしても無理が生じ、工程的な無駄も多く発生します。

そこで現在、AIにHTMLとしてデザインを生成させ、それをFigma（デザインソフト）に取り込む方法を試しています。画像ベースだと編集が思うようにできないのですが、HTMLベースであればFigmaにデータとして編集可能な状態で取り込めます。

この方法自体は目新しいものではなく少し前からできていたのですが、HTMLベースでデザインを生成させる場合、画像ベースでの生成と比較してデザインクオリティの担保が難しいという点があげられます。かなり良くなってきていますが、どうしてもよくあるデザインやAIっぽさが残ります。

そこで、ソーイでは、AIで生成するHTMLベースのデザインを大幅にデザイナーの設計に基づき高品質な状態で生成できないか検証をしており、いい感じでできるようにはなってきています。それをFigmaに取り込み、デザイナーが直接細部まで調整することで、AIの力とデザイナーのスキルをかけ合わせた、従来よりより高品質なデザインをよりスピーディーに制作できるような工程を固められつつあります。

私たちが目指しているのは、単にAIでデザインを作ることではなく、プロのデザイナーが最後まで品質をコントロールできる制作フローを実現することです。

コーディングから、公開後の運用まで考える。

AIの活用は、デザイン制作だけではありません。デザインが完成した後、Webサイトとして動く形にするコーディングにもAIを積極的に活用することができ、これはすでに導入済みです。

ここでも重要なのは、AIにすべてを任せないことです。

コーダーがサイト構造や実装ルールを設計し、そのルールに基づいてAIがコードを生成する。生成されたコードは専門知識を持つ人間が確認し、必要な調整を行う。

こうした方法によって、制作の品質を確保しながら、作業時間を短縮できます。また、お客様にとって重要なのは、Webサイトを公開した後も無理なく運用できることです。

例えば、お知らせやコンテンツを更新するWebサイトでは、WordPressなどのCMS（コンテンツ管理システム）を導入し、管理画面から更新できる形で納品することができます。AIを活用した制作だからといって、特別な管理方法をお客様にお願いするわけではありません。

これまでと同じように、日々の更新や運用を続けられることも大切にしています。

設計から開発まで、制作工程全体を見直す。

ソーイが現在取り組んでいるのは、個々の作業をAIで効率化することだけではありません。

情報収集やワイヤーフレームの設計から、デザイン制作、コーディング、CMSの構築まで、Webサイトが完成するまでの工程全体を見直し、どこにAIを組み込むのが最も効果的なのかを改めて検証し直しています。デザイナーの視点だけでなく、コーダーの視点からも制作フローを考えることが重要です。

例えば、AIでデザインを短時間で生成できても、デザインデータ不備により、その後のコーディングに多くの時間がかかってしまえば、制作全体としては効率化できたとはいえません。（現代のWeb制作では、デザインデータの作り方によってコーディングの工数に影響がでます。）

だからこそ、各工程を個別に考えるのではなく、前後の工程とのつながりまで含めて検証しています。まだ試したいことや改善したい部分はたくさんありますが、実際の制作現場で無理なく使える方法を追求していきたいと考えています。

また、大事なことですが、その代償としてクオリティを下げることは絶対にしません。むしろAIはデザインにおける発想力の補助やコードの品質統一など、しっかりと設計して使うことによってクオリティを上げることができます。

考える時間は削らず、作業する時間を削る。

私たちがAIによって削減したいのは、Webサイトの品質を高めるために必要な時間ではありません。

お客様の事業を理解すること。情報を整理し、どう伝えるべきかを考えること。デザインの完成度を高めるために、プロの視点で判断し、調整すること。

こうした工程は、AIを活用する場合においても大切にしたいと考えています。

一方で、AIによって効率化できる作業は積極的に効率化し、そこで生まれた時間を、よりよいWebサイトを作るために活用していきたいと思っています。

また、制作工程を効率化することは、制作コストの削減にもつながります。

品質を妥協するのではなく、制作の進め方を変えることで、より合理的な価格でWebサイトを提供したい。

これも、私たちがAIを活用する大きな目的の一つです。

一部工程ではすでにAIを積極活用していますが、クオリティを維持あるいは向上しつつ、より制作コストを下げるための工夫として、実験と検証を続けていきます。これまで培ってきたWeb制作の経験とAI技術を組み合わせることで、お客様に提供できる価値をさらに広げていきたいと考えています。