Windsurfの紹介
今日も一日、ありがとうございました。
この放送はWeb3にハマった建築設計者が、 仮想通貨やトークンメタバースなどのWeb3の話と、
時々建築の話、最近はAIの話をちょっとする放送です。 よろしくお願いします。
今日は、Webデザインの革命！Windsurfの話をしたいと思います。
WindsurfというAIコーディングツールなんですけども、 それのお話になります。
これはおそらく1ヶ月前ぐらいに、Windsurfがすごいみたいな、 そんなお話をしたと思うんですけども、
それの続編というか、一つのユースケースにおいて、 めちゃめちゃすごいなというふうに感じたので、
それをお話ししたいと思います。
そのユースケースというのはWebデザインですね。 Webサイトの作成ですね。
これについて実体験を踏まえながら、 お話ししていきたいと思います。
今日はAIの話になります。 よろしくお願いします。
それではお話ししていくんですけど、 まずWindsurfというのは何なのかというのを、
簡単に説明したいと思います。
Windsurfというのは、プログラミングコードを 作ってくれるAIになります。
最近、バイブコーディングと呼ばれるんですけど、 バイブですね。
バイブスのバイブですね。 雰囲気とかそんな感じです。
雰囲気コーディングと呼ばれるように、 AIに雰囲気、こんな感じのコード作ってみたいな、
その雰囲気をAIに支持するだけで、 AI側もちゃんとしたプログラミングコードを作ってくれるというのが、
バイブコーディングと呼ばれるものになります。
これによってWebサイトとか、 あとはゲームとかどうだろうな、
自動化ツールとか、そういったものをバイブコーディング、 AIコーディングで簡単に作れるようになったというのが、
今の時代になります。
それをやってくれるツールの一つとして、 Windsurfというツールがあります。
同じようなツールで言うと、Cursor、 V0とかも同じような仲間として挙げられます。
ウェブサイト制作の体験
初心者に優しいツールとして挙げられるのが、 このWindsurfというものになります。
私も1ヶ月前ぐらいからWindsurfを触り始めて、 ちょこちょこ使っているんですけども、
昨日おとといとガッツリ目で使ったケースがありまして、 そこでやっぱりWindsurfすげえなと、
AIコーディング、バイブコーディングすげえなって思ったので、 その話になります。
何をしたかっていうのは、とあるウェブサイトを、 本当はウェブサイトじゃないんですけど、
テストみたいな、プロトタイプみたいなものを作ったんですけども、 その話になります。
ことの発端は、これはあんまり詳細は言えないんですけども、 とある誰かさんが、
こんな感じでウェブサイトを作ってくれる人いませんか? みたいな、そんな投げかけをしてました。
そこには、今現存する他の全く関係のない他人のホームページみたいな、 公式サイトみたいなのがあって、
こんな感じのデザインでウェブサイトを作ってくれる人いませんか? みたいな、そんな募集だったんですね。
で、それを見た瞬間、 私はもうホントウェブサイトとか作ったこと当然ないので、
コーディングとかプログラミングとかも、 ほぼほぼ知識ない中で、そういった経験もない中で、
なんかこれだったらWindsurf使っていけんじゃね? って直感的にポンと思ったんですね。
それで、別に特に手を作れますとか言うまでもなく、 手を挙げるまでもなく、それでちょっと作り始めたんですね。
その要望のウェブサイトがあって、 これと同じようなウェブサイトを作ればいいんだということで、
実際にWindsurfを使って制作し始めました。
で、やることとしては単純で、 そのウェブサイトのまず内容ですね。
例えばその人のプロフィールとか写真とか、 そういったものをまず別のPowerPrixとかChatGPTとかでリサーチして、
プロフィールに載せる項目を列挙してください、 みたいな感じでリサーチするし、
あとは代表的な画像へのリンクを取得してくださいって言ったら、 いい感じの画像を10個ぐらい取得してくれるし、
この画像を披露はGoogleの画像検索とかでも いいと思うんですけども、
そんな感じでまずはそのウェブサイトのネタですね、 ネタ、中身をざっと取り寄せました。
で、あとはここからがWindsurfの出番です。
次にWindsurfで実際どんな操作でそれを構築していったのかを ちょっとざっと説明します。
まず初めにやったこととしてはWindsurfに 〇〇さんのオフィシャルウェブサイトを作りたいです。
このURLを貼って、このウェブサイトのデザインとかレイアウトとか、 あとはフォントとか色調っていうのを模倣して、
ウェブサイトを作ってくださいっていうのをまず投げたんですね。
そしたらまずは大枠の形みたいなのを作ってくれて、 それができたらプロフィールはこのような情報にしてくださいっていって、
さっきGPTとかパブリキシティとかで調べた情報を ペッと貼ってこの情報にしてください。
画像はこのホルダーにあるやつを使ってください みたいな感じでやると画像もはめ込んでくれると。
そこまでくると割と大枠ができるんですけども、
模倣してくださいって言って、ちゃんと分析して、 お題が出された参考事例のウェブサイトの中身をちゃんと分析してくれて、
こんな構成になってます、こんなレイアウトですねって分析してくれて、 それをちゃんと模倣してくれるんですけども、
結構甘い部分っていうのが多くあります、この時点では。
それで大枠、大体はできるんですけども、 そこからが割と編集作業的なことになってきます。
ここまでできるだけでもWindsurfめっちゃすごいんですけども、 ここからの使い勝手も割と優秀なので、ちょっと結構感動してます。
どんな感じでここから編集作業するのかというと、 まずWindsurfで作ったホームページ、ウェブページ、ゲームでもいいんですけど、
プレビューっていう機能があって、 それでプレビューできるんですよね。
一応、完績表を見ることができる。
見てる中で、この文字、ここのところの名前とかあったら、 この名前のフォントはちょっと違うなと、
もっとこういうフォントにしたいなって思ったら、 名前のところを選択してクリックして、
こういうフォントにしてくださいみたいな指示をすれば、 そこの名前のピンポイントを狙って修正してくれるんですよね。
あとは画像も、例えば写真画像があったとしたら、 画像をクリックして、
この画像をのっぺり表示させるんじゃなくて、 マウスを上に置いたときにボワンと動きのあるような感じで、
ような効果をつけてくださいみたいな感じで指示をしたら、 そういう効果をつけるような修正をしてくれるんですよね。
結構AIコーディングのあるあるとして、 コーディング書きましたらざっと叩きができました。
ウェブサイトなりゲームなりができました。
そこからここがいまいちだなっていうふうに直すときに、 ここを直してくださいみたいな、
ただそこだけ打つといらんとこまで直してきて、 全体の構成がぐちゃぐちゃになってしまうっていうあるあるがあるんですよね。
ただこのWindsurfのこの機能を使えば、 このピンポイントだけ修正することが可能なので、
もう本当にそういったここを修正したいんだけど、 それをやると全体がバラバラになっちゃう。
いらんとこまでバラバラに修正しちゃうみたいな、 そういった現象が起きずに修正することができる。
これまさに本当に一個一個フォントを修正したりとか、
あとこの箇条書きの段組とか段の余白とか、 そういったものを微調整したいときは段の余白をもうちょっと広げてくださいとか、
もう本当にピンポイントの微修正微修正をするだけで、 ウェブサイトの構築をすることができるといったものになります。
なのでこのときは当然お手本の参考のウェブサイトを見ながら、 このウェブサイトこうなってるから、
じゃあここはこういうふうにしてくださいみたいな感じで、 もう一個一個指示をすると。
こういうAIコーディングがなかったら当然、 例えばフォントを変えるって言ったら、
フォントを民調帯からゴシック帯にしたいってなったら、 ゴシック帯みたいなことを多分HTMLのどっかの中に
コードとしてゴシックみたいなのを書くんですよね。
当然その書き方とか変更の仕方っていうのが分かんないと当然、 今まではウェブサイトの編集作業ができなかったんですけども、
ゴシック帯にしてってその日本語で、 ただそれで指示するだけで、
それに応じたコードの修正をしてくれるっていうのが AIコーディングのすごさなわけです。
なのでこっちの開発者側は、 コードの知識があったほうが当然それはいいんですけども、
制作の成果と感想
最悪なくても、 ゴシック帯にしてって言ったらゴシック帯になりますし、
行の間隔を広げてって言ったら行の間隔が広がりますし、
ボーンっていう効果をつけてって言ったら ボーンっていう効果がつきますし、
当然このピンポイントだけさっき言ったようにクリックして、 そのピンポイントだけ編集してって言っても、
そのピンポイントだけ編集してくれますしっていう感じで、
コードの知識がなくても本当に細かいところを 1個1個自分でカスタマイズしながら
ウェブ制作をすることができるっていうのが 今の時代の革命かなというふうに思っています。
そんな感じで昨日おとといととあるウェブサイトを作って、
一応参考のウェブサイトっぽい感じのテイストで 出来上がったので、
とりあえずこんな感じの初心者ですけども 付けられますよみたいな感じで
その依頼主にアップしたんですけども、 当然それが別に採用されるかどうか置いておいて、
採用される確率は少ないと思うんですけども、
それが採用されるか採用されないか置いておいて こういうことができるっていう体験を自分の中でできたっていうのが
すごい一歩進歩だなというふうに思います。
このウェブサイトを作るは結構どうだろうな、
クライアントワークとして一個できるんじゃないかなというふうにも思っています。
自分がやるかどうか置いておいて。
結構どうなんですかね、ウェブサイトを作るって コモディティ化しているような市場だと思うので、
このAIを使ったとしてもどこまで売り上げというか 需要というかがあるのか結構微妙な分野だと思うんですけども、
何か一個自分が持っているスキルとして それができたという経験というのは非常に大きな一歩だったなという、
AIを活用するという点では大きな一歩だったなというふうに思ったので、
今日この感動をお話しさせていただきました。
ということで今日はウェブ制作の革命ということで、
WindsurfというAIツールの活用についてお話しさせていただきました。
ということで今日はお疲れ様でした。
またねーばいばーい。
