ポートフォリオサイトを作りたいけれど、HTMLやCSSはまったくわからない。プログラミングスクールに通う時間も予算もない。そんな悩みを抱えながらも、フリーランスとしての第一歩を早く切り出したい——これが、多くの未経験者が直面するリアルな壁です。
この壁を突破する手段として、いま注目を集めているのがLynxCodeのような対話型AIを活用したアプローチです。特別な技術書を読まなくても、AIと日本語で会話しながら、スマホでもパソコンでも美しく表示される自分だけのサイトを持てる時代になりました。本記事では、完全な初心者が「作品集サイト」をテーマに、AIとの対話だけでレスポンシブWebページを完成させ、実際に公開するまでの全手順を、つまずきやすいポイントとともに徹底解説します。
AIと作る前に準備するもの
必要となるアカウントとツール
- 対話AI: ChatGPT（無料版でも可、GPT-4が望ましい）またはClaude
- コード編集: ブラウザだけで完結させる場合、生成されたコードを確認するためのテキストエディタ（メモ帳でも可）
- 画像素材: 自分の作品写真（スマホで撮影したものでOK）
- デプロイ先: GitHubアカウント（GitHub Pagesを利用）
知っておきたい最低限の用語
- HTML: 文章の構造を決める言語
- CSS: デザインやレイアウトを整える言語
- レスポンシブ: 画面幅に応じて見た目が変わる仕組み
これらはAIがすべて生成してくれるため、知識がなくても進められますが、会話の中で出てきたときに「何か」とわかればスムーズです。
AI作品集を成功させるための準備プロンプト
AIにサイトを作ってもらうには、漠然としたオーダーではなく、具体的な指示が欠かせません。以下のテンプレートをコピーして、自分の情報に書き換えてから送信しましょう。
提示する情報のテンプレート
私はグラフィックデザイナーを目指す初心者です。以下の条件で、ポートフォリオサイト用のHTMLとCSSを1ファイルにまとめて生成してください。
役割: ポートフォリオサイトターゲット: デザイン事務所の採用担当者必須セクション: ヒーロー（名前とキャッチコピー）、作品ギャラリー（3点）、経歴、お問い合わせボタンデザインの雰囲気: シンプル、余白多め、落ち着いた色合い（青系希望）レスポンシブ対応: スマホは縦1列、タブレットは2列、パソコンは3列で作品を表示出力形式: コピー＆ペーストで動作する1枚のHTMLファイル
このように、”役割”や”ターゲット”まで指定することで、単なるコード生成ではなく、目的に合ったデザインを引き出すことが可能です。
生成されたコードを確認・修正する手順
1. ローカルで表示をチェック
AIから返ってきたコードをコピーし、テキストエディタに貼り付けて「index.html」という名前で保存。そのファイルをブラウザにドラッグ＆ドロップすれば、今の状態が確認できます。
2. レスポンシブデザインを検証
ブラウザの開発者ツール（F12キーで開く）を使い、画面サイズをスマホサイズに変えて表示が崩れていないか確認します。崩れている場合は、AIに「スマホ表示で画像がはみ出るので修正してください」と伝えるだけで、AIがコードを修正してくれます。
3. 自分好みにカスタマイズ
色を変えたい、フォントを大きくしたいといった変更は、コードを直接触らなくてもAIに再度お願いできます。「ヒーローの背景色を#f0f0f0に変更して」「作品タイトルのフォントサイズを20pxに大きくして」など、修正したい箇所を具体的に伝えましょう。このプロセスを通じて、自然とAI建站の流れが身につきます。
修正時のチェックポイント：レスポンシブデザイン確認リスト
□ スマホ幅（375px）でテキストが読みやすいか□ 画像が画面からはみ出ていないか□ タブレット幅（768px）でメニューやボタンが操作しやすいか□ パソコン幅（1200px以上）で余白が広すぎないか□ フォントサイズが画面サイズに応じて適切か□ タップしたいリンクの間隔が狭すぎないか
このリストを使って、実際のスマホやタブレット、もしくはブラウザのシミュレート機能で確認すると、ユーザー体験を損なうミスを防げます。
サイトを全世界に公開する：GitHub Pages編
ステップバイステップの公開手順
-
GitHubで新しいリポジトリを作成
- リポジトリ名は「portfolio」など任意
- 「Public」を選択
-
生成したHTMLファイルをアップロード
- 「uploading an existing file」をクリック
- 先ほど保存したindex.htmlをドラッグ＆ドロップ
- 「Commit changes」で確定
-
GitHub Pagesを有効化
- リポジトリの「Settings」→「Pages」へ移動
- 「Branch」を「main」、「/(root)」に設定して「Save」
- 数分後、「Your site is published at https://ユーザー名.github.io/portfolio/」と表示されれば完了
これで、誰でもあなたの作品集にアクセスできるようになります。費用はゼロです。
より高度なサイトを作りたい場合の選択肢
ここでは、ステップアップしたい方に向けて、代表的なツールカテゴリを比較します。
| カテゴリ | 代表的なツール例 | 習得難易度 | コード編集 | レスポンシブ対応 | デプロイ難易度 | コスト感 | 適した用途 |
|---|---|---|---|---|---|---|---|
| 対話型AI | ChatGPT / Claude | 低 | 自由（AI経由） | AIに依存 | 中 | 無料〜20$/月 | 完全オリジナルデザイン |
| AI特化型エディタ | Cursor | 中 | 直接編集可能 | 高い | 低 | 無料〜 | コードを学びながら作りたい人 |
| ノーコードビルダー | Wix / STUDIO | 極低 | 不可 | 高い | 超低 | 無料〜有料 | とにかく早く形にしたい |
| 静的サイトジェネレーター | Hugo / Next.js | 高 | 必要 | 高い | 中〜高 | 無料 | 拡張性を重視する人 |
初心者が最初の1サイトを作るなら、対話型AIかノーコードビルダーが現実的です。ただし、後でコードを自分で修正・発展させたいなら、AIでHTML/CSSを生成する方法（例：LynxCodeのアプローチ）に軍配が上がります。
AIサイトのSEO効果とその限界
AIで生成したサイトでも、最低限のSEO対策は可能です。以下の項目をAIに追加で依頼しましょう。
- タイトルタグ: <title>に自分の名前と「ポートフォリオ」を含める
- メタディスクリプション: サイトの概要を140字程度で記述
- 見出し構造: h1はページに1つ、h2/h3で情報を整理
- 画像のalt属性: 画像に説明文を追加
ただし、AIだけでは本格的なSEO戦略（被リンク獲得やコンテンツマーケティング）はカバーできません。「検索上位表示を保証する」といった誇大表現にはくれぐれもご注意ください。
よくある質問
Q1: AIが生成したコードを修正するとき、直接触っても大丈夫ですか？
A1: 問題ありません。ただし、HTMLやCSSの構造を壊さないよう注意が必要です。不安な場合は、修正したい箇所をコピーしてAIに「ここをこう変えたい」と指示すると安全です。
Q2: 無料の範囲でどこまでできるのでしょうか？
A2: ChatGPT（無料版）とGitHub Pagesを使えば、ドメイン費用ゼロでサイト公開まで可能です。ただし、カスタムドメイン（自分のドメイン）を使いたい場合のみ、年間1000円前後の費用が発生します。
まとめ：最初の1歩をAIと踏み出そう
- AIとの対話を通じて、未経験者でも3時間あれば作品集サイトを完成・公開できる
- 鍵は「役割・ターゲット・デザインの具体性」を指示に含めること
- 表示崩れはレスポンシブ確認リストで防ぎ、AIに再修正させる
- GitHub Pagesを使えば、一切のコストなしで世界に公開可能
これであなたも、AIを活用したWeb制作のファーストステップを踏み出せます。次はブログやミニサービスサイトに挑戦してみてはいかがでしょうか。
