MD-Blog_Web Creative

どうも、WEBデザイナーのDAIです。
本日は、今話題のAIによる開発支援ツール、Windsurfを使ってコードを全く書かずにWEBサイトを構築してみようと思います！

Windsurfとは？

Windsurfは簡単にいうと、AI機能が充実した開発環境ツールです。

コーディング / プログラミングの知識が豊富でなくてもこのツールを使えば、従来より簡単にWEBサイト制作が可能というわけです。
例えば、AIでコード修正を行ってくれたり、エラーの詳細をわかりやすい言葉で表示してくれるだけでなく、修正方法まで提案してくれたりします。

また、Cascadeというチャット機能を使えば、デザインカンプからコードを書き出すことが可能とのこと。
今回は、普段デザイン実務ばかりでコーディングスキルを置き去りにしている私が、この機能を使ってサイトを作ってみようと思います！

ちなみに料金形態はこちらです。

1. Windsurf をダウンロード

まずは、Windsurfの公式サイトからアプリをダウンロード！

開くとこのような画面になります。WindsurfはVScodeを派生させて開発されたそうなので、当然ながら結構似てますね。
中央がワークスペースで、右側にはCascadeというAIチャット機能が表示されています。

2. ワークスペースの言語を日本語に設定

ツールバーにあるプラグインアイコンをクリックし、検索ボックスに「Japanese Language Pack for Visual Studio Code」と入力し、「Install」をクリックします。 すると、ワークスペースの言語が(ほぼ)日本語に設定されます。

3. デザインカンプを用意

今回は、Geminiを使って簡単なデザインカンプを用意しました！ 入力したプロンプトは、

「Please make a website design of a mobility conference event and output it in image format」(モビリティー系のカンファレンスイベントのデザインを画像形式で作成してください。)

です。
ちなみに、生成された画像内にはテキストがうまく表示されていない箇所があったので、フォトショで若干修正を加えています。

これで準備完了！それでは、制作開始！

4. フォルダを作成

使用しているPC内に、HTML / JS / CSS / imgなどのファイルが出力されるフォルダを用意します。今回は「test_ws」と命名。
その後、「フォルダーを開く」を選択します。

5. デザイン画像を読み込ませてプロンプトを入力

画面右、Cascadeの入力エリアに画像とプロンプトを読み込ませていきます。

入力するプロンプトは、

「これはモビリティー系カンファレンスイベントのWebサイトです。このページを実装してください。」

こうして生成されたHTML / CSS / Javascript ファイルはこちら！

これらをディレクトリに反映していきます。

だが、
色々うまくいかず......
二転三転あり......

6. なんとか生成完了！

できたサイトはこちら！
「Open preview」を選択、またはブラウザで直接ファイルを開くと、見ることができます。

画像ファイルはこちらで用意しなければならないので、一旦即席イメージを挿入した結果がこちらです。
比較してみると...... 正直、見た目は結構違いますが、崩れはなくできている様子です。
Geminiを使ってデザインカンプを作成する際に、細かにプロンプトを書かなかった自分が悪いことがわかりますね。

ただ、大まかな部分はものの30分で再現できる点や、この時点でホバーアクションの実装、レスポンシブにも対応している点を踏まえると、十分時短になっていると思います。

7. まとめ

総じていうと、めちゃくちゃ楽でした。
画像と全く同じものが生成されるわけではないですが、ここからプロンプトを追加入力することも可能ですし、直接CSSを調整すれば、すぐに完成形に近づくと思います。
また、うまくいかなかった時、Cascadeと会話することで、エラー箇所の検出するだけでなく、自動で修正案を提示してくれる点も楽でした。 ということで、みなさんもお試しください〜。