![見出し画像](https://assets.st-note.com/production/uploads/images/109916091/rectangle_large_type_2_45153f250cda3bb35875204e24f85add.png?width=1200)
BING AIでホームページを作ってもらうの巻
こんにちはMegUです。
BONOに入って1カ月がたちました。UIビジュアル基礎&UX入門を同時並行でやっています。ポートフォリオサイトが作れないと転職活動ができないので、焦ってゼロからサービスを行っています。毎日時間が足りない~!!ってなりながら生きてます。時間は、有限。
今日はWEBサイトをAIに作ってもらったので記録します。
なぜ、WEBサイトをつくるのか
ありがたいことにお知り合いの会社のHPをリデザインしてくれというお話をいただいたので、UI/UXの勉強と並行して、WEBデザインもかじったりしています。
どんな方法で作るか
しかし、HTMLとCSSは2年前に少し勉強したものの、見事に挫折してしまいまして、コーディングはさっぱりでございまして…(恥)
なまくらな私が思いついたのは下記2つでした。
Figmaで作ってみて、AIに画像認識でHTML、CSSを書き出してもらう。
Figmaで作ってみて、プラグインでHTML、CSSを書き出してもらう
1.BING AIでの書き出し
下記の画像をBING AIにアップロードして、書き出しを依頼しました。
![](https://assets.st-note.com/img/1688433403294-wbS1qV1JZX.png?width=1200)
BING AIはMicrosoft Edgeでしか使えないです。
Bingバーの上部にある、チャットというところを使います。
![](https://assets.st-note.com/img/1688434673731-wPl4d89PDS.png?width=1200)
画像をアップロードしまっす
![](https://assets.st-note.com/img/1688434746588-YXN5tHrIey.png?width=1200)
![](https://assets.st-note.com/img/1688434805319-TlJHXxN8Y0.png?width=1200)
はい、2分ぐらいできました~!!
ヴィジュアルコードに貼り付けまっす。なんか怪しいw
![](https://assets.st-note.com/img/1688435003502-UDDwyfsZUj.png?width=1200)
![](https://assets.st-note.com/img/1688435006842-78b6unutzV.png?width=1200)
す、す、すし屋になってるううううう~~~~~~~!!!!!!!!!
もう違うやんけとは思うけど、とりあえず保存してみてみます。
![](https://assets.st-note.com/img/1688435100636-4oZIKIJbwt.png?width=1200)
お、おいしいおすしやさん…
BING AIはCHAT-GPT4が搭載しているという噂なので試してみました、が、こんな感じになりましたwwww以上です。笑
この記事が気に入ったらサポートをしてみませんか?