AIと一緒にAbout Meページを作った話

コンテンツビジネスをオンラインで展開しようとしている人が、必ず直面する問題があります。

「自分のプラットフォームをどう作るか」

プロのデザイナーに頼めば数十万円かかる。かといって、自分でゼロからHTMLやCSSを書けるわけでもない。テンプレートを使えばどこかで見たような、没個性なページになってしまう。

今回、私はその問題を、AIを使って解決しました。

完成したページがこれです。

👉 [https://www.kimchiho.biz/about](https://www.kimchiho.biz/about)

このページを作るのにかかった外注費用は、ゼロ円です。

- Claude（Anthropic製AI）：月額課金のみ（数千円）

- systeme.io：既存のウェブサイトプラットフォーム

- 写真：手持ちのものと、スマホで撮影したもの

特別なスキルは必要ありませんでした。必要だったのは、「自分のストーリー」だけです。

まず、これまでの経歴・経験・失敗・気づきを、AIに話しました。文章にする必要はありません。会話するように、思い出したことを順番に話すだけです。

私の場合、保険代理店時代から始まり、デザイン事業での起業、リーマンショックによる借金、離婚、深夜の倉庫でのアルバイト、ネットワークビジネスへの挑戦と失敗、糖尿病の発症——20年以上の話を何回かに分けて話しました。

AIはその内容を整理しながら記録し、About Meとして読者に響く文章に編集してくれました。

ポイントは「編集はAIに任せ、事実と感情は自分が出す」ことです。
AIは文章を整えることは得意ですが、実体験の重みは本人にしか出せません。

文章が固まったら、次はデザインです。

私はAIに「モダンでシャープな黒×白×赤のデザイン」というイメージを伝えました。
すると、AIがHTMLとCSSのコードを丸ごと生成してくれました。

2つのデザイン案を比較して、自分のブランドイメージに合うものを選びました。

デザインの知識がなくても「こっちの方が好き」という感覚だけで選べます。

About Meページに使う写真を用意しました。

- プロフィール写真（お寺の縁側で撮影したもの）

- ダンス指導時代の写真

- 飲食店経営時代の写真

- キッズダンス指導の写真

- デザインの仕事の写真

1つ注意が必要だったのは、未成年の顔が写っている写真です。

キッズダンス指導の写真には生徒の子供たちが写っていたので、AIに頼んで顔の部分にニコちゃんマークを貼り付けてもらいました。これもコードを書く必要はなく、「子供の顔を隠してほしい」と依頼するだけで対応してくれました。（何度もズレた仕上がりだったりもしたので、注意が必要です。）

ただの静的なページではなく、スキル・経験の一覧をクリックすると解説文が表示されるアコーディオン機能を追加しました。

「マーケティング戦略」「友禅柄デザイン」「ジークンドー」など、41個のスキルタグそれぞれに、2〜3行の解説文を付けました。解説文の内容も、これまで話したストーリーからAIが引き出して書いてくれました。

完成したコードを、使用中のウェブサイトプラットフォーム（systeme.io）に実装しました。

ここで一つ詰まったポイントがありました。

CSSコードの貼り付け場所の問題です。

systeme.ioの「ヘッダーコードを編集」という画面にCSSを貼り付けるのですが、`<style>`タグが必要かどうかで混乱しました。

結論としては、`<style>`〜`</style>`タグごと貼り付ける必要があります。

HTMLの本文は「Raw HTML」ブロックというウィジェットを使って貼り付けました。

また、写真のURLも最初は間違えました。systeme.ioのメディアライブラリで表示されるサムネイルURL（`thumb_150`が含まれるもの）ではなく、実際の画像URLが必要です。正しいURLは、ページエディター上で画像を右クリックして「画像アドレスをコピー」することで取得できます。

デザインテンプレートは誰でも使えます。でも、自分が実際に経験した20年の話は、誰も持っていません。

About Meページの役割は「この人は信頼できるか」を読者に判断させることです。そのために必要なのは、華やかな経歴ではなく、失敗も含めたリアルな経験です。

AIが文章を生成してくれますが、それは私が話した内容を整理したものです。AIに丸投げした文章は、どこかで読んだような無難な文章になります。

自分の言葉で話したことをAIが整理する、というプロセスが重要です。

CSSが表示されない、写真が出ない——こういう問題が途中で何度か起きました。そのたびに、スクリーンショットをAIに見せて「こうなっているのだが」と正確に伝えることで解決できました。

エラーメッセージや画面の状態をそのまま共有するのが最も早い解決策です。

このプロセスで必要なスキルは、HTMLもCSSも一切不要です。

必要なのは：

1. 自分のストーリーを話す意志

2. 写真を数枚用意すること

3. AIとのやり取りを続ける粘り強さ

コンテンツビジネスを始めようとしているなら、About Meページは最初に作るべきものの一つです。読者があなたを信頼するかどうかは、このページで決まることが多いからです。

「何から始めればいいかわからない」という人は、まず自分の経歴を箇条書きにして、AIに話しかけてみてください。そこから始められます。

① ストーリー整理｜経歴・経験をAIに話す｜Claude

② 文章作成｜About Me本文の編集｜Claude

③ デザイン生成｜HTML・CSS一式を生成｜Claude

④ 写真加工｜顔隠し・リサイズ｜Claude

⑤ 機能追加｜アコーディオン機能｜Claude

⑥ 実装｜ページへの組み込み｜systeme.io

外注費用：0円

所要時間：数日（ストーリーを固める時間を含む）

自分のプラットフォームを持つことは、コンテンツビジネスの土台です。その土台を作るコストは、今やゼロに近づいています。あとは、あなた自身のストーリーを持っているかどうか、だけです。

きむ・ちほ（金志浩）

kimchiho.biz