1これからやること

全体のイメージをつかみます

ホームページを作り直すのは、お店の改装に似ています。いまのお店を壊してから考えるのではなく、先にいまのお店の写真を撮っておき、すてきなお店を見て回り、仮の店で試してから、本番を入れ替えます。

いまのお店を
残しておく

手を入れる前に、いまのページの写しを残します。いつでも戻せるので、思い切って試せます

すてきなお店を
見て回る

「すてき」と感じるサイトを集めて、どこがすてきなのかを、Claude Codeにことばにしてもらいます

仮の店で試す

新しい案は、別のファイルで作ります。検索に出ない確認用のURLに出して、スマホで見ます

本番を
入れ替える

点検をしてから公開します。公開するのは、「公開して」と伝えたときだけです

いまホームページがある人も、これから作る人も、同じ指示書で進められます。指示書の最初に、Claude Codeが「いまホームページがありますか」と聞いてくれます。

2わたしのホームページで、
何が変わったか

作り直す前と、作り直したあとを見比べます

作り直す前のページは、スマホで見ると文字が続いて、「文字ばかりでつまらない」と感じていました。作り直したあとのページは、ayano-direction.com で見られます。

スマホの幅（375px）で、同じ数え方をしました。

数えてみると、文字は減っていません。ページの長さも、ほぼ同じです。変わったのは、写真の数と、見せ方でした。「文字ばかり」に見えていた理由は、文字の量ではなく、写真がなく文字だけが続く場所が長かったことです。

• 最初の画面：小さな写真3枚から、大きな写真1枚へ。ことばは短く、大きく
• 制作事例：文字の説明から、写真が主役の横スライドへ。7つの事例を、同じ寸法の型でそろえました
• 文字の太さと色：フォントは同じまま、細い字とブラウングレーへ。黒くて太い字は、わたしらしくありませんでした
• 順番：考え方 → 制作事例 → お手伝いできること → プロフィール → お問い合わせ。同じことを言う節は、外しました
• お問い合わせ：公式LINEとフォームの、どちらかを選べる形に

枠の中は、上下に動かして見られます。文字だけが続く場所と、写真が入る場所の間隔を見比べてください。

作り直しにかかった期間は、9月25日から10月3日まで。その間に、直す前の写しを67回残しました。途中の案を、別のファイルで作って見比べたことも、何度もあります。

310の手順

実際にたどった順番です。指示書にも、同じ順番で入っています

1戻し先を作る

手を入れる前に、いまの版の写しを残します。直すたびに、番号つきの写しを残します

2現在地を数える

スマホの幅で、ページの長さ、写真の枚数、文字数を数えます。Instagramなど、ほかの場所と、名前や肩書きの書き方がそろっているかも見ます

3軸のことばを聞く

肩書き、考え方、強みは、自分のことばで伝えます。Claude Codeが先に書いた文は、仮として扱います

4参考サイトを
分析する

「すてき」と感じたサイトを3つから5つ。Claude Codeが実物を開いて、最初の画面、写真の置き方、余白、文字の量、動きをことばにします。取り入れる点と、取り入れない点を分けます

5新しい案を
別のファイルで作る

いまのページは残したまま、新しい案を作ります。検索に出ない確認用のURLに出して、スマホで見ます

6わたしらしさと
照らし合わせる

色、フォント、文字の太さを、自分の決まりと比べます。フォントが同じでも、太さと色がちがうと、自分らしさが消えます

7直しの往復

気になった点を、1つずつ伝えます。迷う点は、試し版を作って並べて比べます。写真の候補は、並べた画像で見て選びます

8文章の仕上げ

数字と期間が事実と合っているか。表記がそろっているか。お客さまの名前を出してよいか

9公開前の点検

パソコンとスマホの幅で、はみ出し、写真、リンクを確かめます。最後は、自分のスマホで通して見ます

10公開と、
公開後の確認

「公開して」と伝えて公開します。本番が新しい版に切り替わったか、写真が全部届いているかを確かめます

手本にするのは、構成と見せ方です。参考サイトの文章、写真、ロゴは使いません。わたしの場合、手本のサイトは角が丸いデザインでしたが、自分の決まりに合わせて四角のままにしました。

4指示書を貼って、はじめる

貼るのは、この1枚だけです

• Claude Codeで「新規」を押して、「Claude Code作業」のフォルダを選びます
• 下の指示書をコピーして、貼ります
• あとは、Claude Codeの質問に、1つずつ答えていきます

先に用意しておくと、進みやすいもの

• 「すてき」と感じるサイトのURLを、3つから5つ。同じ業種でなくて大丈夫です
• 使いたい写真を入れたフォルダ
• 自分の色やフォントの決まりがあれば、その場所
• いまホームページがある人は、そのURLか、ファイルの場所

ホームページを作りたいです。いまあるホームページを直す場合も、同じ進め方でお願いします。
次の約束と手順で、最後まで案内してください。

【進め方の約束】
・手順が1つ終わるたびに、できたものを見せて、わたしの返事を待ってから次へ進んでください
・質問は、1回に1つずつにしてください
・肩書き、考え方、強みなど、わたしについての文章は、わたしに聞いてから書いてください。聞く前に書いた文には「仮」と書き、わたしの文が届くまで公開しないでください
・数字や実績は、わたしが伝えたものだけを使ってください。推測で足さないでください
・お客さまの名前は、わたしが「出してよい」と言ったものだけ書いてください。それ以外は業種の呼び方（例：フラワーショップさま）にしてください
・お客さまの連絡先、住所、口座などの個人情報は、わたしに聞かないでください。ページにも入れないでください
・鍵のファイル（.env など）は開かないでください。パスワードや鍵が映っている画面のスクショは、わたしも送りません
・ファイルを消すとき、文章や節を外すときは、先にわたしに聞いてください
・公開は、わたしが「公開して」と言ってから行ってください
・決まったことは、そのつど「ホームページ」フォルダの中の「決まったことメモ.md」に書き足してください。作り直す前に、必ず読み返してください
・わたしに見せる確認用のURLは、いつも1つだけにしてください
・このホームページのファイルは、この会話だけで直します。会話を分けるときは、「決まったことメモ.md」に続きを書いてから分けてください

【手順】
1. 戻し先を作る
はじめに、いまの作業フォルダの場所を伝えてください。次に、いまホームページがあるかを聞いてください。ある場合は、URLか、ファイルの場所を聞いてください。
作業フォルダの中に「ホームページ」フォルダを作ります。いまのページがある場合は、手を入れる前に、日付つきの写しを残してください。これから直すたびに、直す前の写しを番号つきで残してください。

2. 現在地を数える（いまのページがある場合）
スマホの幅（375px）で開いて、ページの長さが画面何枚分か、写真が何枚か、文字が何文字かを数えて、表で見せてください。
Instagramなど、ほかに使っている場所があれば、名前と肩書きの書き方をわたしに聞いて、表記がそろっているかを表にしてください。

3. 軸のことばを聞く
誰に向けたページか、肩書き、大切にしていること、お願いできること、見た人にしてほしい行動（例：公式LINEの登録、お問い合わせ）を、1つずつ聞いてください。

4. 参考サイトを分析する
わたしが「すてき」と感じるサイトのURLを、3つから5つ聞いてください。実物を開いて、最初の画面、写真の置き方、余白、文字の量、動きを、ことばにして見せてください。開けなかったサイトは、開けなかったと伝えてください。
そのうえで「取り入れる点」と「取り入れない点」を表にして、わたしに確認してください。手本にするのは、構成と見せ方だけです。文章、写真、ロゴは使わないでください。

5. 新しい案を別のファイルで作り、確認用のURLに出す
使う写真のフォルダを聞いてください。写真は一覧にした画像で見せて、どこに使うかをわたしが選べるようにしてください。お客さまの仕事の写真は、誰の仕事の写真かを、わたしに確認してください。
いまのページは残したまま、新しい案を別のファイルで作ってください。スマホの幅とパソコンの幅の両方で画面を撮って、わたしに見せてください。
見せてよいとわたしが言ったら、Cloudflare Pages に、確認用のプロジェクトを本番とは別に作って出してください。確認用のページには、検索に出ない設定（noindex）を入れてください。Cloudflare のアカウントがなければ、作り方を案内してください。登録とログインは、わたしが自分でします。
出したら、URLを伝えてください。わたしがスマホで見ます。

6. わたしらしさと照らし合わせる
色、フォント、文字の太さ、使ってほしくない表現を、わたしに聞いてください。ブランドの決まりをまとめたものがあれば、場所を聞いて読んでください。
いまの案と照らし合わせて、ちがっている点を表にして見せてください。フォントが同じでも、太さと色がちがうと印象が変わるので、太さと色も比べてください。

7. 直しの往復
わたしが、気になった点を1つずつ伝えます。直す前の写しを残してから直し、直したところを画面で見せてください。
迷う点は、試し版を別のファイルで作って、いまの版と並べた画像で見せてください。確認用のURLは増やさないでください。決まったら、使わなかった試し版をどうするか、わたしに聞いてください。
節を直すときは、先に「このページに必要か、何を伝える節か」を考えて、意見を聞かせてください。

8. 文章の仕上げ
数字と期間が、わたしの伝えた事実と合っているか。表記がそろっているか。お客さまの名前の出し方が、約束どおりか。全文を点検して、表で見せてください。

9. 公開前の点検
次の項目を1つずつ確かめて、結果を表で見せてください。
・パソコンの幅2つ（1366pxと1920px）とスマホの幅（375px）で、横にはみ出していないか
・写真が全部表示されているか、切れていないか
・リンクが全部つながっているか
・検索に出ない設定（noindex）を、本番に出すページから外したか
・お問い合わせフォームがある場合、送信先は合っているか。メールアドレスがページにそのまま出ていないか
・写真の取り違えがないか（元のフォルダを見て、誰の仕事の写真かを照合する）
・ほかの作業の途中のものが混ざっていないか（前の版との差分を見る）
そのあと、わたしが自分のスマホで、上から下まで通して見ます。

10. 公開と、公開後の確認
わたしが「公開して」と言ったら、公開する直前の版を写しとして残してから、Cloudflare Pages の本番のプロジェクトに出してください。独自ドメインをつなぐ場合は、Cloudflare の公式の手順を開いて確かめてから、案内してください。
公開後に、本番のURLが新しい版に切り替わったか、写真が全部届いているか、検索に出ない設定が外れているかを確かめて、報告してください。フォームの送信テストは、わたしが自分で送ります。

では、手順1からはじめてください。

Cloudflareへの登録とログインは、ご自身で行います。パスワードや鍵が映っている画面は、スクショを送らないでください。スクショに写ったものは、そのままClaude Codeに渡ります。

5進めるときのコツ

わたしが実際にやって、うまくいった伝え方です

直し方が分からなくても大丈夫です。わたしは、こう伝えました。

• 「文字ばかりでつまらない」
• 「文字の色が黒くてかっこいいけど、わたしらしさあるかしら」
• 「このセクションいりますか。何を伝えてる？」
• 「スライドがどうしたら見られるか、わかりにくい」

感じたことを伝えると、Claude Codeが原因を調べて、直し方を出してくれます。

一度にたくさん伝えると、どれが直って、どれが直っていないかが分からなくなります。1つ伝えて、直ったものを見てから、次を伝えます。

「どちらがいいか分からない」ときは、試し版を作ってもらって、並べた画像で比べます。最初の画面の写真も、英語のことばも、並べて見てから決めました。

スマホで見て気になったところは、スクショを貼って「ここが気になる」と伝えます。ことばで説明するより、早く正確に伝わります。

考え方の文は、わたしが自分で書きました。Claude Codeに頼んだのは、読みにくいところの手直しだけです。自分のことを語る文は、自分のことばのほうが伝わります。

6実際に起きた失敗

同じことが起きないように、指示書に約束として入れてあります

確認用のURLが
4つになった

試し版をいくつも出して、どれがいまの版か分からなくなりました。見せるURLは、いつも1つだけにします

事例の写真を
取り違えた

ある事例に、別のお仕事の写真が入っていました。自分のスマホで見て、気づきました。写真は、元のフォルダを見て、誰の仕事の写真かを照合します

確認用の設定が
残っていた

検索に出ない設定と、メールアドレスがそのまま出るフォームの送信先が、公開の直前まで残っていました。公開前の点検表に入れます

伝えた希望が
抜けた

「事例は横スライドがいい」と伝えていたのに、作り直しのときに抜けました。決まったことはメモに残し、作り直す前に読み返してもらいます

2つの会話で
同じファイルを
直した

別の会話の作業が、同じファイルに入っていました。同じファイルは、1つの会話だけで直します

7公開前の点検

指示書の手順9で、Claude Codeが確かめる項目です。結果を一緒に見ます

• パソコンの幅2つと、スマホの幅で、横にはみ出していない
• 写真が全部表示されていて、切れていない
• リンクが全部つながっている
• 検索に出ない設定を、本番に出すページから外した
• フォームの送信先が合っている。メールアドレスがページにそのまま出ていない
• 写真の取り違えがない
• ほかの作業の途中のものが混ざっていない
• 自分のスマホで、上から下まで通して見た

最後の項目は、ご自身にしかできません。写真の取り違えは、画面の点検では見つからず、わたしが自分のスマホで見て気づきました。