Claude Code オフ会 ワークキット ・ リベシティ版

リベのプロフィールから
自分のポートフォリオを作る

HTMLを書いたことがなくても大丈夫。プログラミングの知識もゼロでOK。リベシティのプロフィールをコピーして貼り付けるだけで、Claude Codeがあなた専用のポートフォリオサイトを作ってくれます!できたURLは、そのままリベのプロフィール欄に貼れます。

流れはたった3つ

手順の話に入る前に、これから何をやるのかだけ先に説明します。

STEP 1

プロフィールを貼ってページを作る

リベのプロフィール(自己紹介・スキル・SNSのURL)をコピーして Claude Code に貼ると、パソコンの中に index.html(ポートフォリオ本体)が1枚できます。まだ自分しか見られない状態です。

STEP 2

対話で見た目と中身を育てる

最初は白黒のシンプルな土台。そこに「この色にして」「実績も足して」と話しかけて作っていきます。

STEP 3

世界に公開してリベに貼る

Cloudflare Pages(無料の公開スペース)に公開すると https://〇〇.pages.dev という自分だけのURLが出ます(この作業が)。あとはリベのプロフィール「各種SNS・URL」欄に貼って完成。

あなたの役割は「指示する人」だけ。コードもコマンドも AI がやります。プロフィールを貼って、「こうしたい」を伝えて、確認するだけ。

このワークキットでできること

先に3つだけ準備します

むずかしい操作はありません。点線の言葉は押すと意味が出ます。まず、このあとずっと使う「プロンプトの送り方」だけ覚えましょう。

プロンプトの送り方(これだけ覚えればOK)
① プロンプトの「コピー」ボタンを押す ② Claude の下にある入力欄をクリックして貼り付け(command+V / Ctrl+V) ③ Enter キーで送る。これの繰り返しです。
PREP 1

Claude アプリを開く

まだ入れていなければ claude.ai/download から入れて開く。下にチャット入力欄が出ればOK。

PREP 2

フォルダと道具を用意してもらう

下のプロンプトを送るだけで、作業フォルダ作りと、公開に使う道具()の用意を、Claude がまとめてやってくれます。

PREP 3

に登録する

ページを無料で公開する場所です。① dash.cloudflare.com/sign-up を開く ② メールとパスワードを決めて登録 ③ 届いたメールのボタンを押す。無料・カード登録不要。英語ならブラウザの翻訳でOK。

!
PREP 2 ・ Claude にまとめてお任せ
フォルダ作りと道具の用意を、まとめて頼む
下のプロンプトをコピーして Claude に送る。あとは画面の指示に従うだけ
Claude に入力する文章
私のパソコンに、これから作業するフォルダと、サイトを公開するための道具をまとめて用意してください。私が Mac と Windows のどちらを使っているかを最初に確認してから、その環境に合った方法で進めてください。 手順: 1. デスクトップに「リベのプロフィールサイト」という名前のフォルダを作り、その中に「写真」というサブフォルダも作る。作成後は、このフォルダを作業場所として開いた状態にする 2. node -v を実行して Node.js が入っているか確認。入っていなければ、私のパソコンに合った方法でインストール (Mac の場合:Homebrew を使う。Homebrew 自体が入っていなければ公式インストール手順から先に進める) (Windows の場合:winget(Windows に標準で入っているインストール用の仕組み)を使う) 3. npm install -g wrangler で wrangler をインストール 4. 最後に wrangler --version を実行して、バージョンが表示されればOK 各コマンドを実行する前に「これから○○を実行します」と一言伝えてください。途中でパソコンのパスワード(管理者パスワード)を求められたら、私に教えてください。私が手元で入力します。
つまずきポイント:Cloudflare のメール認証メールが届かない場合は、迷惑メールフォルダを確認してください。無料プラン(Free)のままで本キットの全機能が足ります。「Pro」や「Business」などの有料プランを選ぶ必要はありません(途中で勧められる画面が出ても無視してOK)。

プロフィールから、パソコンの中でページを作る

まだ世界には出しません。プロフィールをコピーして貼るだけで、パソコンの中にポートフォリオができます。本名・住所は載せません(プロンプトに入れてあるので自動で守られます)。

1
STEP 1 ・ 開いておく
リベのプロフィール画面を開く
リベのプロフィール画面を開いておく。次のステップで、ここから文章をコピーします
2
STEP 2 ・ 貼って送る
プロンプトとプロフィールを貼って送る
下の順番どおりにやればOK(コピーは1回ずつ使うので、この順番が大事)
  1. 下の「コピー」ボタンを押す
  2. Claude の入力欄をクリックして貼り付ける(command+V / Ctrl+V)
  3. リベのプロフィール画面に戻り、「自己紹介」から「その他、ご自由にどうぞ!」までをなぞってコピー(command+C / Ctrl+C)
  4. Claude に戻り、一番下の [ここにプロフィールを貼り付け] を消して貼り付ける
  5. Enter で送る
Claude に入力する文章(末尾にプロフィールを貼り付け)
以下は私のリベシティのプロフィールです。これを元に、デスクトップの「リベのプロフィールサイト」フォルダの中に、HTML ファイル1つでポートフォリオサイトを作ってください。 仕様: - ファイル名は index.html - CSS と JS はすべて <style> / <script> タグの中にインラインで書く - まずは「白黒モノトーン」の最小構成にする。色は後から足すので、今は黒・白・グレーだけで上品にまとめる - セクションは「ヘッダー(表示名+ひとこと)」「自己紹介」「スキル・ポートフォリオ」「各種SNS・URL」の4つ - あとから配色やセクション(実績・お問い合わせ等)を足しやすいよう、CSS変数で色を一括管理し、セクションごとに区切った素直な構造にする - スマホでも崩れないようレスポンシブに(meta viewport を入れる) - 画像はこの段階では入れず、アイコンが入る場所だけ枠で示しておく - 文字コードは UTF-8 安全ルール(必ず守ってください): - 本名、住所、生年月日、電話番号、メールアドレスは絶対に書き込まない(プロフィール内にあっても載せない) - 表示名は私がリベで使っているニックネームをそのまま使う - 連絡先は直接のメールではなく、SNS の DM などの間接ルートだけにする - 情報商材サイトのURLやアフィリエイトリンクは載せない このフォルダに index.html というファイル名で保存してください。 保存できたら、続けて私のパソコンの既定のブラウザで index.html をそのまま開くところまでやってください。(Mac なら open、Windows なら start など、私の環境に合ったコマンドを使ってください) --- ここから私のリベシティのプロフィール --- [ここにプロフィールを貼り付け]
3
STEP 3 ・ 見るだけ
ブラウザで開いて確かめる
Claude が自動でブラウザを開きます。自分のページが出ればOK
4
STEP 4 ・ 話しかける
色や中身を、話しかけて変える
直したいことを文章で送るだけ。下の例はそのままコピーして使えます
そのままコピーして送れる例
私の活動に合う色を3案出して テーマカラーを深い藍色にして スキルをカード型で並べて 実績のセクションを追加して SNSリンクをボタンにして ダークモードに切り替えられるようにして
5
STEP 5 ・ 送る+画像を入れる
アイコンを入れる
下のプロンプトを送る。使う画像は、リベのアイコンか自分で撮った写真だけ
他人の顔・キャラ・有名人の写真は使わない。顔を出すかどうかはリベの公開設定に合わせると安全。→ 安全ルール
Claude に入力する文章
index.html のヘッダー(表示名のとなり)に、「写真」フォルダの中の icon.png を円形で表示してください。 仕様: - 画像の場所は 写真/icon.png(私が後で「写真」フォルダに icon.png という名前で入れます) - 円形(border-radius: 50%)に切り抜く - 横幅は 120px くらい、スマホでは 88px に小さく - 画像が見つからない場合に備えて、alt 属性に「プロフィールアイコン」と書いておく

送ったあと、アイコンをフォルダに入れます

  1. 使うアイコン画像のファイル名を icon.png に変える
  2. それを「リベのプロフィールサイト」→「写真」フォルダに入れる
  3. ブラウザを更新(command+R / Ctrl+R)して、アイコンが出ればOK

やり方が分からなければ、Claude に「写真フォルダのアイコンを表示したい。手順を教えて」と送れば案内してくれます。

6
STEP 6 ・ 今日の目玉
プロフィールを診断してもらう
下のプロンプトを送るだけ。直す案が出てきます。OKした分だけサイトに反映されます
Claude に入力する文章
さっき貼ったリベシティのプロフィールを、リベシティ推奨の書き方に照らして診断してください。観点は次の5つです。 1. 表示名に「何をしている人か」が一言で添えられているか 2. 自己紹介の冒頭に、自分を一言で表すフレーズがあるか/「今の自分・これまでの自分」が書かれているか 3. 「挑戦していること・興味のあること」が書かれているか 4. スキル・ポートフォリオ・実績が、信頼につながる形で具体的に書かれているか 5. 各種SNS・URL が適切か(情報商材・アフィリエイトリンクが混じっていないか) 進め方: - まず、足りない点・ズレている点を「観点ごとに」箇条書きで指摘してください - それぞれに、私の活動に合わせた修正案(書き換え例)を添えてください - 私が「この項目はOK」と承認したものだけ、ポートフォリオサイト(index.html)の本文に反映してください。承認していない指摘は勝手に反映しないでください - 個人情報(本名・住所・生年月日・連絡先)は引き続きサイトに載せないでください
7
STEP 7 ・ 見て直す
スマホでの見え方を整える
ブラウザの幅を狭めて見る。崩れていたら下の例を送って直してもらう
そのままコピーして送れる例
スマホ幅で文字が大きすぎるので調整して スマホでスキルのカードを1列に並べて スマホで横スクロールが出ないようにして
これで のポートフォリオが完成。次は世界に公開して、リベのプロフィールに貼ります

Cloudflare Pages で公開して、リベに貼る

作ったページを、世界から見られるURLにします(この作業が )。あなたはプロンプトを送って、ブラウザで1回「許可」を押すだけ。公開した瞬間から誰でも見られます。最後にURLをリベのプロフィールに貼って完成です。

1
STEP 1 ・ 送る
ログインを頼む
下のプロンプトを送る。Claude が長いURL(https://〜)を返してきます
Claude に入力する文章
wrangler login を実行して、Cloudflare アカウントに紐づけてください。 実行する前に「これから wrangler login を実行します」と一言伝えてください。 コマンドを実行すると認証URLが表示されるはずなので、その URL を私にそのまま教えてください(私がブラウザで開いて承認します)。
2
STEP 2 ・ 許可する
「許可」を1回押す
下の順番どおりにやればOK
  1. Claude が返した長いURL(https://〜)をなぞってコピー
  2. ブラウザの上の白い欄に貼り付けて Enter
  3. ログインして、「Allow(許可)」のボタンを押す
  4. Claude に戻り、止まっていたら「承認しました。続けて」と送る

これはあなた自身のアカウントを許可するだけなので安全です。画面が英語なら、右上で日本語に切り替えられます。

3
STEP 3 ・ ここで世界に出ます
公開してもらう
下の順番どおりにやればOK
  1. 下の「コピー」ボタンを押す
  2. Claude の入力欄に貼り付ける
  3. 文中の [ニックネーム] を、自分のニックネームに書き換える(英語の小文字だけ。例:taro。日本語はダメ)
  4. Enter で送る
Claude に入力する文章(プロジェクト名は自分で差し替え)
いまの「リベのプロフィールサイト」フォルダを Cloudflare Pages で公開してください。プロジェクト名は libe-profile-[ニックネーム] でお願いします(本名は含めません)。 進め方: 1. まず「libe-profile-[ニックネーム]」という名前で Cloudflare Pages のプロジェクトを新しく作る(本番ブランチは main) 2. 続けて、このフォルダの中身を本番として公開する(コミットメッセージは deploy のような英数字でOK) 3. もし「プロジェクトが見つからない」と言われたら、先にプロジェクトを作ってからもう一度公開してください 完了したら、表示される公開URL(.pages.dev で終わるアドレス)を私に教えてください。
4
STEP 4 ・ 開いて確認
公開URLを開いて確認する
返ってきたURLをブラウザで開く。これがあなたのページです
公開URL(例)
https://libe-profile-yourname.pages.dev
↑ ここに自分のニックネーム入りのURLが入ります。これをリベのプロフィールに貼ります
このURLは誰でも見られます。リベに貼る前に「自分の親が見ても大丈夫か」を確認。消したくなったら、おまけの 削除方法 でいつでも消せます。
Claude に入力する文章(スマホで開きたいとき)
いま公開された URL の QR コード(スマホのカメラで読み取れる四角いマーク)を作って、画面に大きく表示してください。iPhone のカメラですぐ読み取れるようにしたいです。
5
STEP 5 ・ 送る
直して、もう一度公開する
「ここを変えて、もう一回公開して」と頼むだけ。URLはそのまま、中身だけ新しくなります
Claude に入力する文章
index.html のフッターに「最終更新:(今日の日付)」と表示する一行を追加してください。 追加できたら、さっきと同じプロジェクトにもう一度公開(デプロイ)して、本番に反映してください。完了したら「ブラウザで再読み込みして確認して」と私に伝えてください。
URL はそのまま、中身だけ最新。これがあなたのサイトの基本サイクル

公開する前に守る4つのこと

公開したURLは誰でも見られます。一度ネットに出たものは、消しても完全には戻りません。ワーク② の前に1度は目を通してください。くわしくは各カードの「くわしく」から。

1. 個人情報を載せない

本人を特定できる情報は置かない。一度検索エンジンに拾われると、消しても痕跡が残ります。

2. 他人の素材を勝手に使わない

画像・文章・音楽・キャラには「作った人の権利」がある。「ネットで拾った」は使う理由になりません。

3. パスワードや「APIキー」を書かせない

今回は使いませんが大事なので一言。秘密の文字列を HTML に直接書かせない。公開した瞬間に世界中から読めてしまいます。

4. 公開URLは「誰でも見られる」

.pages.dev は認証なしで誰でもアクセスできる。「URLを知る人=見られる人」だと考えてください。

うまくいかない・消したいとき

つまずいたら、まずここを見てください。公開したサイトを消す手順もここにあります。

気が変わったら、URLごと削除する

公開したサイトを世界から消したくなったときの手順。「URLそのものを存在しない状態にする」のは Cloudflare ダッシュボード(dash.cloudflare.com/自分のアカウントで Cloudflare 上のものを管理する画面)からのプロジェクト削除が確実です。

かんたんなのは「Claude Code に頼む」
公開したときと同じように、Claude Code に 「さっき公開した libe-profile-◯◯ のプロジェクトを削除して」と頼めば、消す作業もやってくれます。これが一番ラクです。リベのプロフィールに貼ったURLも忘れず外しましょう。
自分でブラウザから消す場合
  1. dash.cloudflare.com にログイン
  2. 左メニュー「Workers & Pages」をクリック
  3. 削除したいプロジェクト名をクリック
  4. 上部タブ「Settings」 → 一番下の「Delete project」
  5. 確認のためプロジェクト名を入力して削除
削除後の注意:プロジェクトを削除すると .pages.dev の URL は即座に消えます。ただし、検索エンジンのキャッシュや、誰かがスクショ・コピペしたコンテンツは残ります。「世界に出したものは完全には戻せない」と覚えておいてください。

途中で詰まりやすいポイント

参加者が一度はぶつかる質問だけ集めました。同じ症状になったら、まずここを開いてください。

wrangler: command not found(コマンドが見つかりません)と出る
PREP 2 の wrangler インストールが終わっていない可能性が高い。Claude Code に「wrangler --version を実行して、入っていなかったら npm install -g wrangler(wrangler を入れ直すコマンド)をやり直してください」と頼むと早いです。
wrangler login でブラウザが開かない
Claude Code のメッセージの中に https://dash.cloudflare.com/oauth2/auth?... という長いURL(認証用のURL)が書かれているはず。それをコピーして、自分でブラウザのアドレスバーに貼り付けて開けばOK。
デプロイは成功したのに、URLを開いたら真っ白
ファイル名が index.html になっているか確認してください。Cloudflare Pages はURLを開いたとき自動で index.html という名前のファイルを探す仕組みです。mypage.html など違う名前のままだと表示されません。
もう一度デプロイしたのに、ブラウザの表示が古いまま
ブラウザのキャッシュ(一度見たページを高速表示するためにブラウザがコッソリ保存している過去データ)が原因です。command + shift + R で強制リロード(キャッシュを無視して再読み込み)、それでもダメならシークレットウィンドウ(履歴やキャッシュを使わない別ウィンドウ)で開いてみてください。Cloudflare 側の反映自体は数秒で終わっています。
プロジェクト名を間違えた / 変えたい
プロジェクト名はあとから変更できません。やり直す場合は、いまのプロジェクトを削除してから、新しい名前で wrangler pages deploy を実行します。
URLが検索結果に出てしまった、消したい
まずプロジェクトごと削除(上の「削除手順」参照)。検索エンジンへの削除リクエストは Google Search Console の「URL 削除ツール」から出せますが、反映に数日〜数週間かかる場合あり。そもそも公開前のセルフチェックを最重要視するのが結局いちばん早い。

できあがったURLを、リベのプロフィール「各種SNS・URL」欄に貼れば完成です。おつかれさまでした。