こんにちは、ユニファでプロダクトデザイナーをしている砂田です。
今回、AI活用してLPの制作を行って見えてきた、AIとの関わり方や、 意図どおりにデザインを再現させるためのポイントが見えてきたのでご紹介します。
AIを活用して実装・調査を始めたきっかけ
今回作成するLPは「外部に依頼せず、社内で完結できる可能性を探りたい」と 相談されたことが、AI活用して実装と調査を始めたきっかけでした。
社内で完結する場合の課題感
- 私自身の課題
- デザインはできても、実装スキルが不足している
- 最終的には誰か（社内か外注）に依頼する必要がある
- デザイン課
- 実装できる特定のメンバーに仕事が偏ってしまう
- 急な依頼や複数のリリースが重なるとリソースが不足してしまう
もしAIを活用して、
「誰でも高い精度でデザインを実装をできる仕組み」を作れたら、 今回のみのコスト削減ではなく、今後LPなどの案件を高速で回すための「武器」になるはず。と思い、AIを活用した実装と調査を行いました。
活用したツール
実装を行っていくために活用したツールの紹介です。
- Figma：デザインの発散と仕様書
- Cursor：コーダーとして実装を担当
- Figma MCP：デザインデータをコードに翻訳
FigmaのデザインデータをCursorにMCPを使って情報を渡して
実装を依頼するといった活用方法でこの3つを使っていきました。
まずは試してみる
まず、今のデザインデータをそのまま渡すとどうなるのかを試してみました。
結果は、このような実装結果となりました。
問題点として
・レイアウトがバラバラ
・画像部分もCSSで表現
・画像部分の表示が破綻
・可変には対応していない
「一発で精度のよいデザインが実装されたら」と思っていましたが、 結果としては30%ぐらいの精度のイメージでした。
もう一つに気なる点としては、
正確に情報を渡しているはずなのに、
違うスタイルを設定されている箇所があり、なぜ一部のみ正確に実装されないのかが不明でした。
なぜ変更したのかをAIに聞くと…「レイアウト構造から16pxが妥当だと判断しました」「重要な情報と判断してフォントウェイトをBoldにしました」など、AIの方で判断して実装をしてくれていることがわかりました。
まず、AIと目線を合わせる必要があると思い、FigmaのMCPがどのような情報を取得しているのかを調べることにしました。
FigmaMCPに見えているものを理解する
デザインを実装する上で活用するFigma MCPのツールをまとめました。
この表から、デザインからさまざまな情報を取得できることがわかりました。
逆に、「絶対値での配置」や「意味のないレイヤー名」を渡されると、AIは何を基準に配置すべきか分からず、レイヤー名からなんのパーツかがわからず推測で動いてしまうため、レイアウトが崩れる原因となりそうということが見えてきました。
AIに迷わせないためのFigmaデータ
ここまでで、デザインデータが単に見た目上整っているだけではダメで、AIに伝えるためにはデザインデータが構造化・整理されているかが重要となることがわかりました。
「AIに余計な推測をさせず、曖昧なデータを渡さない」ために、徹底したポイントは下記になります。
① オートレイアウトを徹底する
要素を自由に置くのではなく、相対的な配置（Auto Layout）を徹底します。これにより、FigmaでのAutoLayoutはFlexboxに置き換えやすいため、正確にCSSを生成できます。 Figma上でビジュアルを作る場合、絶対値で配置してしまうため、画像化して差し替えるなどをしておく必要もあります。
② レイヤー名・フレーム名の最適化
AIがそのレイヤーをHTMLのどのタグとして実装すべきか判断する材料にしているため、「Frame 0123」などの不明なレイヤー名を残さないことも重要となります。とはいえ、すべてのレイヤーに手動で名前をつけるのは大変な作業です。
そこで、FigmaのAI機能（レイヤー名の自動書き換え）を活用し、構造がわかりやすい名前に一括変換します。
▪️ 最低限やっておくと良いこと
・セクション名： 最低限、各セクションには明確な名前をつける。
・レスポンシブ対応：スマホ・タブレット・PCで構造を極力変えず、名前を一致させることで、可変対応（可変幅の設定）がスムーズになります。
・画像名： 画像にも適切な名前をつけておくと、AIがアセットの中から正しい画像を選んで配置してくれるようになります。
③ 要素のサイズ制約の設定
親要素の幅に合わせてコンテナが広がるか（Fill）、中のコンテンツに合わせて枠が縮むか（Hug）といった設定を各要素に正確に行う必要があります。
ここの設定がそのまま実装されるため、デザイン作業が完了したら、コードを生成する前にFigma上でフレームを実際に拡大縮小して動作確認します。
他にも色々精度を上げるための準備ポイントはあるのですが、
完璧に用意しようと思うと準備にばかり時間がかかってしまうので、
・最低限AIを迷わせないようにすること
・道筋を作ってその先はAIに任せるなど
いかに時間をかけずに精度を上げるかを工夫しました。
AIへの依頼の仕方
色々な組み合わせでの依頼をしたなかで、現状ベストと感じている
流れとプロンプトを紹介します。
① サイト全体の構造を把握
LPの全体のレイヤー構造を把握してください。 [Figma frameのURL]
② セクションごとデザインを実装
[セクション名]の[ブラウザ表示幅]の時に、
[Figma frameのURL]を参考にFigmaMCPを利用して情報を取得し、
PC用レイアウトをHTML/CSSで実装をお願いします。・もし、見た目を「良くする」ための独自の判断でデザインを変更する場合、Figmaで指定されている値（フォントウェイト・フォントファミリー・色・余白・フォントサイズなど）とを確認して、どこを変更したのかを教えてください。
この中の、②のデザインを渡すプロンプトを紹介します。
ここでは 、デザインに関する指示は、デザインデータのURLのみで説明し、
どこに、どの幅で、どのデバイス対象に実装して欲しいかを伝えて
依頼をするようなプロンプトにしました。
また、推測や独自で判断して変更した内容は後から教えてもらうようにした。
② 3~4セクションごとにリファクタリング
現在、以下のセクションを個別に実装しています。
- [実装したセクション]これらを俯瞰して、
- 共通化すべきclass
- 命名がずれている概念
- 既存セクションとの重複
- 利用していない不要なスタイル
を指摘してください。
実装結果
結果は、このような実装結果となりました。
おおよそ問題なく実装がされている！80%ぐらいの精度！
一部変更されている箇所はあるものの、軽微な修正で対応可能な範囲です。
あとは、100%に近づけるために、 CSSでスタイルを調整したり、 Cursorのビジュアルエディタ機能を活用して プロパティの調整をしてからコードに反映したりなど、微調整を行ってレイアウトは完成。
このあと、ボタンやアコーディオンのインタラクションや
アニメーションの調整などを行っていきます。
この部分は今回は省きます。
まとめ
デザインデータは「仕様書」
AIに余計な推測をさせず、曖昧なデータを渡さないための構造化や整理が最重要。
ここのデザインを整えるという作業が、デザインを再現する精度に直結します。
今後はこの構造化を意識して初めからデザインを行えばさらに
効率よく実装作業へ移ることが可能だと思います。
AIの判断を許容する
失敗した例として、プロンプトの中に「独自の判断でデザインを変えないでください」と指示をすると、かえってFigmaからコードへの翻訳が上手くいかず、精度が落ちるケースがありました。 AIが迷わないための「道筋（構造）」は人間がしっかり作り、その先の細かな展開はあえてAIの処理に任せる。違和感があれば後から対話して微調整する、という「伴走型」のスタンスが最も効率的だと感じました。
AIの特性を理解し歩み寄ることで、AIとの関わり方や、デザインの役割を見直すきっかけとなりました。これからも試行錯誤を重ねながら、この時代の「新しいデザインの役割とプロセス」を深く探求していきたいと思います。
ユニファでは一緒に働く仲間を募集しています！気になった方はぜひ採用ページをチェックしてみてください！
