ポートフォリオにNext.js、ブログにWordPress。僕がこの構成にたどり着いた技術的・戦略的背景のすべて

「技術力を証明して、もっと良い条件の仕事を見つけたい」
「でも、どうせ作るならブログで収益も得たい」

Web制作者なら、誰もが一度は考えることではないでしょうか。こんにちは、Webディレクター兼フロントエンドエンジニアとして10年以上この業界で仕事をしている者です。

この二つの目標、実は両立させるのが非常に難しい。なぜなら、アピールすべき相手と使うべき技術がそれぞれ異なるからです。

• 技術力の証明 → 相手は採用担当者。モダンな技術(Next.jsなど)による実装力が求められる。
• ブログでの収益化 → 相手は検索ユーザー。SEOとコンテンツの量が重要で、WordPressに分がある。

長年、このジレンマを抱えていましたが、試行錯誤の末に一つの最適解にたどり着きました。それが、メインドメインにNext.js製のポートフォリオを、サブドメインにWordPressブログを共存させるハイブリッド戦略です。

この記事では、なぜ僕がこの構成を選んだのか、その技術的・戦略的背景のすべてをお話しします。ポートフォリオ戦略に悩む、すべてのWeb制作者のヒントになれば幸いです。

なぜ「技術力の証明」と「収益化」は両立しにくいのか

多くの制作者が、ポートフォリオサイトにブログ機能を持たせようとします。しかし、これがうまくいかないことが多い。それぞれの目的を達成するための要件を整理してみましょう。

ご覧の通り、両者は水と油の関係に近い。Next.jsでブログを構築することも可能ですが、記事の投稿にgit pushが必要だったり、SEO関連の実装を自前で行う必要があったりと、コンテンツを量産するには不向きです。逆に、WordPressだけでモダンな技術力をアピールするのは困難です。

解決策:役割を分離するハイブリッド構成

そこで僕は、二つのサイトを明確に分離し、それぞれに最適な役割を与えることにしました。

• your-domain.com(メインドメイン)
• 役割: ポートフォリオサイト(技術力の証明)
• 技術: Next.js (SSG)
• 目的: 採用担当者やクライアントに対し、モダンなフロントエンド開発スキルを最大限にアピールする。洗練されたデザインと爆速の表示速度で「おっ」と思わせるのが狙い。

• blog.your-domain.com(サブドメイン)

• 役割: 技術ブログ(SEO集客と収益化)
• 技術: WordPress
• 目的: Web制作の知見や技術情報を発信し、SEOによる集客を行う。レンタルサーバーなどのアフィリエイト記事を投稿し、収益の柱とする。

この構成なら、それぞれの目的に対して最適な武器で戦うことができます。ポートフォリオは技術力のアピールに全振りし、ブログはコンテンツマーケティングと収益化に集中する。これが僕の出した結論です。

技術的背景:この構成を支えるサーバー選び

このハイブリッド構成を実現するには、一つ重要な条件があります。それは、「Node.js環境とPHP/MySQL環境を同居させられる、安定したレンタルサーバー」を選ぶことです。

Next.jsはビルド時にNode.jsを必要としますし、WordPressは言わずもがなPHPとMySQLで動作します。格安サーバーの中には、Node.jsが使えなかったり、使えてもバージョンが古かったり、リソースが厳しくてビルドが通らなかったりするケースが少なくありません。

プロが「安さ」だけでサーバーを選ばない理由

Webディレクターとしてクライアントワークを10年続けてきて痛感するのは、サーバーは「安定性」と「信頼性」がすべてだということです。納品後に「サイトが落ちた」「メールが届かない」といったトラブルが起きれば、クライアントからの信頼は一瞬で失われます。

だからこそ、僕は自身のブログでも、クライアントに提案するのと同じ基準でサーバーを選びます。具体的には、以下の点を重視します。

• 十分なサーバースペックと安定した稼働実績
• WAFなど堅牢なセキュリティ機能
• 信頼性の高いメールサーバー(SPF/DKIM対応は必須)
• Git連携やSSH接続など、モダンな開発をサポートする機能
• 困ったときに迅速に対応してくれるサポート体制

これらの条件を満たすサーバーとして、僕は長年エックスサーバーを愛用しています。国内シェアNo.1という実績は伊達ではなく、10年以上使ってきて大きなトラブルは一度もありません。Node.js環境も標準で提供されており、まさに今回のハイブリッド構成には最適な選択肢と言えるでしょう。

もちろん、これはあくまで僕の選択です。大切なのは、目先の安さではなく、長期的な安定性と信頼性、そして自分のやりたい構成が実現できるかという視点でサーバーを選ぶことです。

戦略的背景:なぜこの構成が機能するのか

最後に、この構成がビジネス戦略としてなぜ優れているのかを解説します。

1. ターゲットの明確な分離
   採用担当者にはNext.jsのポートフォリオを、技術情報を求める同業者にはWordPressブログを、と明確に見せる相手を分けられます。これにより、メッセージがブレず、それぞれのターゲットに深く刺さるコンテンツを届けられます。

2. 相互送客による相乗効果
   二つのサイトは独立しつつも、連携させることが可能です。ブログには「このブログは、Next.js製のポートフォリオを持つエンジニアが運営しています」とポートフォリオへのリンクを設置。逆にポートフォリオには「最新の技術記事」としてブログへの導線を設ける。これにより、二つのサイト間で価値の相乗効果が生まれます。

3. 個人のブランド構築
   この構成は、単なる「Web制作者」ではなく、「技術力とビジネス視点を両立し、戦略的にWebサイトを構築・運用できるプロフェッショナル」という強力なパーソナルブランドを構築します。これは、転職活動でも、フリーランスとしての案件獲得でも、大きな武器になるはずです。

まとめ:技術力と収益化、二兎を追うための戦略

「技術力の証明」と「ブログでの収益化」。この二つの目標は、対立するものではなく、賢い戦略で両立させることが可能です。

今回ご紹介した「Next.jsポートフォリオ × WordPressブログ」というハイブリッド構成は、そのための強力なフレームワークです。この戦略の根幹を支えるのは、信頼できるレンタルサーバーの存在に他なりません。

もしあなたがポートフォリオ戦略に悩んでいるなら、ぜひこのハイブリッド構成を検討してみてください。それは、あなたの市場価値を飛躍的に高める、最初の一歩になるかもしれません。