Web制作者がAIでポートフォリオを作ってみたら想像以上だった話

CMSレスサイトを作ってみたい、WordPressと実際に比較してみたい——そういった考えがあり、まずはAIと一緒にサイトを作ってみることにしました。

作るのはポートフォリオサイトです。もともとポートフォリオはRESUME（ポートフォリオ作成サービス）で作っていたのですが、この機会に自分でゼロから作り直してみることにしました。

AIにコードを書かせたり、デザインの相談をしたりしながら、実際に公開まで持っていった体験をそのままレポートします。「AIって結局どこまでできるの？」と気になっている方の参考になれば嬉しいです。

---

今回作ったもの

静的サイト（WordPressを使わないHTML/CSS/JSで作るサイト）として、自分のポートフォリオサイトをゼロから制作しました。

掲載コンテンツ：
– Hero（キャッチコピーと顔写真）
– About（自己紹介）
– Works（制作実績 / Bento UIグリッド）
– Skills（使用技術アイコン）
– Blog（WordPressブログの最新記事を自動取得）
– Contact（お問い合わせフォーム）

使用技術： HTML / CSS / jQuery / PHP / Git
エディタ： VSCode
サーバー： 既存の本番サーバーにアップ

---

制作の全体フロー

AIと進めた大きな流れはこちらです。

① 方向性の決定

まず「どんなサイトにするか」をAIと一緒に整理しました。参考サイトを2つ提示して、そこから自分のイメージに近いデザインの方向性を決めていきました。

この段階でカラーパレット、フォント、レイアウトの基本を決定。ミントグリーン×ウォームグレーのデザインに落ち着きました。

AIにやってもらったこと：
– 参考サイトの分析と言語化
– カラーコードの提案（メインカラー・ホバー色・背景色など）
– セクション構成の提案

② ディレクトリ構成とHTML骨格の作成

サイトの構造をどう組むかもAIに相談しながら決めました。

HTMLの骨格もAIが生成。セクションごとのクラス名の命名ルールもBEM記法に統一されていました。

③ セクションごとにコーディング

Hero → About → Works → Skills → Blog → Contact の順番でひとつずつ実装していきました。

各セクションでAIに「このセクションのHTML/CSSを書いて」と指示→自分でVSCodeに貼り付け→ブラウザで確認→修正指示、という流れを繰り返しました。

④ 細部の調整・動作確認

ハンバーガーメニューのアニメーションや、スクロール時のフェードインなど、動きのある部分もAIが実装。ただしピクセル単位の微調整は自分でVSCodeを直接編集しました。

⑤ 公開

すべての動作確認が終わったら、FTPでサーバーにアップして完成です。

---

詰まったポイント3選と解決法

スムーズに進んだわけではなく、詰まった場面もいくつかありました。実際に起きた問題と解決法を紹介します。

詰まり① ブログ記事の自動取得でCORSエラーが連発

ポートフォリオにWordPressブログの最新記事を自動で表示させたかったのですが、ここが一番手こずりました。

最初はRSSフィードをJavaScriptで取得しようとしたのですが、CORSエラー（異なるドメイン間でのデータ取得を制限するブラウザのセキュリティ機能）が発生して取得できませんでした。

AIと一緒にいくつかの解決策を試しました。

試した方法	結果
rss2json.com（RSSをJSON変換するサービス）	422エラーで失敗
allorigins.win（CORSプロキシサービス）	403エラーで失敗
corsproxy.io（同上）	CORSエラーで失敗
WordPress REST API	✅ 成功

最終的にWordPress REST API（WordPressが標準で持っているデータ取得の仕組み）を使うことで解決しました。https://ブログのURL/wp-json/wp/v2/posts というURLにアクセスするだけで記事データをJSON形式で取得できます。

外部サービスに頼らず自前のWordPressから直接データを取れるので、これが一番安定した方法でした。

詰まり② お問い合わせフォームの件名が文字化け

PHPでお問い合わせフォームを作ったところ、メールの件名が文字化けしてしまいました。日本語メールの文字コード設定が原因です。

最初は mb_encode_mimeheader() という関数を使う方法を試していましたが、うまくいかず。AIに相談したところ、mb_language('Japanese') と mb_send_mail() を組み合わせる方法で解決しました。

日本語メールは mb_send_mail() に任せるのがシンプルで確実、というのが今回の学びです。

詰まり③ SVGアイコンの自動生成が失敗し続ける

スキルセクションにWordPress・HTML・CSS・jQueryなどのアイコンを表示したかったのですが、AIにSVGを生成してもらおうとしてもうまくいきませんでした。

著作権や再現精度の問題もあるのかな？既存のブランドロゴをAIが正確に再現するのは難しいようです。

解決策はsimpleicons.org から手動でSVGをダウンロードすること。著作権フリーのブランドアイコンを配布しているサービスで、ここから直接ファイルを取得してプロジェクトに組み込みました。AIに自動でダウンロードさせる方法も試しましたが、結局手動が一番確実でした。

---

AIと制作してみての正直な感想

良かった点

設計・構成を考えてくれる
「何から始めればいいかわからない」という最初の壁を一緒に越えてくれます。参考サイトを渡すだけでカラーパレットやレイアウトの提案が出てくるのは、一人で作るよりずっとスムーズでした。

コードの雛形をすぐ出してくれる
自分でゼロからHTMLを書くより圧倒的に速いです。ある程度の骨格を出してもらってから細部を調整する、という進め方が効率的でした。

わからないことをその場で聞ける
エラーが出たときもコードをそのまま貼り付けて「これどういう意味？」と聞けます。ドキュメントを検索する手間が大幅に減りました。

思ったより難しかった点

ピクセル単位の細部調整はやっぱり自分で
「ハンバーガーメニューの線の位置をもう少し上に」とか、微妙なズレの修正はAIへの言語化が難しく、最終的にVSCodeで直接数値を変えた方が早いと感じました。

SVGなど自動化が難しいものがある
上述のアイコン問題のように、「AIに全部やってもらえる」わけではなく、手作業が必要な部分もありました。

バイブコーディングとの比較

「バイブコーディング（Vibe Coding）」という言葉があります。コードをほとんど理解せずにAIの指示だけで動くものを作るスタイルのことです。

今回はと言うとバイブコーディングではなくAIペアプログラミングといったところでしょうか。HTML・CSS・PHPの知識があったから生成されたコードを読んで判断できたし、細部は自分で修正しました。

基本的な部分はAIに任せ、細部は自らコーディングで仕上げるというスタイルが今のところベストな使い方かなというのが正直な感想です。コードが読めると「この部分はおかしい」という判断もできますし、指示の精度も上がります。

---

WordPress初心者の方へ

今回作ったのは静的サイトでしたが、WordPressサイトを作る場合でも、AIとの進め方は基本的に同じです。

• わからない用語はその場で聞く
• エラーはコピーしてそのまま貼り付ける
• 「これを直して」より「なぜこうなるか説明して」と聞く方が学びになる

AIは「答えを出すツール」でもありますが、「一緒に考えてくれる相棒」として使うと、自分のスキルアップにも繋がります。

---

まとめ

AIとのポートフォリオ制作、全体を通じて「想像以上に使えるな」というのが正直な感想です。

特に設計フェーズの壁を下げてくれる点と、エラー解決のスピードは大きかったです。一人で詰まって何時間も悩む、という体験がほぼなくなりました。

一方で「AIに全部任せればOK」ではなく、自分の知識や判断力があってこそ活きるツールだとも感じました。

今後は「本当のバイブコーディング」＝コードを読まずにAIだけで作る体験も試してみたいと思っています。自分で作る場合との比較も含めて、また記事にするのでお楽しみに！