本日が仕事始めの方も多いのではないでしょうか。
本年もどうぞよろしくお願いいたします！！
今回は、figmaを使ってワイヤーフレームの作成をしてみたので、その内容を投稿します。
1. はじめに
figmaはWebサイトのUI/UXデザイン作成に強く、他者との共同編集もできるのでおすすめです。
現場では、デザイナーからfigmaでデータを共有してもらい、そこから実装・・ということも多いです。
基本的には無料で使用できる点もありがたいです。
是非、普段から使っていただきたいツールです！
そんなfigmaでAIも使えるようになりました。
どんなことができるか試してみたいと思います。
2. figmaでAIを使ってみる
figmaにログインすると、右上に下図のようなナビゲーションが出てきます。
「Make」がAI生成のツールなので、そちらを選択します。
まずはシンプルに
「コーポレートサイトのトップページのワイヤーフレームを作成してください。」と入力してみます。
なんと！ここまでそれらしいワイヤーフレームを作ってくれました。
これは便利・・・
しかも凄いのが、コーディングまで済んでいるというところ！
さらに詳しく情報を与えてみます。
「中小企業向けのコーポレートサイトのトップページのワイヤーフレームを作成してください。
・業種：Web制作会社
・目的：お問い合わせ獲得
・ターゲット：自社サイトを持っていない、または古い中小企業の経営者
・構成は日本のコーポレートサイトで一般的なもの
・スマートフォン表示を重視」
長くて下までお見せできないのですが、デザインがガラッと変わりました。
きちんとお電話・お問い合わせボタンまで再現されています。
しかも！
コーディングまで完成しているため、
「お問い合わせ」をクリックするとワイヤーフレーム内の該当箇所にジャンプするんです！！
残念ながら、
生成したワイヤーフレームの編集は有料になってしまいますが、
ここまで作ってくれるというだけで、デザインが苦手な人にとっては貴重な味方ですよね。
AI×Webエンジニアを目指す皆さんに、是非ともご紹介したいAIでした！
