作品をSNS・ポートフォリオに掲載して実績にする

料理を作り終えたら、一番おいしそうな瞬間を写真に撮ってSNSに投稿しますよね。Webアプリも同じです。せっかく作った作品は、ちゃんと見せ場を作って発信することで「自分の実績」になります。

このレッスンでは、デプロイ（＝作ったものをインターネットに公開すること）が終わった作品を、SNSやポートフォリオに掲載する手順を15分で進めます。AIツールを使って紹介文やポートフォリオ記載文を効率よく仕上げるコツも紹介します。

このレッスンを進める前に、次の条件を満たしているか確認してください。

• 自分のWebアプリがすでにインターネット上で公開されている（URLを開いて画面が表示される状態）
• アプリのURL（例: https://my-app.vercel.app）をメモ帳などにコピーしてある

まだの場合は、先に「AIアプリをVercelにデプロイする」レッスンを終えてから戻ってきてください。

まずは作品の「見せ場」を画像に残します。スマホでいうと、出来上がった料理を一番おいしそうな角度で撮影するステップです。

1. ブラウザで自分のアプリのURLを開く
2. 画面全体、または一番見せたい部分のスクリーンショット（＝画面の写真）を撮る
   • Mac: Shift + Command + 4 → ドラッグで範囲を選択
   • Windows: Win + Shift + S → 範囲を選択
3. ファイル名を my-app-top.png など分かりやすい名前にして保存する
4. 余裕があれば、スマホ表示も撮っておくと見栄えが良くなります

良い例

• アプリのメイン機能がひと目でわかる画面を撮っている
• スマホ表示とPC表示の両方を撮っている

悪い例

• 開発ツール（＝裏側の設定画面）が映り込んでいる
• 真っ白な画面やエラー画面をそのまま撮っている

SNSに投稿する文章を、AIツールに手伝ってもらいましょう。ここでは3つのAIツール別にプロンプト（＝AIへの指示文）の送り方を紹介します。どれを使ってもOKです。

方法A: ChatGPTまたはClaudeのチャット画面から

次のプロンプトをコピーして、ChatGPTやClaudeのチャット画面に貼り付けて送信してください。

以下の情報を使って、SNS（X/Twitter）用の作品紹介文を140字以内で作ってください。
読む人が「何を作ったか」「何がすごいか」をひと目で分かるように書いてください。

- アプリ名:（あなたのアプリ名を入れる）
- できること:（例: 予定を管理できる）
- 使った技術: Next.js, Supabase
- ターゲット:（例: 忙しい社会人向け）
- 感想: 初めてWebアプリを作りました

3パターン出してください。

方法B: Claude Codeのターミナルから

Claude Code（＝ターミナルで使えるAIツール）を使っている場合は、以下のように話しかけます。

このアプリの紹介文をSNS用に140字以内で3パターン書いて。
アプリ名は「○○」、予定管理ができるアプリです。

Claude Codeはプロジェクトの中身を知っているので、細かく説明しなくても良い紹介文を作ってくれます。

方法C: Cursorのチャットから

Cursor（＝AIが組み込まれたコードエディタ）を使っている場合は、サイドバーのチャットに同じプロンプトを送ればOKです。

AIの返答を仕上げる

AIが3パターン返してくれたら、一番しっくりくるものを選び、自分の言葉で少し書き換えて完成させます。AIが作った文章をそのまま使うのではなく、あなたらしさを一言だけ足すのがコツです。

良い例

• 「家計管理アプリを作りました！AIと一緒に2日で完成。日々の支出をサクッと記録できます💰 #プログラミング学習 #AI開発」

悪い例

• AIが出力した文章をそのままコピペ（自分の感想が入っていない）
• 「アプリを作りました」だけ（何のアプリかわからない）

発信文とキャプチャ画像が用意できたら、投稿します。

1. X（旧Twitter）やInstagramなど、普段使っているSNSを開く
2. キャプチャ画像を添付する
3. 発信文を貼り付ける
4. ハッシュタグ（＝#記号をつけたキーワードで、投稿を見つけやすくする仕組み）を追加する
5. 投稿する

おすすめのハッシュタグ:

• #web制作 #プログラミング学習 #AI開発 #個人開発

ワンポイント: アプリのURLも一緒に載せると、見た人が実際に触れるので反応がもらいやすくなります。

SNSへの投稿とは別に、自分のポートフォリオ（＝作品一覧ページ）にも記録を残しましょう。就職・転職・副業の案件獲得で「こういうもの作りました」と見せる場面で役立ちます。

まだポートフォリオサイトを持っていなくても大丈夫です。NotionやGoogleドキュメントに書くだけでも十分です。

次の項目を書き込みます。

AIにポートフォリオ記載文を整えてもらう

以下のプロンプトをAIに送ると、ポートフォリオ向けの説明文をきれいに整えてくれます。

以下のアプリ情報を、ポートフォリオに載せる説明文として3〜5行にまとめてください。
技術に詳しくない人が読んでも「何ができるアプリか」がわかるように書いてください。

- アプリ名:（あなたのアプリ名）
- URL:（あなたのアプリのURL）
- できること:（例: 予定を管理できる）
- 使った技術: Next.js, Supabase
- 工夫した点:（例: AIでデザインを提案してもらった）

良い例

• 「家計管理アプリ — 日々の支出を記録できるシンプルなアプリ。ログイン機能付き。」のように、何ができるかがひと目でわかる

悪い例

• アプリ名だけ書いてURLがない
• 説明が技術用語だらけで一般の人に伝わらない（例: 「SSR対応のJamstackアーキテクチャ」）

投稿ができたら、次のチェックリストをひとつずつ確認しましょう。すべてチェックがつけばこのレッスンは完了です。

• SNSの投稿リンクを自分で開いて、画像と文章が正しく表示される
• 投稿にアプリのURLが含まれていて、クリックするとアプリにアクセスできる
• はじめて見る人でも「何を作ったか」が10秒以内でわかる
• ポートフォリオにアプリ名・URL・説明・スクリーンショットの4点が揃っている
• 家族や友人に投稿URLを送って「何のアプリかわかる？」と聞いてみた（任意だけどおすすめ）

すべて通れば完了です。おつかれさまでした！ あなたの最初の作品が、世界に公開された実績として残りました。