AIで作ったワイヤーフレームをFigmaで編集！「html.to.design」で制作効率が劇的に変わったお話

こんにちは！ Webデザイナーの中野です。

お久しぶりのブログになってしまいましたm(__)m
今日は「デザインとAI」について。
制作スピードとクオリティの両立を叶えてくれた、とても便利なFigmaプラグインをご紹介したいと思います。
（デザイナーさん向けの記事です）

ワイヤーフレームは、スピードも大切

最終的なデザインは、これからも一つひとつ丁寧に仕上げていくというスタンスは変わりません。

ただ、お客様へ「こんなイメージです」と最初にご提案するワイヤーフレームの段階では、クオリティだけでなくスピードもとても重要です。

ワイヤーフレームがシンプルすぎると完成イメージが伝わりづらく、反対に作り込みすぎると時間がかかるうえ、デザインとの差が分かりにくくなってしまいます。

だからこそ、構成案や比較検討の段階では、「ある程度完成イメージが伝わる状態」をできるだけ早く共有したいと考えています。

そこで今回は、AIを活用してワイヤーフレームの構成や見た目を素早く作成する方法に挑戦してみました。

AIが作ったものは、その後の「編集」が意外と大変

現在は、これまでの制作経験や知見にAIを組み合わせながら、ワイヤーフレームを作成しています。

AIに依頼すると、見た目が整ったワイヤーフレームのたたき台を作ってくれたり、MarkdownやPDF、Excelなどで書き出してくれたりします。ここまでは、本当に便利。
でも問題はここから。

AIが出力したものは画像として扱われることが多く、SVGでうまく書き出せなかったり、デザインツール上で細かな編集がしづらかったりします。（共感してくださる方多いと嬉しいです...）

そのため、これまではAIが作ったワイヤーフレームを参考にしながら、結局Figmaで一から作り直すことが多く、正直なところ、生産性はそれほど高くありませんでした。。

Figmaの「html.to.design」で解決

そんな悩みを解決してくれたのが、Figmaのプラグイン「html.to.design」です。


（画像：Figma Community「[html.to.design -- by ‹div›RIOTS -- Import websites to Figma designs (web,html,css)]」より引用）
https://www.figma.com/community/plugin/1159123024924461424/html-to-design-by-divriots-import-websites-to-figma-designs-web-html-css

WebページのURLを入力するだけで、そのHTMLをFigmaへ取り込み、編集可能なデータとしてインポートできます。

インポート後は、レイアウトやテキストもFigma上で自由に編集できるため、今回抱えていた課題は一気に解決しました。（とても感動でした...）

ただ正直、ちょっと怖いなとも思いました。

気になったWebサイトを取り込むと、フォントや余白、レイアウトの比率まで確認できてしまうんです。

しかも、Figma無料プランで10回試せるらしいです。
かっこいい＆おしゃれなデザインも、0から作ることなく簡単に制作できてしまうレベル。
ぜひこの感動体験を味わってほしい...

（もちろん他社デザインをそのまま流用することは絶対にNGです。）

今回実際にやったこと

1. ①AIが作ったワイヤーフレームをHTML形式でダウンロード
2. ②ローカル環境のブラウザで表示
3. ③html.to designのChrome拡張機能と連携してFigmaにインポート
4. ④Figma上でテキストや余白、レイアウトを微調整して完成
   
   

これまでは「AIが作ったものを見ながら作り直す」という作業が必要でしたが、今では「そのままインポートして微調整するだけ」で済むようになり、制作効率が大きく向上しました。

AIの進化、やっぱりすごい

AIの進化は本当にすごいと感じています。（毎回言っている気がします????）

とはいえ、AIだけでデザインや提案をするつもりはありません。

これまで積み重ねてきた経験や知識、お客様から伺った想いや課題、そしてAIの力を組み合わせることで、より良いご提案ができると考えています。

AIは人の代わりになるものではなく、力を何倍にも引き出してくれるパートナー。

これからも新しい技術を積極的に取り入れながら、お客様により良いものをご提案できるよう、学び続けていきたいです。