デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み

Transcript

1. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み 株式会社コンセント 斎藤 広太

2. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み アートディレクター／コミュニケーションデザイナー 斎藤 広太 プロフィール デザイン事務所を経てコンセントに入社。 入社後はデザイナーとして雑誌のエディトリアルデザインに携わり、その後、カタログや 企業の広報ツール、サービスロゴ、営業ツール、大学の学部案内など、幅広い媒体のアー

   トディレクションを担当。近年はUX/UIデザイン領域に活動の幅を広げ、サービスの体験 設計やユーザー調査、アプリをはじめとするデジタルプロダクトの設計、サービスブラン ディングにも従事している。東洋美術学校非常勤講師。

3. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み

4. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み

5. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み CONCENTでのAI活用事例

6. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み CONCENTでのAI活用事例 ① Fes.

7. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み

8. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み

9. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み CONCENTでのAI活用事例 ② 業務アシスト用Chrome Extension

10. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み 今まで日々の稼働を業務管理サイト上で 登録していたものを Teams Botを経由して自動的に 登録することができる、 というChromeのアドオンを開発した

11. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み この開発のポイント 開発にあたってClaudeにロール（独立セッション）を設計。 各ロールが専門領域として知識を持ったうえで開発を実行することで、 AIの検討結果、意思決定・判断を可視化でき、 修正すべき点が明確になった

12. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み PO（人間） 価値判断と裁定 verifier 独立検証（PR ごとに 起動・使い捨て） PM

    設計 進行と品質の 運転手（常駐） ADR 単位の使い捨て セッション UXD UID 体験の正本管理 （常駐） 視覚整合 （デザインシステム を持つ案件のみ） FSE 実装（常駐）

13. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み PO GO/NOGO PM ミッション 設計 レビュー UXD

    判断を仰ぐ 報告 実装 FSE verifier 検証依頼 レビュー UID

14. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み 本題

15. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み CONCENTがデザインハーネスをつくるなら、
 何をハーネスするべきだろう？ 既存のルールやデザインシステムをAIに渡すだけでは、
 自分たちがやる意味はどこにあるのか

16. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み 自分たちが、長く培ってきたもの 雑誌 → カタログ → 広報物 →

    ブランド → デジタル ＝編集デザイン

17. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み 編集デザインは 情報の関係を設計する仕事 何を 伝えるか 何を 先に見せるか 何を強く／

    弱くするか どんな順番で 理解させるか どんな 感情を残すか

18. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み その判断こそ コミュニケーションデザイナーの 審美眼なのでは？ コミュニケーションデザインの審美眼 伝わる形と、惹きつける表現を 見極めるための判断

19. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み この審美眼をハーネスできないか？ 編集デザインで培った「判断」を、
 AIが使える形にできないか 編集デザインの知見 コミュニケーション デザイナーの判断 デザイン

    ハーネス アウトプット

20. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み まずデザインする前提となる文脈を整理 デザインブリーフ 目的 表現 対象者 ブランド メッセージ

    媒体・体験 情報設計 結果

21. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み 案件ごとに、何を重視するかも変えた Purpose 目的に対して意味のあるデザインか Coherence 意味・表現・ルールに一貫性があるか Clarity 重要なことが明確に伝わるか

    Relevance ターゲット・媒体・ブランド・文脈に合っているか Structure 見る順番・情報の優先順位が適切か Identity 興味を惹き、そのブランドらしく記憶に残るか Focus 不要な情報や表現が削ぎ落とされているか Refinement タイポ、余白、整列、比率など細部まで精度があるか

22. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み 出力を見ながら 判断ルールを追加していった 余白が狭い メリハリが弱い 余白のルールを追加 文字サイズ・ジャンプ率を調整 背景色を検討

23. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み

24. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み

25. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み Before After

26. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み でも、直したのにまだ違う 余白は増えた。
 見出しも強くなった。
 ルール上は改善している。

27. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み 「余白が足りない」は
 本当に余白の問題だったのか？ 何を最初に見せるのか。
 何を強く、何を弱くするのか。
 このチラシは何を伝えるためのチラシなのか。
 見る人は何を期待しているのか。

28. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み では、自分は何を見て 「違う」と判断していたのか 余白 ？ 文字サイズ ？ 色

    ？ 配置 ？

29. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み 審美眼は、要素の良し悪しではなく
 「関係」を判断することだった 目的 × 内容 × 前後関係

    × 相手 × 表現

30. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み コミュニケーションデザインは
 情報の「関係」を 編集する仕事なのかもしれない

31. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み では、文脈によって変わる「関係の判断」を
 どうハーネスするのか？

32. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み 媒体によって、ハーネスの効き方が違う 正解の構造を記述しやすい UI 管理画面 文脈で正解が変わる 帳票 広告

    グラフィック 構造を守ることが品質につながりやすい領域と、
 構造の選択そのものがデザインになる領域がある 雑誌

33. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み ルールではなく、Preferenceを残す？ Preference＝文脈と理由を伴った「選択の記録」 ルール 「余白を広くとる」 Preference 「この文脈では◦◦という判断」 今回は一覧性を優先するため、あえて密度を上げた

    前ページが強いからここでは抜く この写真は良いが今回は違う

34. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み 判断を繰り返すループが重要 AI / 生成物 判断する 違和感を見つける Preferenceとして残す

    判断理由を解釈する

35. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み 審美眼は、ルールの集合ではなく
 文脈の中で繰り返される 「選択のパターン」なのかもしれない

36. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み 実例を「文脈層」「検証層」へ 蓄積していくことで、 コミュニケーションデザインの審美眼を ハーネスに組み込んでいけると感じています

37. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み 最後に

38. デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み ありがとうございました！