PR この記事にはアフィリエイト広告が含まれます。料金・キャンペーン等は申込み前に公式サイトで最新情報をご確認ください。
「Webサイトを作ってみたい。」 そう思って検索を始めたのに、気づけばブラウザのタブだけが増えていた。 WordPress、Framer、HTML、CSS、AIサイトビルダー、Codex。 選択肢が増えたぶん、最初の一歩はむしろ分かりにくくなっています。 この記事では「どのAIが一番すごいか」ではなく、初心者が実際に1サイトを完成させるまでを一緒に歩きます。
最初に決めるのはツールではない
Web制作を始めると、つい「何を使うか」から考えてしまいます。
でも最初に決めたいのは、誰に何を見せるサイトなのか、です。
たとえばポートフォリオなら、目的は制作実績を見てもらい、問い合わせにつなげること。ブログなら、読者に役立つ情報を蓄積し、検索から読まれること。目的が違えば、選ぶ道具も変わります。
ある初心者が最初のサイトを作る
まずChatGPTを開いて、「個人のポートフォリオサイトを1ページで作りたい」と相談します。
返ってきたのは、ファーストビュー、制作実績、サービス、プロフィール、問い合わせ。思っていたよりシンプルです。
ここで初めて、「これなら作れそうだ」と感じます。
次に、作り方を選びます。
| 作り方 | 向いている人 | 特徴 |
|---|---|---|
| WordPress＋AI | ブログ・メディア・長期運用 | 更新しやすく、情報発信と相性がよい |
| Framer等＋AI | LP・ポートフォリオ・デザイン重視 | 視覚的に作りやすい |
| Codex＋コード | 自由な実装・Webアプリ・独自UI | コードベースを直接扱える |
| AIサイトビルダー | 最短で公開したい | 設定項目が少なく始めやすい |
WordPressを選んだ場合
ブログや長く育てるサイトなら、WordPressは有力な選択肢です。
ただし最初にサーバーとドメインを用意します。ここで多くの初心者が一度止まります。
「サーバーって何を選べばいい？」という疑問が出たら、その時点で比較記事へ進めば十分です。
コードから作りたい場合
もう少し自由に作りたいならCodexを使う方法があります。OpenAIはCodexを、コードを読み、編集し、実行して開発作業を進めるコーディングエージェントとして提供しています。
最初から全部のコードを理解する必要はありません。小さな1ページを作り、表示して、直して、分からない部分を聞く。制作と学習を同時に進められます。
AIを使うと「作る前の勉強」が短くなる
以前はHTMLとCSSを勉強してからサイトを作ろうとする人も多くいました。
今は、先に作り始めてもいい。分からない言葉が出てきたらAIに聞き、必要な部分だけ覚えます。
作る → 困る → 聞く → 直す。この順番なら、学んだことがすぐ画面に反映されます。
最初のサイトでやらなくていいこと
- 全ページを最初から作る
- 完璧なデザインにする
- AIツールを何個も契約する
- 高度なアニメーションを入れる
- SEOを最初から完璧にする
最初のゴールは、「公開された1ページ」です。
公開した瞬間から、次の課題が見える
サイトを公開すると、初めて具体的な疑問が出てきます。
スマホで少し崩れる。文章が長い。問い合わせボタンが弱い。読み込みが遅い。
でも、これは失敗ではありません。Web制作が本当に始まった証拠です。
ここからAIに改善を頼みます。「375px幅で崩れている」「この見出しを短くしたい」「CTAを目立たせたい」。
最初の1サイトは、完成品でありながら、教材にもなります。
仕事にするなら、その次へ
1サイト完成すると、「これを仕事にできる？」という疑問が出てきます。
そのとき初めて、副業やポートフォリオ、学習サービスの話につながります。
まとめ
AI時代のWeb制作で重要なのは、すべてをAIに任せることではありません。
自分が方向を決め、AIに案を出してもらい、画面を見て判断し、また修正する。
最初の一歩は、ツールを比較し続けることではなく、小さなWebサイトを1つ完成させることです。
