【非エンジニア編第6回】デザイナーがClaude Codeで実装との橋渡しをする

前回の記事では、スクラムマスターがふりかえりを進行する際の活用法を紹介しました。

第2部の3回目は、

デザイナー

の活用法です。

デザイナーとエンジニアの間には、言葉にしにくい「感覚のズレ」が生まれやすいものです。

デザインの意図が実装に反映されない
「なんか違う」をうまく言語化できない
実装上の制約が、デザインのどこに影響するのか予測できない

Claude Codeを使って、このズレを減らす方法を紹介します。

デザイナーとエンジニアの間で起きがちなズレ

現場でよく聞かれる声を整理すると、以下のようなパターンがあります。

感覚を伝える言葉が抽象的すぎる
「もっと洗練された感じにしてほしい」
→ エンジニアにとって、何を変えればいいかわからない
デザインの意図が伝わらない
余白や配置に意味を持たせていても、その理由が実装側に伝わらない
技術的な制約を理解しないまま進めてしまう
「このアニメーションは簡単に実装できるはず」
と思っていたら、想定以上に工数がかかることがわかる
フィードバックが感覚的になる
実装後の確認で「なんか違う」としか言えず、修正の方向性が定まらない

これらは、デザイナーの感性の問題ではなく、伝え方の設計の問題であることが多いです。

Claude Codeは「感覚」を「言葉」に変換する道具

デザイナーがClaude Codeを使う際の基本スタンスは、

自分の感覚を、実装者に伝わる言葉に変換してもらう

ことです。

コードを書いてもらうことが目的ではなく、

感覚的な表現を具体化する
デザインの意図を言語化する
技術的な制約を事前に把握する

という使い方が中心になります。

実例:デザインの意図をエンジニアに伝える

ここでは、アプリのボタンデザインを変更する場面を例にします。

ステップ1:感覚的な要望を言語化する

デザイナーの頭の中には、明確なイメージがあることが多いですが、それを言葉にするのは意外と難しいものです。

【質問例】
アプリのボタンデザインについて、エンジニアに伝えたいことがあります。
以下の感覚を、実装に反映しやすい具体的な言葉に変換してください。

「今のボタンは硬い印象があるので、 もっと親しみやすい雰囲気にしたい」

Claude Codeが、以下のように変換してくれます。

【回答例】
「硬い印象」「親しみやすい雰囲気」は、以下のような具体的な要素に分解できます。

- 角の丸み:角丸の半径を大きくすると、柔らかい印象になる
- 色味:彩度を少し下げる、または暖色系にすると親しみやすさが増す
- 影のつけ方:強い影は硬さを感じさせるため、
  影を弱める・ぼかしを大きくすると柔らかく見える
- タップ時の反応:押した瞬間に軽く縮む・弾むような
  アニメーションを加えると、親しみやすさにつながる

これらのうち、どの要素を変更したいかを具体的に伝えることで、
実装側もイメージを掴みやすくなります。

抽象的な言葉を、実装可能な単位まで分解してもらうことができます。

ステップ2:デザインの意図・理由を言語化する

見た目の指示だけでなく、「なぜそうしたいのか」を伝えることも重要です。

【質問例】
以下のデザイン変更について、エンジニアに伝える際に添えるとよい「意図・理由」の
説明を考えてください。

【変更内容】
ボタンの角丸を大きくし、影を弱くする

Claude Codeが、以下のように提案してくれます。

【回答例】
「見た目を変えたい」という説明だけでなく、
以下のような意図を添えると伝わりやすくなります。

「初めて使うユーザーにとって、
 硬い印象のUIは操作への心理的なハードルになりやすいため、
 柔らかい印象に変更することで、
 気軽にタップしてもらえることを狙っています」

意図を共有することで、エンジニアが実装の細部で迷ったときも、
デザインの目的に沿った判断をしやすくなります。

「何を」だけでなく「なぜ」を伝えることで、細部の解釈のズレを防ぎやすくなります。

ステップ3:技術的な制約を事前に把握する

デザインを固める前に、実装上の制約を大まかに把握しておくことも重要です。

【質問例】
ボタンを押した際に、
軽く弾むようなアニメーションを追加したいと考えています。
Androidアプリの実装として、一般的に難易度が高いか低いか、大まかな傾向を教えてください。

Claude Codeが、以下のように答えてくれます。

【回答例】
弾むようなアニメーション自体は、Jetpack Composeなどの標準的な仕組みでも
比較的実現しやすいとされています。

ただし、以下の点によって難易度が変わることがあります。

- アニメーションの速度やタイミングの細かい調整
- 複数の要素(色の変化・拡大縮小など)を組み合わせる場合
- 既存のボタンコンポーネントへの後付けか、新規実装かによる違い

「シンプルな動き」であれば大きな負担にはなりにくい、という前提を持ちつつ、
最終的な工数はエンジニアに確認するのが確実です。

事前に大まかな難易度感を掴んでおくことで、無理のない要望を出しやすくなります。

ステップ4:実装後のフィードバックを具体化する

実装が上がってきた際、「なんか違う」で終わらせないための工夫も重要です。

【質問例】
実装されたボタンを見て、「思っていたのと少し違う」と感じています。
この感覚を、具体的なフィードバックに変換するために、
確認すべき観点を教えてください。

Claude Codeが、以下のような観点を提示してくれます。

【確認observation例】

- サイズ:大きさは意図した通りか
- 色:色味・彩度・明るさに違いはないか
- 余白:ボタン内外の余白は想定通りか
- アニメーション:動きの速さ・滑らかさは意図と合っているか
- タイミング:反応するまでの時間に違和感はないか

この観点に沿って確認することで、

「色が思っていたより明るい」
「アニメーションの速度が速すぎる」

のように、具体的なフィードバックに変換できます。

デザイナーが注意したいこと

実装の負担を軽視しない

Claude Codeで技術的な制約を調べられるとはいえ、実際のプロジェクトの実装状況や、既存コードとの兼ね合いまではわかりません。

「簡単にできそうだったから」と決めつけず、最終的な判断はエンジニアに委ねる姿勢が大切です。

全てを言語化しようとしすぎない

デザインには、言葉にしきれない感覚的な部分もあります。

無理に全てを文章化しようとせず、

図やモックアップと組み合わせる
実際に画面を見せながら説明する

など、Claude Codeでの言語化と視覚的な伝達を組み合わせることが効果的です。

デザイナー向けの質問テンプレート

日常的に使えるテンプレートをまとめます。

【デザイン言語化テンプレート】

1. 以下の感覚的な要望を、
   実装に反映しやすい具体的な言葉に変換してください。
   (感覚的な要望を書く)

2. 以下のデザイン変更について、
   エンジニアに伝える際の意図・理由の説明を考えてください。
   (変更内容を書く)

3. 以下の実装について、
   一般的にどの程度の難易度か、大まかな傾向を教えてください。
   (実装したい内容を書く)

4. 以下の感覚を、具体的なフィードバックに変換するための
   確認観点を教えてください。
   (感じたことを書く)