こんにちは、とまだです。
前回の記事では「【無料体験】AIアシスタント「Skywork」で作業時間を90%削減してみた」で、Skywork AI でプレゼン資料やドキュメント作成などを試しました。
前回は試さなかったのですが、Skywork ではWebページを作り、共有用にデプロイまでやってくれる機能があります。
せっかくなので、私がこれから個人開発で作ろうと思っているサイトのLPを作ってもらうことにしました。
（LPとはランディングページのことで、商品やサービスを紹介する1枚もののWebページのことです）
Skywork の「ウェブページ」機能とは？
Skyworkには、ドキュメント作成とはまた別の機能があります。
文字通り、Webページを作れる機能です。
適当に指示を出してもいいのですが、せっかくなのでこれから作ろうとしている個人開発アプリのLPを作ります。
最近はAIを使ってWebページを作るツールも増えてきましたが、実際にどれくらいのクオリティで作れるのか気になりますよね。
作りたいサイトの情報を渡す
実は別な記事で書きましたが、新アプリの要件定義書やデザインシステムのドキュメントを用意してあったので、そちらを渡してみます。
これらには「アプリの目指す方向性」とか「機能」などをあらかじめ書いてあるので、それに基づいてやってくれるはずです。
こんな感じで、複数のファイルアップロードにも対応しています。
開発に限らず、こういった点でもドキュメントの整備は AI エージェント活用の上で大事だな〜と再実感します。
特に、複数のドキュメントを同時に理解して、それを統合してWebページを作ってくれるのは便利ですね。
要件定義書からWebサイトを自動生成
こんな感じで、とにかくドキュメントをもとに作成してもらいます。
Skywork の場合はいきなり作り始めるのではなく、最初に計画を立ててくれます。
この時点で何か意図と違うところがあれば、軌道修正の指示を出すこともできます。
すごいなと思ったのは、いくつか修正の候補も出してくれるところですね。
「なんか違う」と思っても、的確な指示を出すのって難しいものです。
そこで、代案を出してくれるのは助かります。
これについては、人間のデザイナさんと仕事してるみたいな気分でした。
実際のWebデザイナーさんも、クライアントの要望を聞きながら「こういう方向性はどうですか？」って提案してくれますもんね。
特に問題がなければ「続行する」ボタンを押します。
または、何も追加指示を出さずに放置していれば10秒ぐらいで自動続行となります。
この自動続行機能も地味に便利で、ちょっと席を外している間に進んでいてくれるんです。
見たところ、渡したドキュメントを分析し、しっかりと考えてやってくれますね。
中でMCPツールが動いている様子です。
実際の処理内容を見ていると、レイアウトの設計から、色の選定、コンテンツの配置まで、かなり細かく検討しているのが分かります。
15分で完成！デプロイ済みサイトを確認
およそ15分ぐらいでしょうか？ページが完成したようです。
しっかり時間をかけている点も、むしろポジティブに感じます。
便利だな、と思ったのは デプロイまでやってくれるので、誰にでも共有できる です。
普通なら、HTMLとCSSを書いて、サーバーを用意して、アップロードして...という手順が必要なのに、全部自動でやってくれるんです。
実際、以下のようなURLが発行されましたので、アクセスできるはずです。
プロトタイプを作って、チーム内だけで共有したい時とかに便利ですね。
※ちなみに非公開（限定公開）にすることもできるようです。
実際、アクセスしてみると要件定義書の内容に合わせた LP がバッチリ作成されてました。
日本語のページだと AI 駆動開発ではたまに崩れることがあるのですが、割とレイアウトもきっちりしています。
これは嬉しい誤算でした。
機能紹介欄もしっかり作られています。
要件定義書に書いてあった機能が、ちゃんとユーザー向けの言葉に翻訳されているのがいいですね。
アプリのメリットも分かりやすく整理されています。
これだけで、LP としてはそのままリリースしちゃってもいいぐらいですね。
デザインが苦手な私からすると、LPの構成を検討する手間が省けるのは助かります。
修正をしてもらう（多言語対応）
Skywork AI では、作ってもらったものを修正する指示を出すこともできます。
今回は日本語で作ってもらったものを、多言語対応させてみようかと思います。
最近は海外ユーザーも意識したサービスが増えてきましたし、最初から多言語対応しておくと後が楽なんですよね。
英語と日本語を切り替えられるようにしてください。また、ブラウザで設定されている言語から自動で判別できるようにもしてください。
しばらく待つと、英語と日本語に切り替え可能なサイトにしてくれました。
しかも指示通り、ブラウザの言語設定を読み取って自動切り替えする機能まで付いています。
（正確に実装するとなると意外と面倒だったりする機能）
無茶振りでダイナミックなアニメーションを付けてもらう
ここまで来ると、どこまで出来るか試してみたくなっちゃうのがエンジニアの性というものです。
どこまで柔軟に対応してくれるか試すため、次は すんごいカッコよくダイナミックでウルトラハイパーなアニメーションとUIにして という無茶振りな指示を出してみます。
普通なら「もう少し具体的に...」って言われそうな指示ですよね。なんかすみません。
指示を受け、怪訝な顔も見せず真面目にデザインや設計を考えてくれています。
しばらくすると、究極にダイナミックでハイパーモダンなデザインにアップグレード した LP をデプロイしてくれたようです。
どんな解釈をしたのか、楽しみです。
しばらく待つと、完成したようです。
アニメーションについては文章で伝えきれませんので、効果の程は以下URLから実際に見ていただいた方が早いかもしれません。
実際にアクセスしてみると...
各種カードが下からフローティングしてきたり。
数字がカウントアップされる形で表示されたり。
いたるところに絵文字が浮いていたりと、お祭り状態です。
うーん、素晴らしい！
個人的に大好きなのが、カーソルを合わせると 絵文字が惑星軌道のようにぐるぐると周回 する UI です。
これは人間にはなかなか出せない発想ではないでしょうか？
間違いなく すんごいカッコよくダイナミックでウルトラハイパーなアニメーションとUIにして という指示通りなので、私としては大満足の結果です。
超おもしろい。
真面目な話、数字のカウントアップとか、スクロールに合わせて次の要素がフローティングしてくるなどなど。
実際のモダンなサイトにもありそうなUIをサクッと作ってくれるのはなかなか良いですね。
アイデアは出ないけど、コーディングやモダンな UI を作って見たい方にはピッタリだと思います。
他の AI ツールと比べてみた所感
これまでも ChatGPT や Claude、Bolt に v0 など、Webサイトの LP を作ってくれるような ツールはたくさんあります。
私も色々試してきました。
一方、Skywork AI だと ナレッジベース という場所に、プロジェクトの情報をとにかく溜めておくことができるのが強みだと感じました。
おそらく、「単発で思いついたWebページを作るだけ」なら、他のAIツールとそこまで差はないかもしれません。
ただ、Skywork AI は「ドキュメント」「スライド」なども作成できます。
そのため、実際に業務でフル活用するとしたら、Skywork AI だと すべての仕事を一気通貫で進められる のが強みだと個人的には思っています。
例えば、実際の Web 制作の場面であれば、こんな流れで使えるのではないでしょうか。
- 顧客の依頼をもとに「ドキュメント」機能で必要な情報をリサーチ
- リサーチ結果をもとに「スライド」で顧客に提案
- 提案内容をもとに市場・ニーズをさらにリサーチ
- ここまでの情報をすべてナレッジベースに蓄積
- Webページに落とし込む
- チーム内や顧客に見せる
この一連の流れを、 1つのツールで完結できる のは大きいですね。
また、Claude Code や Cursor など、LPをコーディングできるAIエージェントはたくさんあり、そちらでもドキュメントを踏まえたコーディングはできます。
ただ、それを誰かに見せたり、そもそもツールの特性を掴んで LP を作るとなると、やはりエンジニアやコーダーの手が必要なのが現実です
しかしSkyworkならダッシュボード上で指示を出すだけで、モックのデプロイまでやってくれますので、非技術者でも「イメージを形にする」ことができます。
意思決定層に見せる上でも、実際のWebページレベルまで非技術者が作れ、しかも共有可能という点は強みかと思いました。
「こんなイメージで作りたいんです」って言葉で説明するより、実際に動くプロトタイプを見せる方が100倍伝わりますからね。
まとめ
今回は Skywork のウェブページ作成機能を使って、個人開発アプリのLPを作ってみました。
要件定義書などを含め、いくつかの指示を出すだけで、かなり実用的なLPができあがりました。
（今回はドキュメントをしっかりと作ってあったものを渡しましたが、実際にはもっと曖昧な指示からスタートしても問題ありません。）
特に非技術者の方や、プログラミング初心者の方にとって、アイデアを形にするハードルがグッと下がると思います。
Skyworkは無料で試せるので、興味がある方はぜひこちらから体験してみてください。