これは実際のクライアントサイトではなく、実装力を確認いただくための技術デモページです。

Tech Capabilities Showcase

Penbit Lab が実際に運用している基盤・実装をそのまま公開しています。

Next.js 16
TypeScript
Tailwind CSS v4
Cloudflare Pages

Live Demo

お問い合わせフォームデモ

本番の /contact ページと同一の実装（Cloudflare Pages Functions + Resend + Turnstile + KVレート制限）です。実際に送信できます。

Turnstileによるボット対策

Cloudflare Turnstile でチャレンジトークンを発行し、サーバー側の /api/contact で siteverify API に検証を投げてから送信処理を続行する。

KVによるレート制限

Cloudflare KV に IP ごとの送信回数を記録し、1時間あたり3回を超えると 429 を返す。KVの値には expiration_ttl を設定し自動失効させている。

CMS Integration

CMS連携デモ（What's New）

microCMS と連携した更新履歴を、ビルド時に取得して表示しています。 microCMS 側でコンテンツを追加すると Webhook が発火し、 Cloudflare Pages が自動で再ビルド・再デプロイを行う仕組みです。

2026-07-28リリース制作実績に「VESTUE」を追加しました
2026-07-27リリース新サービス公開:GEO診断ツールをリリースしました
2026-07-26リリース新しいポートフォリオサイトを公開しました:「てとてケア」(訪問介護スタッフ採用サイト)
2026-07-24公開記事新着記事:WordPress脆弱性「wp2shell」から考える、静的サイト/ヘッドレスCMSという選択肢
2026-07-24お知らせお問い合わせ窓口にLINE WORKSを追加しました

Security

セキュリティヘッダー

このサイト全体（next.config.ts の headers()）に実際に付与しているレスポンスヘッダーです。

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Resource-Policy: same-origin
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://challenges.cloudflare.com https://www.googletagmanager.com https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://www.googletagmanager.com https://www.google-analytics.com https://*.google-analytics.com; font-src 'self' data:; connect-src 'self' https://challenges.cloudflare.com https://www.google-analytics.com https://*.google-analytics.com https://www.googletagmanager.com https://cloudflareinsights.com https://static.cloudflareinsights.com; frame-src https://challenges.cloudflare.com; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests

セキュリティヘッダー診断ツールを試す →

Performance

パフォーマンス実績

Google PageSpeed Insights による実測値（本番 penbit-lab.com・2026年7月31日 11:14 JST 計測）

100

Desktop

Mobile

構造化データ（JSON-LD）・パンくずリスト（BreadcrumbList）は実装済みです。

よくある質問

Q. このページの実装は本番環境と同じですか？

A. はい、実際にpenbit-lab.comで稼働している実装をそのまま掲載しています。

Q. お問い合わせフォームのデモは実際に送信されますか？

A. はい、本番と同じ処理のため実際に送信されます。テスト送信はご遠慮ください。

Frontend Expression

フロントエンド表現力の一例：/lab

Canvas API を使ったインタラクティブなパーティクルアニメーションのデモです。外部ライブラリを使わず Next.js + TypeScript のみで実装しています。

デモを見る →

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload X-Frame-Options: DENY X-Content-Type-Options: nosniff Referrer-Policy: strict-origin-when-cross-origin Permissions-Policy: camera=(), microphone=(), geolocation=() Cross-Origin-Opener-Policy: same-origin Cross-Origin-Resource-Policy: same-origin Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://challenges.cloudflare.com https://www.googletagmanager.com https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://www.googletagmanager.com https://www.google-analytics.com https://*.google-analytics.com; font-src 'self' data:; connect-src 'self' https://challenges.cloudflare.com https://www.google-analytics.com https://*.google-analytics.com https://www.googletagmanager.com https://cloudflareinsights.com https://static.cloudflareinsights.com; frame-src https://challenges.cloudflare.com; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests

よくある質問

Q. このページの実装は本番環境と同じですか？

A. はい、実際にpenbit-lab.comで稼働している実装をそのまま掲載しています。

Q. お問い合わせフォームのデモは実際に送信されますか？

A. はい、本番と同じ処理のため実際に送信されます。テスト送信はご遠慮ください。