就職・転職活動やフリーランスとしての営業活動において、ポートフォリオサイトは自分のスキルや実績を証明する重要なツールです。しかし「HTMLやCSSを書けないから作れない」「デザインセンスに自信がない」という理由で、作成をためらっている方も多いのではないでしょうか。
バイブコーディングを活用すれば、プログラミング知識がなくても、AIへの自然な指示だけでプロ品質のポートフォリオサイトを完成させることができます。本記事では、ゼロからポートフォリオサイトを作り上げるまでの具体的な手順を、順を追って丁寧に解説します。
バイブコーディングでポートフォリオサイトを作るとはどういうことか
バイブコーディングの基本的な仕組み
バイブコーディングとは、AIに対して自然言語（日常的な言葉）で指示を出すことで、コードの生成・修正・改善をAIに任せるWeb制作手法です。「こんなサイトにしたい」というイメージをテキストで伝えるだけで、AIがHTML・CSS・JavaScriptのコードを自動生成します。
従来のWeb制作では、デザインツールでモックアップを作り、コーディングを行い、動作確認を繰り返すという工程が必要でした。バイブコーディングではこのすべてのプロセスをAIと対話しながら進めるため、制作時間を大幅に短縮できるのが最大の特徴です。
ポートフォリオサイト制作にバイブコーディングが向いている理由
ポートフォリオサイトはバイブコーディングと特に相性が良いジャンルです。その理由は以下の通りです。
- 構成がシンプルで、AIへの指示が伝えやすい
- 自分の個性やスタイルを反映しやすく、細かい修正依頼も自然言語で完結する
- テンプレートに縛られず、オリジナルのデザインを実現しやすい
- ページ数が少ないため、短時間で完成形を確認できる
特にデザイナーやイラストレーター、ライター、エンジニアなど、クリエイティブ職を目指す方にとって、自分でポートフォリオサイトを作れること自体がスキルのアピールにもなります。
制作前に準備しておくべきこと
素材と掲載内容を整理する
バイブコーディングでスムーズにサイトを作るためには、事前に掲載する素材と情報をまとめておくことが重要です。AIへの指示精度を上げるためにも、以下の要素を準備しておきましょう。
- 自己紹介文：氏名、職種、得意分野、経歴を簡潔にまとめたテキスト
- 作品・実績データ：掲載したい作品の画像・タイトル・説明文
- スキルリスト：使用できるツールや言語、得意な業務領域
- 連絡先情報：メールアドレス、SNSのリンクなど
- 参考サイト：デザインの方向性として参考にしたいサイトのURL
デザインの方向性を決める
AIへの指示を具体的にするためにも、完成形のイメージを事前に固めておきましょう。「シンプルでモノトーンなミニマルデザイン」「明るくカラフルでポップな印象」「落ち着いたダークトーンでプロフェッショナルな雰囲気」など、ひと言でデザインの方向性を表現できる状態にしておくと、AIへの指示がスムーズになります。
また、フォントの好み（明朝体系かゴシック体系か）、メインカラーの指定、アニメーションの有無なども決めておくと、より理想に近いサイトが出来上がります。
ポートフォリオサイトを作る具体的な手順
ステップ1：ページ構成と全体の骨格を作る
まず最初に、サイト全体の構成をAIに指示して骨格を作ります。このとき、一度にすべての要素を詰め込まず、ページの大枠を作ることだけに集中するのがコツです。
指示の例としては、「シングルページのポートフォリオサイトを作ってください。セクションは『ヒーロー』『自己紹介』『スキル』『制作実績』『お問い合わせ』の5つで構成してください。全体的にシンプルでミニマルなデザインにしてください」のように伝えます。
AIが生成したコードをブラウザで確認し、構成に問題がなければ次のステップへ進みます。この段階では細かいデザインよりも、セクションの順番や全体の流れが正しいかどうかを確認することが大切です。
ステップ2：ヒーローセクションを作り込む
ヒーローセクションはサイトを訪問したユーザーが最初に目にする部分です。第一印象を決める重要な箇所なので、丁寧に作り込みましょう。
指示の例：「ヒーローセクションに、職種名と氏名を大きく表示してください。背景は濃いネイビーで、テキストは白にしてください。キャッチコピーとして『UI/UXデザイナー 山田花子』と表示し、その下に『ユーザーに寄り添うデザインを提供します』というサブテキストを追加してください。下部には『実績を見る』ボタンを設置してください。」
生成されたデザインを確認し、「フォントをもう少し大きくしてください」「ボタンの角を丸くしてください」など、気になる点を追加で指示して調整します。
ステップ3：制作実績セクションを構築する
ポートフォリオサイトの核心となる制作実績セクションは、見せ方が特に重要です。カード形式のグリッドレイアウトは視覚的に整理されていてよく使われるデザインです。
指示の例：「制作実績セクションを3カラムのカードグリッドで表示してください。各カードにはサムネイル画像、プロジェクト名、使用ツール、簡単な説明文を含めてください。カードにホバーしたときにわずかに浮き上がるアニメーションも追加してください。」
実際の作品画像や説明文は、事前に準備した素材をそのまま指示文に含めることで、AIがコードに組み込んでくれます。
ステップ4：細部を調整してクオリティを上げる
骨格と主要セクションが完成したら、細部の調整でクオリティを高めます。この段階では以下のような指示を順番に出していくと効率的です。
- スムーズスクロールの実装：「ナビゲーションのリンクをクリックしたときに滑らかにスクロールするようにしてください」
- レスポンシブ対応の確認：「スマートフォン表示でも崩れないようにレイアウトを調整してください」
- フォントの統一：「サイト全体のフォントをNoto Sans JPに統一してください」
- 余白の調整：「各セクション間の余白をもう少し広くとってください」
一つの指示で一つの変更を依頼するのが、意図した修正を確実に反映させるコツです。複数の変更を同時に依頼すると、意図しない箇所まで変更される場合があります。
完成したサイトを公開する方法
おすすめの公開方法
バイブコーディングで作成したポートフォリオサイトは、生成されたHTMLファイルをホスティングサービスにアップロードするだけで公開できます。初心者にとって使いやすい代表的なサービスとしては、GitHubのリポジトリと連携して無料でサイトを公開できるGitHub Pagesや、ドラッグ＆ドロップでファイルをアップロードするだけで公開できるNetlify、手軽にURLを発行して共有できるVercelなどがあります。
どのサービスも無料プランで十分な機能が使えるため、まずは無料で公開してみることをおすすめします。独自ドメインを使いたい場合は、有料プランへの切り替えや別途ドメイン取得が必要になります。
公開前に確認すべきSEOチェックポイント
ポートフォリオサイトを検索エンジンで見つけてもらいやすくするためにも、公開前に最低限のSEO対策を行いましょう。AIへの指示で対応できる項目も多くあります。
- title タグの設定：「ページタイトルを『山田花子 | UI/UXデザイナーポートフォリオ』に設定してください」
- meta descriptionの設定：自己紹介文を120文字以内でまとめた説明文を設定する
- OGP画像の設定：SNSでシェアされたときに表示される画像を指定する
- 画像のalt属性：「各画像にわかりやすいalt属性を追加してください」
まとめ
バイブコーディングを使ったポートフォリオサイト制作の手順をまとめると、以下のステップで進めることができます。
- 掲載素材とデザインの方向性を事前に整理する
- AIへの指示でページの骨格を作る
- 各セクションを順番に作り込む
- 細部を調整してクオリティを高める
- ホスティングサービスを使って公開する
重要なのは、一度にすべてを完成させようとせず、セクションごとに確認しながら進めることです。AIへの指示は具体的であればあるほど精度が上がるため、色・フォント・レイアウトを明確に伝える習慣をつけましょう。
プログラミング知識ゼロでも、アイデアと素材さえ準備できれば、プロが作ったようなポートフォリオサイトが完成します。自分の実績を最大限に魅せるポートフォリオサイトを、ぜひバイブコーディングで作ってみてください。
VibeCoder を使えば、今回紹介した手順をすぐに実践できます。AIとの対話だけでサイト制作を体験できるVibeCoder で、今すぐポートフォリオサイト作りを始めてみませんか。