入会金0円／契約期間の縛りなし
セミナー開催レポートブログ
Claude Codeを使うと、日本語の指示だけでリンクツリー型の1ページサイトを作り、レンタルサーバーで公開できます。参考画像からAIに要件定義を書かせ、Claude Codeでサイトを生成して言葉で直し、最後にドメインとサーバーを用意してファイルを上げる、という流れです。
2025年8月25日のProcevoの講座では、講師のKEITOが、Claude Code（https://docs.anthropic.com/claude-code）でSNSのプロフィール代わりになるリンク集サイトを作り、エックスサーバー（https://www.xserver.ne.jp/）で公開するまでを実演しました。参加者も同じ手順で手を動かすワークショップ形式でした。
講座で示した大まかな手順は次のとおりです。
セミナーというよりワークショップ形式で、参加者も同じ手順を手を動かしながら進めました。コードエディタ（Cursorなど）のインストールと、ドメイン・サーバーの契約が前提になります。契約前の確認用にテスト環境も用意されていました。
最初のステップは、完成イメージに近いスクリーンショットをAIに渡し、「Linktreeのようなリンク集サイトを、HTMLの静的1ページで作るための要件定義を書いて」と頼むことです。構成は必ず1ページに収め、情報が1画面に収まる形式にする、といった制約を最初に書いておくと、あとからの修正が減ります。
講座ではClaudeを使いましたが、ChatGPTなどでも同様に進められます。出てきた要件定義はざっと確認するだけでよく、細かいデザイン調整はコーディング中の対話で繰り返す前提です。
できた要件定義はテキストエディタに貼り付け、末尾の「この要件に基づいて開発を進めることで〜」といった余分な一文は削ります。ファイル名は scop.md（講座ではこの綴り）などのMarkdownにし、参考にしたサイトのスクリーンショット2枚とあわせて、専用フォルダ（例: linktreesite）に入れます。この3点セットが、Claude Codeへの最初の材料になります。
ターミナル（macOS）またはPowerShell（Windows）でプロジェクトフォルダへ移動し、claude を起動します。フォルダごとドラッグしてパスを渡すか、cd のあとにパスを指定します。日本語を含むパスやOneDrive配下だと、環境によって移動や権限でつまずくことがあります。講座では、パスを短く単純な場所へ移す、PowerShellを最新にする、といった対処が紹介されました。
起動後は、次のような指示を一度に出します。
scop.md のとおりにリンクツリーサイトを作成するClaude Codeはフォルダ内に index.html やCSS、JSなどを書き出します。途中で許可を求められたら内容を確認して進める、という使い方です。生成が終わったら index.html をブラウザで開き、ローカルプレビューで形を確かめます。
一発目の見た目で終わらせず、気になる点を日本語で伝え続けます。プロフィール画像の差し替え、不要なキラキラ絵文字や過剰なアニメーションの削除、ボタン横アイコンの変更などが典型例です。音声入力アプリで長めの指示をまとめて投げる使い方も紹介されました。
アイコンや写真は、あらかじめフォルダに入れてから「このファイルを使って」と指示すると確実です。商用利用可能な無料のイラスト・写真サイトや、画像生成でアイコンを作る方法もあわせて紹介されました。リンク先URLの修正も同じ対話の中で行えます。こだわりすぎると時間がかかるため、講座では一度区切りをつけて公開手順へ進みました。
ある程度形が固まったら、「使っていないHTML要素やアニメーション用のコードを削除して」とリファクタリングを依頼します。残った不要コードが減ると、その後の修正も安定しやすくなります。Claude Codeは作業ディレクトリを把握したまま対話を続けられるため、ファイル名を指定するだけで画像の差し替えも進められます。
ローカルでできたサイトをインターネットに出すには、ドメイン（サイトの住所）とレンタルサーバー（ファイルを置く場所）が必要です。講座ではドメイン取得サービスでの申し込みを試したあと、レンタルサーバー「エックスサーバー（Xserver）」側でサーバーとドメインをそろえる流れを実演しました。申し込み画面では、余計なオプションが付いていないか、支払い内容を確認してから進めるよう注意がありました。
2026年11月時点の公式料金では、エックスサーバーのスタンダードプランは初期費用0円、契約期間ごとの月額換算で3か月契約1,320円〜36か月契約990円（税込）です。表示の月額は分割払いではなく、契約期間分の一括前払いを月あたりに換算した額です。最新の金額とキャンペーンは公式の料金ページ（https://www.xserver.ne.jp/price/）で確認してください。
契約後はサーバーパネルでドメインとサーバーを結びつけ、反映を待ちます。ファイル転送用にはFTP（またはブラウザ上のファイルマネージャ）のアカウントを用意し、公開用ディレクトリ（多くの場合 public_html）だけが見えるよう読み取りディレクトリを絞ると安全です。
完成したフォルダを、サーバーの public_html 配下へアップロードします。複数人が同じ共有サーバーに上げる演習では、フォルダ名を人ごとに変えないと上書きし合うため、名前の重複に注意が必要です。講座ではブラウザのファイルマネージャからフォルダ作成とアップロードを行いました。
公開後にスタイルが崩れる場合は、CSSや画像がサーバー上に無いことが多いです。ローカルでは css や images フォルダごと揃っていても、アップロード漏れやパスのずれで崩れることがあります。ファイルマネージャで index.html と同階層に必要なフォルダがあるか確認し、足りなければ追加で上げます。検索に載せたくない練習用ページには、インデックスさせない設定を入れる方法も触れられました。
参考サイトのURLを渡すだけでも近いページを作れる一方、見た目の裏にある構成まで正確に取るには、画面キャプチャや要件の文章を足した方がよい、というやり取りもありました。逆に、既存サイトのHTMLを渡して「デザインだけ整えて」と頼む使い方もあります。
Webサイトを作って本番環境に公開するまでを3日かけて進めた回はバイブコーディングの始め方｜写真からWebデザイン案を作るスキル実践とバイブコーディングでサイト設計｜FigmaのワイヤーフレームとVercelテスト公開です。
public_html へフォルダごとアップロードするAnthropicのコーディング向けエージェントで、ターミナルからプロジェクトフォルダを指定し、自然言語でファイルの作成や修正を依頼できます。公式サイトは Claude Code（https://claude.com/product/claude-code） です。
本講座の流れでは、HTMLを一から手書きする必要はありません。要件定義と修正指示を日本語で出し、生成物をブラウザで確認しながら進める形です。ただしターミナル操作やファイルのアップロード、ドメイン契約の画面操作は必要です。
多くの場合、CSS・画像・JavaScriptのファイルがサーバーに上がっていないか、パスがずれています。ファイルマネージャで index.html と同じ階層に必要なフォルダがあるか確認してください。
静的なHTMLを置けるレンタルサーバーや、GitHub Pages・Netlify・Vercelなどの静的ホスティングでも公開できます。講座では共有のレンタルサーバーへのアップロードを実習しました。
ClaudeでもChatGPTでも構いません。参考画像を添付できるモデルを選び、1ページ構成や色の指定など制約を先に書くのがポイントです。
商用利用可能な無料のイラスト・写真サイトを使う方法と、画像生成でアイコンを作る方法が紹介されました。使うファイルはプロジェクトフォルダに入れてから、ファイル名を指定して配置を依頼します。
アーカイブ動画はProcevoで見られます
プランは登録のあとに選べます
