こんにちは、株式会社ゼストでプロダクトデザインをしている池田です。
今年の頭から「AIを活用して作業をもっと効率化しよう！」ということで、Claude Code を使い始めました。
これまでもターミナルを使ってコマンドを打ち込むことはありましたが、正直なところ「エンジニアの方に教えてもらった魔法の呪文をそのまま貼り付けているだけ」で、中身はほとんど理解できていない状態…。
そんな私が再びターミナルと向き合うことになったのです。
なぜデザイナーがコードを触るのか？
きっかけは「デザイナー自身で、小さな画面崩れや表記揺れくらいなら修正できるといいよね」という話でした。 修正したい内容は、システムに関わる複雑なものではなく、以下のような軽微なデザイン修正です。
- ちょっとした余白のズレ
- 文字色の指定ミス
- 文言の表記揺れ
一つひとつは本当に些細なことかもしれません。ですが、デザイン仕様とズレていると、ユーザーにとっては「なんだか分からないけれど、使いづらい」という小さな違和感に繋がってしまいます。
プロダクトのクオリティを保つためにも、「デザイナーだからこそ気づける微細な崩れ」を、エンジニアの手を止めることなく迅速に修正できるフローを確立し、エンジニアチームと一緒にプロダクト価値を高めていきたいと考えています。
エンジニアさんの神対応！「非開発者向けガイド」
さっそくスタート！といっても、非エンジニアにとっては最初の1歩が一番の難所です。
そこで、弊社のエンジニアの方が環境構築をしてくださり、さらに『日々の修正ガイド（非開発者向け）』という神マニュアルを作成してくれました！
- サーバーの立ち上げ方
- ブランチの切り方
- Claude Codeへの投げかけ方
- コマンドで直接実行する場合の手順
- プルリクエスト（PR）の作成手順
まで、至れり尽くせりの内容になっています。 これがあれば何も怖くない！…はずでした。
それでも立ちはだかる「ローカル立ち上がらない問題」
至れり尽くせりのマニュアルがあっても、出るんです。エラーが…！
マニュアルの中に「トラブルシューティング（こんな時はこうしてね）」という項目も用意していただいているのですが、それでも解決しない場面に遭遇します。
困った時にClaude Codeに相談してみても、最終的には「エンジニアの方に確認してください」となってしまいます。
一番の難所であり、今の最大の課題は「修正結果を確認しようとした時に、ローカル画面が立ち上がらないこと」です。
ここさえスムーズに行けば、デザイン修正のスピードは格段に上がるはず！
この部分は別途エンジニアチームでスキルを作成してエラー相談時に発動できるよう整えてくれています。
失敗から学んだ「作業前確認」の大切さ
実は一度、Claude Codeに修正を依頼した際に、システム全体に関連するファイルまで自動で手を入れてしまうということがありました。
デザイナー側はサイト全体の内部構造や影響範囲をすべて把握しているわけではありません。単純なCSS修正のつもりでも、実際はReactのソースコードまで広範囲に修正範囲が及んでいました。
この失敗を踏まえ、現在は「作業を始める前に、エンジニアの方に修正内容と方針を確認してもらう」というフローを取り入れています。
デザイナー判断で進めるのではなく、構造を理解しているエンジニアの方に影響範囲を確認してもらった上で進める。このステップを入れることで、安心して作業に取り組めるようになりました。
なお、ここも現在では人手を介さなくても判断できるようスキル化して、Claudeとの会話でチェックできるように整えました。
まとめ：デザイナーが直せるフローを固めていきたい
まだまだエンジニアの方にはたくさんお世話になっていますが、
- 作業前に影響範囲を確認
- Claude Codeを活用して修正
- ローカル環境でデザイナーが確認
- プルリクを作成
というデザイナーの修正フローを、しっかり固めていきたいと思っています。
プロダクトの微細な違和感を自分たちの手で解消し、より良いユーザー体験を素早く届けていけるよう、これからも試行錯誤を続けていきます！
