Next.js + microCMSによるポートフォリオサイト（このサイト）

カテゴリ: projects

ポートフォリオサイト技術説明

概要

数年前、行政関係のクライアントから「災害時にWebサイトが本当に役に立つのか」という問いを受けたことがあります。

当時は、従来型のCMSや共有サーバーが中心で、サーバーダウンやボトルネックの不安が常に付きまとっていました。静的サイト生成やグローバルCDNによる分散配信など、今のような強固かつ低コストな構成はまだ一般的ではなかったのです。

しかし現在は、Next.js + Vercel のようなモダンなフレームワークとプラットフォームを組み合わせることで、以下の技術が誰でも扱えるレベルまで進化しています。

・静的サイト生成（SSG）

・グローバルCDNによる分散配信

・サーバレスな自動復旧インフラ

本サイトはその技術的な進歩を活かし、営業ツールとしてのポートフォリオであると同時に、危機対応性の高い情報発信基盤の実例でもあります。

・ 災害・緊急時でも確実に情報が届く構成

・ 平常時にも高速・安定した表示性能

・インフラコストを抑えつつ、拡張性もある設計

また、今回このサイトは以下の目的も併せ持ちます。

  • ・自己紹介・実績・SNS連携・ブログを統合した営業基盤

  • ・JAMstack構成（Next.js + microCMS）によるモダンな技術実装例

  • ・WordPress中心の過去実績に加え、モダンフレームワークでの制作事例を新たに提示

目的と経緯

当初はNext.jsで何かを作ろうと考えていたところ、営業上必要となるポートフォリオの優先度が上がり、実案件ベースでの開発にシフトしました。また、単なる自己紹介ではなく、以下を目的としています。

  • ・最新技術に対応可能な開発スキルの証明

  • ・高速・安全なJAMstack構成の実装例

  • ・microCMSによる運用性・拡張性の高さの訴求

技術スタックと検証背景

使用技術

  • Next.js（App Router / SSR対応）

  • microCMS（Headless CMS）

  • Vercel（ホスティング／フォーム処理／CI/CD）

  • GitHub（CI/CD + 環境変数秘匿）

  • Google reCAPTCHA（スパム対策）

WordPressとの比較・経験

過去に、WordPressをGraphQL経由でNext.jsと連携する実験サイトも制作しました。ただし、以下の課題がありました。

  • ・WordPressはHeadless利用に最適化されておらず、無駄な構成や手間が多い

  • ・WordPress本来の良さは「CMSとして完結して使うこと」で発揮される

結果的に、「モダンフレームワークで1から設計するほうが合理的」であると感じ、今回はNext.js単体による構成を選択しました。

デザイン・UI/UXの思想

  • ・極力シンプルかつ視認性・操作性に優れた構成

  • ・明確な見出し、確実に反応するホバー、情報整理重視のUX

  • ・モバイル視点でのレイアウト最適化・フォント調整

  • 将来的にはアート性の高いUI表現にも挑戦予定（Next.jsで）

デザインに対する考え方

デザインのトレンドは移り変わりが早く、クライアントに特段の要望がない限りは冒険は避けるべきと考えています。制作コストやメンテナンス性を重視し、以下が可能であるように意識的に設計方針を分けています。

  • ・装飾性ではなく、構造と読みやすさを最優先

  • ・情報重視の設計とアート性の高い設計の棲み分け提案

セキュリティとパフォーマンス

  • ・フォームにはVercelサービスを活用（reCAPTCHA設置）

  • ・環境変数は .env.local で秘匿し、GitHub連携では .gitignore 管理を徹底

  • ・JAMstack構成により、PageSpeed Insightsでは100点も実現可能

  • ・SSRを活用しつつ、適切なキャッシュと構成で高パフォーマンスを維持

運用と今後の展望

  • ・microCMSと連携してブログ機能を追加し、継続的な情報発信を可能に

  • ・今後はNext.jsでよりアーティスティックなUI表現も模索

  • ・AngularやRemixなど、他のモダンフレームワークとの比較検証も進行中

まとめ

本サイトは、実験・検証と営業活動の両面を担うプロジェクトとして設計されました。結果として、以下の面で実務に即した汎用性のあるアウトプットとなりました。

  • モダンフレームワークを使ったWebサイト制作の実例

  • WordPress実績と組み合わせた柔軟な技術提案の可能性

  • 技術、運用、デザイン、セキュリティの統合的提示

この構成は、ポートフォリオ、ブログ、コーポレートサイトなどはもちろん、ランディングページ（LP）にも高い効果を発揮します。特にLPにおいては、パフォーマンス・制御性を最大化するために、静的HTMLでの実装を推奨する場合もあります。

この構成が適しているケース

  • 高速・安全・更新性のあるポートフォリオサイトを制作したい方

  • WordPress以外の選択肢を検討している方

  • 自分で管理・更新ができるCMSを導入したい方

  • AIや検索最適化を視野に入れた構造的なWeb設計をしたい方

  • ブログ、コーポレートサイト、ランディングページ等を最適構成で構築したい方

なおび堂 | Schue's Portfolio