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

by Kota SAITO

Embed

Start on current slide

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試みアートディレクター／コミュニケーションデザイナー斎藤広太プロフィールデザイン事務所を経てコンセントに入社。入社後はデザイナーとして雑誌のエディトリアルデザインに携わり、その後、カタログや企業の広報ツール、サービスロゴ、営業ツール、大学の学部案内など、幅広い媒体のアートディレクションを担当。近年はUX/UIデザイン領域に活動の幅を広げ、サービスの体験設計やユーザー調査、アプリをはじめとするデジタルプロダクトの設計、サービスブランディングにも従事している。東洋美術学校非常勤講師。

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み PO（人間）価値判断と裁定 verifier 独立検証（PR ごとに起動・使い捨て） PM 設計進行と品質の運転手（常駐） ADR 単位の使い捨てセッション UXD UID 体験の正本管理（常駐）視覚整合（デザインシステムを持つ案件のみ） FSE 実装（常駐）

Slide 13

Slide 13 text

デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み PO GO/NOGO PM ミッション設計レビュー UXD 判断を仰ぐ報告実装 FSE verifier 検証依頼レビュー UID

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み編集デザインは情報の関係を設計する仕事何を伝えるか何を先に見せるか何を強く／弱くするかどんな順番で理解させるかどんな感情を残すか

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み案件ごとに、何を重視するかも変えた Purpose 目的に対して意味のあるデザインか Coherence 意味・表現・ルールに一貫性があるか Clarity 重要なことが明確に伝わるか Relevance ターゲット・媒体・ブランド・文脈に合っているか Structure 見る順番・情報の優先順位が適切か Identity 興味を惹き、そのブランドらしく記憶に残るか Focus 不要な情報や表現が削ぎ落とされているか Refinement タイポ、余白、整列、比率など細部まで精度があるか

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み媒体によって、ハーネスの効き方が違う正解の構造を記述しやすい UI 管理画面文脈で正解が変わる帳票広告グラフィック構造を守ることが品質につながりやすい領域と、  構造の選択そのものがデザインになる領域がある雑誌

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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