Pachat.ai
Claude Codeを初めて使うなら、結果をはっきり確認できる作業から始めましょう。今回はポートフォリオのトップページにある About me リンクを直します。使うのはHTMLファイル2つだけで、Webサイトの公開は不要です。ファイルの差分とクリック結果で、正しく直ったか判断できます。
以下のメッセージはコピーして使える練習用の指示で、画像は練習用Webページです。モデルの返答は異なる場合があるため、保存されたファイルとクリック結果で確認してください。
1. インストールして練習フォルダーを開く
Claude Codeがインストール済みなら、バージョン確認へ進みます。初めての場合は、OSに合ったコマンドをターミナルで実行してください。どちらもAnthropic公式クイックスタートに記載の方法です。
macOS、Linux、WSL：
curl -fsSL https://claude.ai/install.sh | bash
Windows PowerShell：
irm https://claude.ai/install.ps1 | iex
WindowsのこのコマンドはCMDではなくPowerShellで実行します。インストールが終わったら新しいターミナルを開き、次を実行します。
claude --version
期待する結果：Claude Codeのバージョン番号が表示されます。コマンドが見つからない場合は、先に公式クイックスタートのインストール問題の案内を確認してください。
ファイルマネージャーで claude-code-link-exercise フォルダーを作成します。ターミナルで cd に続けてそのフルパスを入力し、空白を含む場合は半角の二重引用符で囲みます。下のパスは自分のものに置き換えてください。
cd "/path/to/claude-code-link-exercise" claude
初回起動では、Claude Codeを利用できるアカウントでブラウザの案内に従ってログインします。ブラウザが開かない場合は、ターミナルの指示に従ってログインURLをコピーしてください。詳しくは公式ログイン案内にあります。セッションの作業ディレクトリが、この練習フォルダーになっているか確認します。
2. 2つのページを作り、リンク切れを再現する
練習フォルダー内に、プレーンテキストエディターまたはコードエディターで次の2つのファイルを作成します。名前は正確に index.html と about.html とし、末尾に .txt が付かないようにします。それぞれに対応するコードをすべてコピーして保存してください。
index.html：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Alex — Thoughtful design</title> <style> :root { color-scheme: light; --ink: #202722; --paper: #f5f3eb; --muted: #62695f; --line: #d8dcd0; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, sans-serif; line-height: 1.6; } .wrap { max-width: 1060px; margin: auto; padding: 0 32px; } header { display: flex; justify-content: space-between; gap: 16px; padding: 28px 0; border-bottom: 1px solid var(--line); } .label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .muted { color: var(--muted); } .hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: center; padding: 76px 0; } h1 { margin: 14px 0 24px; font-size: clamp(42px, 6vw, 70px); line-height: 1.04; font-weight: 500; letter-spacing: -.05em; } .intro { max-width: 420px; font-size: 18px; } a { display: inline-block; margin-top: 12px; padding: 12px 24px; background: var(--ink); color: white; border-radius: 30px; text-decoration: none; font-weight: 700; } a:hover { background: #3d5340; } a:focus-visible { outline: 3px solid #717f38; outline-offset: 5px; } .note { padding: 32px; border-radius: 24px; background: #dfe7c9; transform: rotate(3deg); } .symbol { margin: 20px 0; font-size: 100px; line-height: 1; } .note p:last-child { margin-bottom: 0; font-size: 20px; } .work { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 22px 0 54px; } article { padding: 28px; border: 1px solid var(--line); border-radius: 18px; } h2 { margin: 12px 0 4px; font-size: 24px; font-weight: 500; } article p:last-child { margin-bottom: 0; } footer { padding: 22px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } @media (max-width: 650px) { .wrap { padding: 0 22px; } .hero { grid-template-columns: 1fr; gap: 36px; padding: 44px 0; } .work { grid-template-columns: 1fr; } .symbol { font-size: 72px; } } </style> </head> <body> <div class="wrap"> <header><span class="label">Alex / Product designer</span><span class="label muted">Fictional portfolio</span></header> <main> <section class="hero" aria-labelledby="intro-title"> <div><p class="label muted">Simple things, considered</p><h1 id="intro-title">Less friction.<br>More good days.</h1><p class="intro muted">I'm Alex. I explore clear, useful interfaces for the small things that fill our days.</p> <a href="about-me.html">About me</a></div> <aside class="note"><p class="label">A note to design by</p><div class="symbol" aria-hidden="true">✳</div><p>Make room for what matters.<br>Give every detail a purpose.</p></aside> </section> <p class="label muted">Selected concepts / 01—02</p> <section class="work" aria-label="Fictional design concepts"> <article><p class="label muted">01 / Planning</p><h2>A calmer Monday</h2><p class="muted">A weekly planner concept that helps people choose one clear next step.</p></article> <article><p class="label muted">02 / Reading</p><h2>Room to read</h2><p class="muted">A reading list concept with quiet typography and space to pause.</p></article> </section> </main> <footer>Alex is a fictional designer. These concepts are part of a coding exercise.</footer> </div> </body> </html>
about.html：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>About me — Alex</title> <style> :root { color-scheme: light; --ink: #202722; --paper: #f5f3eb; --muted: #62695f; --line: #d8dcd0; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, sans-serif; line-height: 1.6; } .wrap { max-width: 860px; margin: auto; padding: 0 32px; } header { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); } .label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } a { color: var(--ink); text-underline-offset: 5px; } a:hover { color: #3d5340; } a:focus-visible { outline: 3px solid #717f38; outline-offset: 5px; } main { padding: 66px 0; } h1 { margin: 14px 0 26px; font-size: clamp(44px, 8vw, 72px); line-height: 1.04; font-weight: 500; letter-spacing: -.05em; } .intro { max-width: 620px; font-size: 22px; } .muted { color: var(--muted); } .card { margin-top: 38px; padding: 28px 32px; background: #dfe7c9; border-radius: 22px; } h2 { margin-top: 0; font-size: 24px; font-weight: 500; } ul { margin-bottom: 0; padding-left: 20px; } li + li { margin-top: 10px; } footer { padding: 22px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } @media (max-width: 650px) { .wrap { padding: 0 22px; } main { padding: 44px 0; } .card { padding: 24px; } } </style> </head> <body> <div class="wrap"> <header><span class="label">Alex / Product designer</span><a href="index.html">Back to home</a></header> <main> <p class="label muted">A little context</p> <h1>About me</h1> <p class="intro">I'm Alex, a fictional product designer who likes making everyday tools easier to understand.</p> <p class="muted">My concept projects explore planning and reading. I start with a small question, sketch a clear path, and check the details that help someone take the next step.</p> <section class="card" aria-labelledby="approach-title"> <h2 id="approach-title">How I approach a problem</h2> <ul><li>Understand what someone is trying to do.</li><li>Make the next step easy to find.</li><li>Check that the little things work, too.</li></ul> </section> </main> <footer>This fictional portfolio was made for a coding exercise. It contains no real client work or contact details.</footer> </div> </body> </html>
index.html をダブルクリックしてブラウザで開き、About me を押します。トップページのリンク先は about-me.html ですが、存在するファイルは about.html なので、紹介ページに移動できません。エラー表示はブラウザによって異なりますが、問題はファイル名の不一致です。
ファイルマネージャーで index.html をコピーし、コピーしたファイルを index.before.html と名付けます。比較と復元に使う元のバックアップです。この練習にGitは必要ありません。
3. 編集せずに原因を調べてもらう
開いてあるClaude Codeセッションに、次を送ります。
現在の練習フォルダー内のindex.htmlとabout.htmlだけを確認し、ファイルは変更しないでください。 トップページのAbout meリンクが開きません。href、実際に存在する移動先ファイル、その不一致を示してください。 index.before.htmlは元のバックアップです。変更せず、修正対象のページとしても扱わないでください。 最後に、変更すべき一か所を提案してください。
確認する答え：トップページには about-me.html と書かれており、存在するファイルは about.html であること。修正案がトップページのリンクの href 一か所に限定されていることです。
about-me.html の新規作成、ページ全体の書き直し、スタイル変更を提案されたら、先に範囲を訂正します。正しい移動先ページは既にあるので、誤ったURLに合わせて別のページを作る必要はありません。調査後に変更を限定する進め方は、Anthropicのバグ修正ワークフローにも沿っています。
4. リンクだけを直し、差分を見る
原因を確認したら、続けて次を送ります。
index.htmlのAbout meリンクのhrefだけを、about-me.htmlからabout.htmlに変えてください。 リンクの文字、スタイル、ほかの本文、about.html、index.before.htmlは変更しないでください。 保存後にindex.before.htmlとindex.htmlを比較し、実際のファイル差分と変更したファイルの一覧を示してください。 Webページを公開・デプロイしないでください。
権限確認が表示されたら、対象ファイルと操作が指示の範囲内かを確認します。表示の有無は現在の権限モードと設定によって変わるため、確認画面が出なかったことを「編集されていない」と解釈しないでください。
変わるべきなのは移動先のファイル名だけです。
- <a href="about-me.html">About me</a></div> + <a href="about.html">About me</a></div>
これが今回の許可された変更です。実際の差分には行番号や前後の変更していないコードも表示されることがあります。エディターで index.html を開き、href を検索して保存後の値を確認します。バックアップには古い値が残っているかも確かめます。ページ全体や別のファイルまで変わっていたら、「一か所だけ」という条件をまだ満たしていません。
5. ブラウザで動作を確認する
トップページに戻って再読み込みするか、練習フォルダーの index.html をもう一度ダブルクリックします。About me を押し、次を確認してください。
| 確認項目 | 期待する結果 |
|---|---|
| トップページのリンクを押す | ローカルの about.html が開く |
| 内容を見る | ファイルが見つからないエラーではなく、About me 見出しが表示される |
| トップページへ戻る | Back to home で index.html が開く |
| 変更範囲を確認する | index.html の移動先だけが変わり、バックアップと紹介ページは元のまま |
まだ開かない場合は、アドレス欄に古い about-me.html が残っていないか確認します。別のコピーではなく、この練習フォルダーを開いているかも確かめてください。ファイル名が about.html.txt になっていないこと、2つのファイルが同じフォルダー内にあることも確認します。
判断基準は実際のクリック結果です。Claude Codeの「直しました」という返答で、この確認を代用しないでください。
6. 元に戻して変更を管理する
練習が終わったら、エディターで index.before.html を開き、すべての内容を index.html にコピーして保存します。トップページを再読み込みし、もう一度 About me を押すと、元のリンク切れが戻るはずです。編集前の状態を復元できたことが分かります。
修正済みの状態を残したければ、一か所の about-me.html を再び about.html に変え、前節のクリック確認を繰り返します。原因を説明できること、最小限の変更を確認できること、元に戻せることが、この練習の完了条件です。
実際のプロジェクトで別のエージェントにレビューを依頼する場合は、関連コードと差分を渡せます。接続と役割分担は既存のPachatのClaude Code連携ガイドにあります。今回の練習はローカルだけで完了できます。
参考資料
- Claude Codeクイックスタート、Anthropic（英語）。
- ログインと認証、Anthropic（英語）。
- 権限の設定、Anthropic（英語）。
- 一般的なワークフロー、Anthropic（英語）。
- Claude Codeと他のエージェントの連携、Pachat（英語）。
