2026
アプリ・Web
ポートフォリオサイト
いま見ているこのサイトです。名刺と同じつくりにそろえ、作品は、ページの中で実物を見たり、さわったりできるようにしました。
- 担当
- 企画・デザイン・実装
- 人数
- 1人
- 道具
- Next.js・TypeScript・React・Playwright・GitHub Actions・Vercel・Claude
- 補足
- コードの多くは、AI（Claude）と対話しながら書いています。
就職活動で見ていただくために作った、作品と経歴をまとめたサイトです。名刺のQRコードから開く方が多いので、見た目は名刺と同じつくり（えんじの地、金の枠、上から下がる帯）にそろえました。
Next.js（App Router）と TypeScript で作り、すべてのページを公開前に組み立てておく方式（静的生成）で、Vercel から配信しています。データベースは使わず、作品や経歴は、作品ごとの JSON ファイルで管理しています。
一部の作品は、作品ページの中で実際に動かせます。体験版は、サーバーにつながず架空のデータで動く専用の版を作り、このサイトの中に置いています。
工夫した点
名刺から来た人に、同じものだと分かる
色（えんじ・生成り・金）と書体を名刺から拾い、トップは名刺と同じ並び（帯、所属、名前）にしました。楽しさは文ではなく、さわったときの動きで出しています（枠の留め具は外せる、帯は引ける、水面は揺れる）。
実物を、その場で動かせる
ν-Portal と Gaming Slide の体験版は、作品ページの中で動かせます。ν-Portal は大学の実際のデータにつながないよう、データベースの代わりに架空のデータで動く専用の版を作りました。体験版の中に実在の接続先や鍵が入っていないかは、公開前に機械で確かめています。