UizardのHandoff機能とは？

Writer： otsubo　更新日：2024/12/16

こんにちは、デジナーレ福岡オフィスの大坪です。
前回、AIを活用したデザインツールであるUizardについて解説いたしました。

まだ読んでいない人はこちらから！

デザイナーでなくてもUIデザインが作れる！?　Uizardとは？

さて今回は、Uizardの注目すべき機能の一つである「Handoff機能」についてご紹介します。この機能とは一体何なのか？さっそく詳しく見ていきましょう！

 

Handoff機能でできること

 

Handoff機能の概要

Handoff機能には、大きく分けて2つの主要な機能があります。それは、作成したUIのエクスポートと、コードの書き出しです。

• UIのエクスポート機能
  デザインしたUIをPNG、JPG、SVG、PDFといった形式でエクスポートすることが可能です。さらに、解像度も1xから4xまで調整可能で、多様な用途に対応できます。
  
  
• コードの書き出し機能
  React、CSSのコードの書き出しが可能で、jsx形式としてコードを保存することができます。これにより、デザインから実装への橋渡しをスムーズに行うことが期待されます。

 

今回は、この中でも特にコードの書き出し機能に焦点を当てて検証していきます。

「UIのコード書き出し」という機能自体は、FigmaやAdobe XDなどの既存ツールでもすでに提供されています。「それなら特に珍しい機能ではないのでは？」と思うかもしれません。しかし、私が注目したのは、UizardがCSSだけでなくReactコードも書き出せるという点です。

Reactコードをそのまま書き出せるツールがあれば、フロントエンド開発の作業効率は大幅に向上するのが期待されます。特に、Reactを主力とする開発者にとって、これは非常に実用的で魅力的な機能と言えるのではないでしょうか？

 

Handoff機能の実用性検証

それでは、実際にUizardのコード書き出し機能がどこまで使えるのか、今回はこちらのLogin画面を題材にして検証していきたいと思います。

検証1: スクリーン全体を選択してコードを書き出す

まずはスクリーン全体を選択して画面右側にある「Handoff」をクリックします。CodeのセクションでReact, CSSどちらのコードを書き出したいのか選択できるようになっています。

理想としてはこれで全てのコンポーネントのコードが書き出されることですが、結果は果たして・・・
書き出されたコードがこちら

React

CSS

 

描画結果

実際にCodeSandboxで描画した結果はこちらです

白い背景が描画されましたが、それ以外の情報は何も表示されません。この結果から、選択した要素のみがコードとして書き出されることが分かります。UI全体を構成する他のコンポーネントは含まれておらず、意図した通りの再現には至りませんでした。

検証2: スクリーン内のすべてのコンポーネントを選択して書き出す

検証１では選択したものしか書き出しが行われなかった為、今度はスクリーン内のすべてのコンポーネントを選択してコードを書き出してみることにします。
複数選択を行えば、画面全体を構成するコードを書き出せるのではないかと期待に胸を膨らませていますが、その結果はどうだったでしょうか？

 

書き出し時に表示されたメッセージ

 

Select only one component at a time to inspect its React and CSS code
(一度に1つのコンポーネントだけを選択して、ReactとCSSコードを検証する)

とメッセージが表示され、なんと複数選択された要素のコード書き出しはサポートされていないことが判明しました。

以上の検証から、Uizardのコード書き出しは「個別コンポーネント単位」での利用を前提としていることが判明しました。UI全体を包括的に生成することは難しく、複数要素を一括でReactコードに落とし込む機能は現時点では備わっていないようです。また、UizardにはFigmaのようなコンポーネント階層機能が備わっていないため、複数コンポーネントをグループ化してそれをネストし、書き出しを行おうとしたところ、検証２と同じ結果になりました。

この結果をもとに、このHandoff機能が実践レベルの現場開発で即戦力となり得るかを今度は探っていきます。エンジニアにとって重要なのは、書き出されたコードがどれだけ実装作業が効率化できるか、そして実務に耐えうるクオリティを担保できるかです。

検証３実際のUIフローに近い構成要素の書き出し

下記はUizardで生成された、テキスト入力フィールドとボタンのReactコード例です。

これらのコードは、テキスト入力フィールドやボタンなどのUIの見た目や基本的なレイアウト情報をコンポーネントとして表現しています。しかし、イベントハンドラやバリデーション、状態管理（入力されたテキストの保持など）といった「動的な振る舞い」は一切ありません。生成されるのはあくまで「見た目」ベースのコードであり、実務的な機能を再現するには、開発者自身がロジックやイベント処理を追記する必要があります。

また、複数要素（例：この入力フィールドとボタンを含むログイン画面全体）を一挙にまとめて出力することは依然として困難なので、一要素ずつコードを取得し、開発者が自らコンポーネントや状態管理ロジックを組み立てる必要があります。

 

実務レベルでの即戦力性は？

UizardのHandoff機能は、デザインからReactコードを自動生成することで、コーディングの初期段階を短縮するポテンシャルがあります。特に小規模なコンポーネントや、初期プロトタイプを素早く立ち上げたい場面ではいいかもしれないです。
しかし、実務の現場では、以下のような課題が浮かび上がります。

 

既存プロジェクトへの統合

生成されたコードは主に「見た目」ベースで、既存プロジェクトに導入する際、どう扱えるでしょうか。幸い、生成コードはシンプルなJSXとインラインスタイルベースで記述されているため、技術的な統合ハードルは低めです。適宜Tailwindなどのスタイルガイドラインに合わせて書き換えることも容易でしょう。

しかし、実際のプロジェクトでは、状態管理（ReduxやReact Hooksなど）、命名規約、レスポンシブ対応など、ルールがあります。生成されたコードはあくまで「スタート地点」に過ぎず、それらのプロジェクト固有要件に合わせたカスタマイズ作業は不可避です。
つまり、即座に実務用コードとして利用するのは難しく、素早いプロトタイピングや初期実装の補助として捉える方が現実的です。

 

デザイン変更への対応

プロジェクト進行中には、デザインの微修正や仕様変更が頻繁に起こります。Uizard上でデザインを修正し、再度コードを書き出しても、既存の実装との整合はもちろん自動的に取られません。結果的に、開発者は再生成されたコードを参考にし、手動で差分を確認・反映させなければならず、作業はゼロにはなりません。
小規模な変更であれば差分を比較しやすいかもしれませんが、大規模な改修や頻繁なデザイン変更が起きる現場では、この機能による恩恵は少ないように感じます。これでは効率化につながるのか？という疑問が残ります。

 

まとめ

UizardのHandoff機能について見ていきましたが、この機能は「実務でそのまま使える即戦力ツール」と評価するのは難しいのが正直なところです。完全な自動化や大規模開発へのスムーズな導入には課題が残ります。
とはいえ、この機能はデザインからコードへの移行を一歩前進させる魅力的な試みです。特にReactコードを書き出せる点は、フロントエンドエンジニアにとって初期実装の時短に役立つように感じます。しかし、現時点では画面全体の統合的な書き出しや複雑なロジックの自動生成には至っておらず、実務現場では「補助的なサポートツール」としての立ち位置が現実的です。
今後のアップデートや機能拡張によって、より包括的なコード生成や効率化が実現されることに期待したいところです。

弊社では、最新ツールの利点を最大限に活用しつつ、UI/UXデザインから開発、ビジネスサポートに至るまで、プロフェッショナルな視点でプロセス全体をトータルにサポートしています。特に、人間ならではのクリエイティビティや細部への徹底したこだわりを大切にすることで、クライアントに寄り添った本当に価値あるITストレスフリーなサービスを提供しています。

UizardのHandoff機能に関する今回の検証結果が、エンジニアの皆様にとって有益な参考となれば幸いです。今後も最新のデザインツールや開発手法について、引き続き情報を発信してまいりますので、ぜひお楽しみに！