デザイナーがAIでコードを書く時代、事業会社のサイト制作はどうなる？

はじめまして、スタメンでデザイナーをしているおはるです🌱

先日、名古屋で開催された「Studio Meetup vol. 35 in 愛知」というイベントで、「Studioを自社で運用するって、実際どうなの？」というテーマで登壇させていただきました。

このnoteでは、登壇内容を少しアレンジして、スタメンのサイト制作・運用がStudioでの体制からAIコーディングでの対応へと移り変わっていること、そしてその変化の中で起きていること、気をつけるべきこと、今感じていることを整理しておこうと思います。

同じ変化の入り口に立っている他社のインハウスデザイナーの方の参考になれば嬉しいです🌸 また、同じ挑戦をしている会社さんがいたら、ぜひ情報交換させてください。

StudioからAIコーディングへ

スタメンは「一人でも多くの人に、感動を届け、幸せにする。」をミッションに、TUNAGを中心に複数の事業・複数のサイトを運営しており、そのほとんどを外注せず自社で作り、運用してきました🛠️

サイト制作の体制としては、マーケティング部からサイトデザインを依頼され、デザイン部がデザインし、マーケティング部に所属するエンジニアが実装する、という流れでここまで進んできました。
これまでは依頼のほとんどがマーケティング領域から来ていましたが、事業成長とともにいくつもの事業が展開されていく中で、マーケティング部以外からもサイト制作の依頼が増えてきています🔥

ブランドサイトのような基幹サイトはこれまで通りこのエンジニアが関わる体制で作る一方、LPやイベントサイトのように「スピードが求められる」「本数が多い」ものには、ノーコードツールの「Studio」を採用してきました。決め手は、デザインをほぼそのまま形にできる制作スピードと再現性の高さ、パーツを使い回せること、CMSが組めてデザイナー以外でもメンテナンスしやすいこと。

そして最近、これがもう一段先に進み、デザイナーがClaude Codeで直接コードを実装するようになってきています。最初はエンジニアがClaude Codeで実装し、つまずきを一つずつ言語化してドキュメント化した結果、今では「誰でも日本語の指示だけでLPを実装・修正できる環境」に育っています。私自身も、この方法でLPを実装しています。コードは一行も書いていません。Figmaのリンクを渡すか、「この余白を狭めて」など感覚的な言葉で頼むだけです。

Studioというツールの中で完結していた"デザイナーが自分で作る"が、ツールの制約を超えて本物のコードの領域まで広がってきた。これが、最近の一番大きな変化です。

デザイナーもコーディングまでできるべきなのか

エンジニアも工数を省けるだけでなく、デザイナーの私自身も、デザイナーがAI実装でコーディングまでできることに、大きなメリットを感じています。理由は2つです。

ひとつは、意図がそのまま形になること。デザインと実装が別の人・別の工程に分かれると、その受け渡しの間で「考慮漏れ」が起きやすくなります。実装の段階になって初めて気づく細部を別の人が埋めると、意図とズレたり確認のやりとりが増えたりしがちです。

もうひとつはスピード。工程が分業されているより、デザイナーが一気通貫で担うほうが、受け渡しのコストがなくなる分、単純に速い。その分、事業の要望にスピードをもって応えやすくなる。

この流れは、ツールがStudioでもAIコーディングでも変わらず、これからも強まっていくと思っています🔥

境界が溶けることで見えてきた弊害

とはいえ、いいことばかりではなく、気をつけるべきことも見えてきています。

Studioでは、サイトをデザイナー1人で作れてしまいます。ビズサイドも、サイト制作の進め方に詳しいわけではないことが多く、「とにかく作りたい」という要望だけを持ってくることがあります。そのとき、デザイナーだけで完結できるからといって、要望にそのまま応えてしまうのは要注意だと思っています。

実際に、新しい事業が立ち上がったばかりの頃、ビズサイドからデザイナーへ直接サイト制作の依頼が来て、そのやりとりだけで完結させて公開したサイトがありました。デザイナーとしては「ちゃんと公開できた」つもりでいたのに、運用のフェーズに入ってから、検索エンジンに正しくインデックスされていなかったことや、コンバージョンを追うための計測タグが入っていないなど、「公開はできたけれど運用としては破綻している」という状態になっていました😅 

それはたぶん、これまでエンジニアがSEOや計測タグの設定など、デザイナーが意識すらしていなかった作業を裏側で黙ってやってくれていたからです。デザイナーが実装まで一人でできるようになるということは、その"見えなかった仕事"を肩代わりしてくれていた人がいなくなる、ということでもあります。

実装まで一気にできてしまうからこそ、ビズサイド・デザイナー・エンジニアの3者の住み分けを、ちゃんと明文化しておく必要があると学びました。

だからこそ、住み分けを明文化し、"見えない仕事"を可視化する

今回のAIコーディングの仕組みには、エンジニアが最初からルールを組み込んでくれました。デザイナーが日本語で指示して実装を進めるのは、レビュー依頼を出すところまで。本番への反映は必ず別の確認者が行い、マージやデプロイ、秘匿情報が入ったファイルを読むこと、担当外のサイトを触ることは、デザイナーもAI自身も最初からできないようになっています。

今までは、こうしたルールを蓄積していく場所がありませんでした。何かが起きても個人の経験として残るだけで、次の案件にはうまく引き継がれない。AIコーディングのありがたいところは、まさにここが違うことです。
つまずきや教訓をルールやドキュメントとして蓄積できて、使うたびに仕組みごと賢くなっていく。これが一番大きな違いです💡

仕組みとは別に、もうひとつ大事だと思っているのが担当者間の連携です。AIの到来で業務がどんどん統合されていく中で、「これまで必ず誰かを通していたのに、今は通さなくても済んでしまう気がする」という場面がこれから増えていくと思います。ただ、そんな時こそ実は要注意のサインです🚨
だからこそ、誰が何を担うのかを一つひとつ明文化しておくことが必要なんだと思っています。

デザイナーもコーディングまでできるようになるのは、これからますます当たり前になっていくはずです。私たちもまだ全部の答えを持っているわけではなく、始まったばかりだからこそ楽しみでもあります😊
同じようにAI活用に挑戦している会社さんがいたら、うまくいっていることもつまずいていることも含めて、ぜひ情報交換させてください🌸

✉️お知らせ

採用情報

スタメンでは現在デザイナーを積極採用中です🔥

今年もDesignshipにスポンサーします！

ブースと登壇をしますので、ぜひ当日をお楽しみに！💫