tagtec

Claudeに「デザインシステム作って」と依頼したら一発でそれっぽいものを作ってくれた。

広告LPを制作する際、どうしてもトーンがバラバラになりがちなのが悩み。そこで、AIと対話しながら「デザインシステム」を作ってみたら、結構なものが一瞬で出来上がった。こういうのをうまく活用し、更新性が低く工数ばかりがかさむ「不健全な制作体制」からは脱却したい。

デザインシステムの必要性を感じていた。

今、業務の中で、広告LPの設計をする際、AIと相談しながらやっているが、複数のLP設計をするとなると、どうしてもそのルールやトーンがバラバラになってしまいがち。

そこで、設計・モックを作るとしても、デザインシステムの定義があった方が良いな、と思いが強くなる。

必要な要素定義をしてからAIに相談してみようと思ったが。

デザインシステムを定義するにしても、まず「したいことをまずちゃんとまとめてプロンプト化しないと。」と思いがちだが、まずやりたいことをAIに伝える、という進め方もありだと思う。

AIもさらに賢くなっていて、そのプロンプトの情報で不十分だと思えば、質問を投げ返してくれる。
あとは、その質問に回答をするだけで、要件が定義されていく。(もちろん、程度の差はあると思うので、最低限の情報提示は必要)

あくまで設計なので、デザインやコーディングでルールを合わせてもらうのもありといえばありだが、クライアント側への見栄えとして良く無いし、モックからコーディングにそのまま着手できた方が作業工数減らせるはずなので、モック用のデザインシステム作成を以下のような形でAIに相談。(以下実際の会話)

Q&Aの部分は、上記画像では結果だけ表示されているが、実際は、AIが選択肢を複数提示してくれて、その中から選択した。

雑に依頼したらそれっぽいものを作ってくれた。

それで出てきたアウトプットがこちら。(画面キャプチャ)

結構やばない?

  • 英語の表示を日本語に
  • 絵文字を使うとAI生成ぽさが出るので使わない
  • フォントは基本ゴシックで、斜体は使わない

といった追加依頼で若干調整したけど、概ね必要な要素は定義されている印象。 上記は、ちょっとダークな高級路線だったので、背景白の爽やか路線のものも同じ要素で定義してもらった。

定義したデザインシステムを参照するところから始めれば、統一ルールのもとで成果物できそう。

こういうものがあれば、まずモックを作るとなった場合に、「このデザインシステムを参照するところからスタート」という依頼を始めに挟めば、モックごとにバラバラの見た目になることを防げるし、設計としての共通言語化を進めやすくなる。

いやー、これまで、結構な時間をかけて定義していたようなことが、一瞬でサラッと作られるので、効率化観点でのAIの破壊力は凄まじいですな。

まぁ、この定義されたデザインシステムをどう管理して、どうアップデートしていくか、といった課題はあるので、その辺りは模索していく。

今は個人で定義しているけど、本当は会社の関係者で共有し、それらメンバーの中でアップデートしていくべき。

デザインシステム用のgitリポジトリを作って、それをプルするところから開始できれば、コーディングルールの統一化も図れそうだしな。

今の仕事の進め方、制作物に対する売り上げの立て方は不健全だから変えたい。

正直、今関わっている広告LPの作りって、画像の男切り、テキストの画像化場所が多くて、更新性ということを考えられてない。

最初に作られたのが5年くらい前で、それに対して細かい更新の積み重ねをサグラダファミリアの如くされた結果が今なんだろう。

今のトレンドに合わせた作りにしておかないと、「更新面倒だからその分をそのまま作業費として上乗せして請求する」という状態が継続する。

そして、それはとても不健全な状態だと思っている。

  • 更新性高く作ったら、簡単に更新できるから更新費用が安く済む。
  • 複雑で更新性が低い状態のものを更新するとなると、作業量が増えるからその分更新費用が高くなる。

こういう状態は望まない。その更新作業そのものを劇的に下げられるなら下げた方がいい。 そこに大幅な時間を要しているとしたらそれは、無駄な時間。

効率化により、制作部分の売り上げが落ちる(請求しづらくなる)のはやむを得ないと思っている。

それよりもコンテンツコンサルとか成果へのコミットとかそのあたりのコンサル部分での価値を出したいというのが本音。

たぐ

システム会社7年、web制作会社20年を経て、今は、某web広告代理店勤務のおじさんです。 主には、webディレクター、プロデューサー歴が長い。ゲームと阪神タイガース好き。