背景：デザインのハーネスという論点
ClaudeやCodexなどのAIを使い、デザインからWebページをつくる取り組みが広がっています。一方で、AIによる実装の質は、使う人の力量に大きく左右されます。アニメーションをどう実装に落とし込むか。どこを、どう直してほしいと伝えるか。こうした判断を言語化できるデザイナーほど、AIからよい結果を引き出せるからです。
その結果、制作の現場では次のような課題が生まれていました。
- 納品後にお客様がページを更新したくても、デザイナーに頼まなければ質を保てない
- デザイナー以外がAIで実装しようとすると、試行錯誤が増え、トークン代がかさむ
- AIの活用が一部のデザイナーの力量に依存し、属人化している
AIでデザインを実装する時代に、その質を支える「ハーネス」をどうつくるか。これが、今回の研究開発の出発点です。
取り組み：GRAFFITY HARNESS Coreでつくる、デザイン開発のハーネス
LAMP合同会社は、Web制作・UI/UXデザイン・Webによるブランド構築から、AIを活用したクリエイティブ制作・AI駆動開発までを手がけるデザイン会社です。GRAFFITYは、LAMPへのヒアリングを重ねながら、GRAFFITY HARNESS Coreを活用したデザイン開発のハーネスを設計し、研究開発に伴走しています。
- マルチエージェントのワークフロー設計：デザインから実装までの工程を、LAMPの制作の進め方に合わせて、複数のエージェントが分担するワークフローとして設計しています。
- 意思決定ログの記録：GRAFFITY HARNESS Core独自のログフォーマットで、各エージェントの判断を記録しています。
- 記憶層の整理と活用：ログから得られた知見を記憶層に整理し、次の制作に生かします。
- ハーネスの自己改善：記録したログをもとにハーネス自身が判断し、記憶層を更新します。あわせて、ワークフローのプロセスそのものも改善していきます。
実践：GRAFFITYのコーポレートサイトのリニューアル
このデザインハーネスは、GRAFFITY自身のコーポレートサイトのリニューアルにも活用しています。デザイナーではないメンバーがFigma上でデザインしたページを、ハーネスを通して、高い品質で実装することができました。
一方で、トークン消費の削減はまだ道半ばです。記憶層とワークフローの改善を重ねながら、引き続き取り組んでいきます。
目指す姿
優秀なデザイナーの判断が仕組みに残れば、デザインの実装はもっと開かれたものになります。
- トークン消費を抑えながら、安定した品質で実装できる
- デザイナーでなくても、同じ水準の実装ができる
- 納品後の更新も、お客様自身の手で進められる
今後について
本取り組みは現在、研究開発の段階にあります。LAMPとともに検証を重ね、トークン消費の削減を含め、デザインのハーネスがデザイン実装にどう役立つのか、その示唆を発信していく予定です。取り組みの詳細は実績ページでもご紹介しています。
デザインハーネスの導入をご検討の方へ
AIでのデザイン実装の質を、特定の人に頼らず保ちたい。デザイナーの判断を、チームやAIに受け継ぎたい。そうしたお悩みがあれば、お気軽にご相談ください。御社の制作の進め方に合わせて、デザインハーネスの設計から導入・運用まで伴走します。
デザインハーネスについて相談する →
会社概要
- 社名：Graffity株式会社 / Graffity Inc.
- 代表者：代表取締役 森本 俊亨
- 設立：2017年8月
- 所在地：東京都目黒区青葉台4丁目7-1 プラトーヴェール9階
- 事業内容：AX（AIトランスフォーメーション）支援（AXコンサルティング／AXソリューション）、AIハーネスの研究開発
- コーポレートサイト：https://graffity.jp