ホスティングコスト
ノーコードのサブスクリプションを解消
Loading project...
オーナー・デザイナー・開発者
1人(AIネイティブな開発ワークフローで)
移行プロジェクトの後、継続的に進化
いま読んでいるこのサイト自体が本番システムです。ノーコードビルダーからNext.js + Vercelへ移行し、ホスティングコストを削減しながら完全なコントロールを獲得。6種の自動テストスイート・ビジュアルリグレッション・CIで固め、仕事で使っているのと同じAIネイティブなワークフローで保守しています。
元のサイトはUX修行時代にノーコードプラットフォームで構築したものでした。当時の即時出荷には最適でしたが、コンテンツはサブスクリプションの中に閉じ込められ、パフォーマンスには上限があり、構造変更はすべて手作業。仕事がエンジニアリングに軸足を移すにつれ、サイトは信頼性の問いにもなりました — 「戦略をコードに落とす」と名乗る人間が、自分のスタックを持っていなくていいのか?
Next.js 15 (App Router) + TypeScript + Tailwindで全面再構築し、Vercelにデプロイ。ホスティングコストを年1万円以上削減しながら、二言語対応(en/ja)・モーション付きダークエディトリアルデザイン・バージョン管理されたMarkdownコンテンツを獲得しました。品質は機械が強制します — スモーク・アクセシビリティ(axe)・SEO・パフォーマンス・クロスブラウザのPlaywrightスイートと、ビジュアルリグレッションのベースライン。エンタープライズシステムに適用しているのと同じエンジニアリング規律を、個人サイトのスケールで。
元のサイトはUX修行時代にノーコードプラットフォームで構築したものでした。当時の即時出荷には最適でしたが、コンテンツはサブスクリプションの中に閉じ込められ、パフォーマンスには上限があり、構造変更はすべて手作業。仕事がエンジニアリングに軸足を移すにつれ、サイトは信頼性の問いにもなりました — 「戦略をコードに落とす」と名乗る人間が、自分のスタックを持っていなくていいのか?
Next.js 15 (App Router) + TypeScript + Tailwindで全面再構築し、Vercelにデプロイ。ホスティングコストを年1万円以上削減しながら、二言語対応(en/ja)・モーション付きダークエディトリアルデザイン・バージョン管理されたMarkdownコンテンツを獲得しました。品質は機械が強制します — スモーク・アクセシビリティ(axe)・SEO・パフォーマンス・クロスブラウザのPlaywrightスイートと、ビジュアルリグレッションのベースライン。エンタープライズシステムに適用しているのと同じエンジニアリング規律を、個人サイトのスケールで。
自分の料理を自分で食べる。仕事でAIネイティブ・テストファースト・証拠駆動の開発を説くなら、自分のサイトも同じ方法で作られているべきで、しかもそれが検証可能な証拠になっているべきです。ダーク×エディトリアル×モーションのデザインは、「ポートフォリオを持つデザイナー」から「ポートフォリオ自体が作品であるビルダー」への転換を示しています。
スモーク・アクセシビリティ(axe)・SEO・パフォーマンス(Lighthouse)・クロスブラウザ・ビジュアルリグレッション — 個人サイトに。
next-intlによるロケールルーティング。全文字列・全プロジェクト・全メタデータが日英で存在します。
プロジェクトとプロフィールはバージョン管理されたMarkdown。すべての文言変更がレビュー可能なdiffになります。
エンタープライズ業務と同じ、ガードレール付きAI駆動ワークフローで構築・進化。このコンテンツ刷新自体も含めて。
テストをセーフティネットにルート単位で再構築。各ページはPlaywrightのカバレッジとともに出荷され、ビジュアルベースラインが意図しない変化を毎回検出します。ダークエディトリアルへの刷新も、今回のStrategy-to-Codeコンテンツ刷新も、レビュー可能でテスト検証済みの変更として実行 — このサイトのgit履歴そのものがケーススタディです。
ノーコードのサブスクリプションを解消
スモーク / a11y / SEO / 性能 / クロスブラウザ / ビジュアル
英語・日本語の完全パリティ
コード・コンテンツ・パイプラインすべてをバージョン管理