🚀 「質問に答えるだけ」でポートフォリオ完成。GAS×React×AIで理想の自己紹介ページを作った話

3行まとめ

• AIが執筆を代行: AIとの対話を通じて、あなたの経歴を構造化したJSONデータを自動生成。
• インポートで即完成: 生成されたJSONを貼り付けるだけで、洗練されたポートフォリオが即座に構築。
• 維持費は永久0円: Google Apps Script (GAS) 上で動作。9種類のデザインテーマを自由に切り替え。

---

🚀 はじめに：なぜこれを作ったのか

エンジニアの皆さん、自分の「ポートフォリオ」や「自己紹介ページ」、いざ作ろうとするとここで手が止まりませんか？

最も大きな障壁は**「自分の実績や強みを言語化するプロセス」**そのものです。
何を書けばいいか悩み、真っ白なエディタを前に数時間が過ぎる。そのうちにデザインや技術選定の泥沼にハマり、結局公開まで辿り着かない。

「自分はただ質問に答えるだけ。あとはAIが書いてくれて、勝手に適切な形式にしてほしい」
そんな、エンジニアのわがままを形にするために、AIとの壁打ち ➡ JSON生成 ➡ ポートフォリオ即完成 というワークフローを実現する「Who am I?」を開発しました。

---

🛠 アプリの概要：AIと協力して「自分」を表現する

このアプリは、AIと対話しながら自分を再発見し、一瞬でアウトプットするためのプラットフォームです。

1. AIと対話して「一括JSON」を作る

専用のプロンプトやGPTsと対話するだけで、AIがあなたの経験を引き出し、アプリにそのまま取り込める一括JSONデータを書き出してくれます。

2. 選べる9種類の「着せ替えテーマ」

入力したデータは、即座に反映される9つのデザインテーマに適用されます。各テーマは、職種や個人のブランドイメージに合わせて最適化されています。

テーマ	特徴	適した職種	デモ
Advanced	先進的・テック感	AI/ML、最新技術	Preview
Tech Dark	ダークモード・テック感	セキュリティ、インフラ	Preview
Pop	明るくカラフル	クリエイター、アーティスト	Preview
Nature	自然を感じる緑系	環境、サステナビリティ	Preview
Zen	静謐で和風	コーチ、メンター	Preview
Luxury	上品でラグジュアリー	コンサルタント、経営層	Preview
Passion	情熱的な赤系	起業家、リーダー	Preview
Clean	シンプルで汎用的	エンジニア全般	Preview
Retro	レトロでノスタルジック	デザイナー	Preview

3. 写真のアップロードは不要（Googleフォトと連動）

利便性とプライバシーを考慮し、画像のアップロード機能はあえて実装していません。
その代わりに、あなたのGoogleアカウントに設定されているプロフィール写真が自動的に選ばれます。写真の準備やサイズ調整という小さな手間さえも、AIとGoogleの仕組みに任せることができます。

---

💻 技術構成：なぜGAS × Reactなのか

「サーバー代を払いたくない」「でもモダンなSPAとして動かしたい」という欲求に応えるスタックを採用しました。

• Frontend: Vite + React + TypeScript + TailwindCSS
• Backend/DB: Google Apps Script (GAS)

GASをサーバー兼データベースとして活用することで、インフラの維持費は永久に無料です。
データもユーザー自身のGoogle環境に安全に紐付くため、プライバシー面でも安心です。

また、GAS上で快適なSPA体験を提供するために、ビルド時にJSやCSSを一つのHTMLにインライン化して配信する手法をとっています。これにより、読み込みが速く、ブラウザのみで動作するツールとして提供が可能になりました。

---

🧭 かんたん利用ガイド

Step 1. ログインと認証

アプリURL にアクセスし、Googleアカウントでログインします。

⚠️ 初回アクセス時の警告について
個人開発のGASアプリのため、初回のみ「Googleによる確認が完了していません」という警告が出ます。
「詳細」→「Who am I?（安全ではないページ）に移動」 をクリックして進めてください。許可されたデータ（スプレッドシート等）は、あなた自身のドライブ内に安全に保存されます。

Step 2. AI（GPTs）と対話してデータを作る

サイドバーの「GPTs」リンクから、専用の Career Story Builder にアクセスします。
AIの質問に答えていく（壁打ち）だけで、最終的にアプリ用のJSONデータが出力されます。

Step 3. データのインポートと着せ替え

1. アプリ上部の「Import」から、AIが作成したJSONをペーストして実行。
2. 「Theme」セクションで、その日の気分に合ったデザインを選択して保存。
3. プロフィール写真は「Fetch Google Photo」ボタンで、アイコンから自動取得できます。

Step 4. 公開設定とURL共有

「Visibility」を Public に設定し、リンクの有効期限（1日から無期限まで）を選択して「Generate new link」をクリックします。
コピーしたURLを伝えたい相手に送るだけで、あなたの魅力的なポートフォリオが共有されます。

「あ、これで十分だ」と思えるほど、あっけなく高品質な自己紹介ページが手に入ります。

---

📝 おわりに

ポートフォリオは、自分を映し出す鏡です。
しかし、その鏡を磨くプロセスで疲弊してしまうのは本末転倒だと考えます。

表現のハードルを極限まで下げることで、より多くのエンジニアが自分の価値を世界に届ける。
「Who am I?」が、その小さなきっかけになれば幸いです。

この記事が少しでも参考になった方は、LGTM（いいね） をいただけると非常に励みになります。

---

アプリURL: Who am I? を今すぐ使ってみる