生成AIで初心者がウェブサイトを作る方法

TL;DR

生成AIに作りたい機能を文章で伝えると、HTML、CSS、JavaScriptの生成からプレビュー、公開まで進められる。まずはストップウォッチや個人用記録アプリを試し、顧客情報を扱う企業サイトやECサイトには専用サービスを選ぶのが、臼井氏の推奨である。

Transcript

こんにちはクロスリーグの高柳です今回の テーマはチャットGPTだけじゃないAI の活用法サイト作成編ということでは前回 に引き続き ハリウッド大学準教授草株式会社代表 の井巧さんですよろしくお願いします よろしくお願いします 前回は音楽作成ということで 結構アップテンポであと縦のりの はい高穴のテーマソングを戦圧ながら作らせていただきました 人生初テーマソングを作ってもらいましたが 良かったです 今回はウェブサイトの作成方法ということで私情報工学大学の時行していって あそうだったんですね はい結構ウェブサイトを作るってなるとコードが必要なイメージがあって苦戦した記憶があるんですが はいはいおっしゃる通りですね ウェブサイトを作る際はHTMLCSS Javascririptといったなんか 難し... Read More

Key Insights

• ウェブサイトは、構造を作るHTML、色や配置を整えるCSS、ボタンなどの動作を実現するJavaScriptという3要素で構成される。
• 生成AIは、ストップウォッチを作るといった短い依頼からコードを生成し、開始、停止、リセット、ラップ記録を備えたページを形にできる。
• CodePenは、HTML、CSS、JavaScriptを別々に入力して結果を表示でき、骨組み、装飾、動作が追加される過程を段階的に確認できる。
• デプロイは、手元で動くページを他人もアクセスできる状態にする工程であり、Boltでは公開操作によって共有用リンクを発行できる。
• AIサイト制作は、既製サービスでは満たしにくい個人的な記録ツールや、事業アイデアの価値を試すMVPの作成に適している。
• 企業ホームページやECサイトは、セキュリティや個人情報管理が伴うため、臼井氏はAIでの自作より既存の専用サービスを推奨している。
• Boltは、一文の指示から陸上競技の練習記録アプリを生成し、日付選択、種目別入力、記録保存、スマートフォン表示まで用意した。
• AIで先に動く成果物を作る学び方は、必要性を実感してから基礎を学ぶ流れを生み、制作への好奇心や継続意欲につながると臼井氏は述べている。
• 🎬 このチャンネルの他の動画:
  • ChatGPTでExcelを自動化する方法
  • なぜ若手社員は3年以内に退職するのか？
  • 生成AIで曖昧な指示をタスク化する方法
• 📺 このチャンネル: TBS CROSS DIG with Bloomberg

Questions & Answers

Q: 生成AIでウェブサイトを作る方法は？

作りたい機能をClaude、ChatGPT、Boltなどへ文章で伝え、生成されたページを確認して修正を重ねます。HTML、CSS、JavaScriptのコードを個別に得る方法もあれば、Boltのように画面生成から公開まで進める方法もあります。最初はストップウォッチなどの小さな題材が推奨されています。

Q: HTML、CSS、JavaScriptの役割とは何ですか？

HTMLはページの骨組み、CSSは色や配置などの見た目、JavaScriptはボタンや計測などの動作を担当します。実演ではHTMLだけでは操作できず、CSSを加えると画面が整い、最後にJavaScriptを加えることでストップウォッチが動作するようになりました。

Q: 生成したコードの動作を確認する方法は？

CodePenへHTML、CSS、JavaScriptをそれぞれ貼り付けると、ページの表示と動作を確認できます。実演ではHTMLによる骨組み、CSSによる装飾、JavaScriptによる動作を順番に加え、各要素が完成画面へどう影響するかを段階的に確認しました。

Q: AIで作ったウェブサイトを公開する方法は？

Boltなどの公開機能からデプロイを実行し、発行されたリンクを共有します。デプロイとは、手元だけで動くページをサーバー上へ公開し、他人のスマートフォンなどからもアクセスできる状態にする工程です。実演ではNetlifyを利用する公開機能が紹介されました。

Q: AIでのサイト制作はどのような用途に向いていますか？

個人だけが使う専用ツールや、事業アイデアを検証するためのMVPに向いています。実演では陸上競技の練習記録、Excel関数生成、幸福感の記録、2人だけで使うSNSなど、一般向けサービスでは満たしにくい限定的な需要を形にした例が示されました。

Q: 企業ホームページやECサイトもAIで自作すべきですか？

臼井氏は、多くの人にはAIによる自作を推奨していません。企業サイトや通販サイトでは、セキュリティや顧客の個人情報を適切に扱う必要があるためです。企業ホームページにはSTUDIO、ECサイトにはShopifyやBASEなど、既存の専用サービスを使う選択肢が紹介されています。

Q: MVPとは何ですか、AIで作る利点は？

MVPは、必要な機能を最小限に備え、価値を確かめられる試作品です。AIを使えば、アイデアの初期版を短時間で形にし、身近な人へ使ってもらえます。反応や支払い意向を確かめてからエンジニアを迎え、本格的な開発へ進む流れが説明されています。

Q: 初心者はどのようなアプリから作り始めればよいですか？

ストップウォッチ、メモ、タスク管理など、機能が少なく目的の明確なアプリから始めるのがよいとされています。複雑なSNSは完成まで何度もやり取りが必要だった例もあるため、小さな制作でAIへの指示方法を覚え、その後に記録機能やログイン機能へ広げる進め方が適しています。

Summary & Key Takeaways

• ウェブサイトは、骨組みを担うHTML、見た目を整えるCSS、動きを加えるJavaScriptで構成される。ClaudeやChatGPTへ必要なコードの生成を依頼し、CodePenへ貼り付けると、それぞれの役割を段階的に確認できる。Claudeでは、ストップウォッチを作るという短い指示だけでも、開始、停止、リセット、ラップ記録を備えた画面を生成できる。

• 作成したページを他人も使える状態にする工程はデプロイと呼ばれる。Boltでは、作りたいサービスを文章で指示して生成し、公開操作を行うことでリンクを発行できる。実演された陸上競技の練習記録アプリは、日付や種目別記録の入力、保存、過去記録の表示、スマートフォン向け画面を備え、簡単な一文から形になった。

• AIによるサイト制作は、個人専用ツールや事業アイデアのMVPを素早く試す用途に向く。一方、臼井氏は、会社のホームページにはSTUDIO、ECサイトにはShopifyやBASEなどの既存サービスを推奨している。顧客情報やセキュリティを扱う本格運用では追加知識が必要であり、まず試作品で価値を確かめてから開発へ進むことが重要である。