こんにちは！
Life ＆ Wellness事業部でデザインを担当しているサカイです。
Qiitaアドベントカレンダー16日目を担当しています。
今回は、世界メンタルヘルスデーに向けて、診断コンテンツを作ることになりました。 その中で、AIを使いながら進め方を工夫した部分について書いていきます。
背景：時間が限られた中で診断コンテンツを作ることになった
担当サービスで診断コンテンツを作ることが決まりましたが、
スケジュールにはあまり余裕がありませんでした。
普段の業務はこのような流れで進めています。
しかし、この進め方だと自分がデザインFIXするまで実装に入りづらい状態となり、どうしても待ち時間が発生してしまいます。この順番で進めると実装やテストに十分な時間を取るのが難しそうでした。
そこで、全員が作業を止めずにリリースする方法を考えました。
Claudeでワイヤーを作って認識を揃えたうえで、その後に作業を分担するという進め方をしました。
大枠のイメージをClaudeで作る
Claudeでモックを作成しました。普段の実装がHTMLベースであるため、モックの段階から実装に近い形で出力できる点が便利でした。 おおまかな仕様を入れて、イメージと違う部分を指摘しながら調整しました。
「SNS導線をここに置いてほしい」と指示するとすぐに作り直してくれて、
企画と会話をすすめながら修正していきました。
作ったものをすぐにURLで共有して確認してもらえるところも、Claudeの便利なところでした！
ここで全員の共通認識ができたので、全員が作業するターンに入ります。
コードを一式エンジニアに渡して組み込んでもらい、
デザイナーの自分はClaudeで作ったものをベースに次の作業をします。
html.to.designでFigmaに取り込む
Claudeで作ったモックは細かい修正が難しいので、 html.to.designを使ってFigmaに取り込み、具体的なコンテンツ内容を検討していきました。 html.to.designはWebサイトをFigmaの編集可能なデザインに変換するプラグインで、作成したモックをFigmaで編集したいときに便利でした！
デザインの実装
デザインの方向性がある程度固まったところで、エンジニアが実装ほぼ終了していたので、デザインを実装していきました。
その過程で、 企画が考えた設問をカーソルを使ってJSONにするなど、渡すデータについてもAIを活用しています。
作成した診断コンテンツはこちらです！ ぜひやってみてください。
よかったこと
この進め方を取ったことで、
- 短期間で合意形成ができた
- 実装とデザインを並行して進められた
- 手戻りを最小限に抑えられた
というメリットがありました！
おわりに
時間がない中では、モックでも「こういうものを作る」というイメージがチーム内で早めに揃っていることが、その後の進めやすさにつながると感じました。
AIを使うことで、こうした認識合わせのためのモックをさっと用意できるようになったのはとても助かっています。
今後も、まずはイメージを揃えるための手段として、うまく活用していきたいと思います。
