プロフィールリンク集（Linktree風）
SNSのプロフィールに置くリンクまとめページ。1日で作れる
どんなもの?
InstagramやXのプロフィールに貼る「リンクまとめページ」(Linktreeのようなもの)。各種SNS・ブログ・商品ページへの導線を1ページに集約します。デザイン性が重要で、シンプルなので短時間で完成。発信活動をしている人には実用性が高い題材です。
SNSでの発信者・クリエイター。自分のリンク集が欲しい人
SNSのプロフィールに置く「リンクまとめページ」(Linktree風)が手に入ります。各種SNS・ブログ・商品ページへの導線を1ページに集約でき、発信活動をしている人には実用性が高いです。
おすすめの技術スタック
リンク集はデザインと手軽さが命。コードなしならFramerで美しく作れ、コード派はshadcn/uiで洗練されたページを。クリック数を計測したいならSupabaseを足します。どれも短時間で公開できます。
費用の目安
Framerの無料プランなら費用ゼロで公開できます。クリック計測や独自ドメインを使う場合のみ費用が発生します。
| 項目 | 費用 | 補足 |
|---|---|---|
| Framer(ノーコード制作) | 無料プランあり | 独自ドメインは有料プラン |
| Vercel(コード版の公開先) | 無料 | コードで作る場合 |
| Supabase(クリック計測する場合) | 無料枠あり | 任意 |
| GitHub | 無料 | コードで作る場合 |
必要なアカウント
開発を始める前に、下のサービスの無料アカウントを用意しておきましょう。
必要なAPIキー・設定
APIキーとは、外部のサービスを自分のアプリから使うための「合鍵」です。下記を取得・設定します。
作り方: まずこのプロンプトをClaudeに送る
細かい手順を覚える必要はありません。下のプロンプトをコピーして、Claude(やCursorのAIチャット)にそのまま貼り付けてください。 あとはClaudeが1ステップずつ伴走してくれます。詰まったら、エラー文や状況をそのまま伝えれば解決に導いてくれます。
あなたはプログラミング初心者の私に、プロフィールリンク集（Linktree風）の作り方を最初から最後まで伴走してくれるメンターです。以下の前提と要望をふまえて、私が迷わないように「一度に1ステップずつ」教えてください。
【私の状況】
- プログラミングはほぼ未経験です。専門用語は都度かんたんに説明してください。
- パソコンはWindows(またはMac)を使っています。※実際のOSに置き換えて伝えてください
- AIエディタ「Cursor」をインストール済みです。
- 必要な無料アカウント(このページに記載のもの)は作成済みです。
【作りたいもの】
- SNSのプロフィールに貼る「リンクまとめページ」(Linktreeのようなもの)。
- SNS・ブログ・商品ページなどへのリンクを1ページに縦に並べたい。
- 私はプログラミング未経験なので、「コードなし(Framer)」と「コードあり」のどちらが向くか提案してほしい。
- デザインは自分らしい見た目にカスタマイズしたい。
- 余裕があれば、どのリンクがクリックされたか計測する機能も付けたい(任意)。
- 最終的に公開して、SNSのプロフィールに設定できるURLにしたい。
【進め方のお願い】
1. まず全体像(何をどの順でやるか)を、専門用語なしで箇条書きで教えてください。
2. そのあと、最初のステップだけを具体的に指示してください。私が「できた」と言ったら次へ進んでください。
3. 各ステップでは、私が実行するコマンドや操作を省略せずに書き、それが「何のための作業か」も一言添えてください。
4. エラーが出たら私がその文面を貼るので、原因と対処をやさしく説明してください。
5. データベースやログインを扱う場合は、セキュリティ(他人にデータが見えない設定)も忘れずに教えてください。
6. 途中で必要なファイルの中身は、コピーして貼れる完全な形で提示してください。
まずは【1】の全体像から教えてください。 ※ 【私の状況】の部分(OSや、まだ登録していないアカウント)は、あなたの環境に合わせて書き換えてから送ると精度が上がります。
つまずきやすいポイント
- デザインに凝りすぎず、まず1バージョン公開しましょう。リンク集はシンプルさが正義です。
- コードなし(Framer)かコードあり(shadcn/ui)かで手順が変わります。最初にClaudeへ相談して決めましょう。
収益化のヒント
Framer(高単価・継続報酬)が主力。発信者・クリエイター層に自然に届きます。