コイズミのITノート

ブログ

ITやWebに関するテーマを執筆しています

背景画像

Next.js + microCMS + AWS Amplifyで個人ブログを立ち上げました

お知らせカレンダーアイコン2025/03/09

はじめまして！「コイズミのITノート」の運営者・コイズミです。
以前個人ブログを執筆・運営していたことがあったのですが、数年前に閉鎖した後はnoteで細々と情報発信をしていました。

プラットフォーム全盛の今になり、なぜ「時代遅れ感もある個人ブログ」を立ち上げたのか？どういった技術を使ったか？どういったコンセプトで立ち上げたのか？

1つ目の記事は挨拶も兼ねて、この事をお伝えします！

前提として、僕の職種はITのデザイナーやエンジニアではなくPjMなので、その視点で解説します。

プラットフォームを使わず、個人ブログを立ち上げた理由

noteやZenn、YouTubeなど、今では個人が情報発信を行えるプラットフォームが多数存在し、主流となっています。ノーコードでWebサイトを作れる「Studio」といったサービスも登場しています。

このような時代にあえて個人サイトにこだわった理由は、「自分の”城”で情報発信をしたかったから」に尽きます。他にはnoteを使っていくうちに、いくつか満足できない点もでてきました。

以下3つの理由があげられるので、解説をしていきます。

  • 独自ドメインを使いたい
  • Google Analyticsを使いたい
  • 技術的な実験の場が欲しい

独自ドメインを使いたい

はてなブログなど、個人でも独自ドメインを使用可能なサービスも存在しますが、noteは例外を除き使用できず（※1）、長らくデメリットに感じていました。

自分のドメインを取得し、自分の顔・分身・名刺となる意味を持たせたかったので、この点はこだわりました。

※1.法人向けのnote Proだと独自ドメインが使えます。

Google Analyticsを使い、自分でアクセス解析をしたい

独自ドメインにも関連しますが、noteは基本的にGoogle Analyticsを使用できません。（※2）

最近業務でも使用する機会が減ってしまっており、Google Analyticsを設置し自分でアクセス解析を行い、自由に改善施策を試すことができる場を必要としていました。特にGA4になってからは、ほとんど触れていないため、今後このサイトで実践していきたいと考えています。

※2.法人向けのnote Proだと、有料オプションでGoogle Analyticsが使えます。

技術的な実験の場が欲しい

デザインをHTML+CSSでカスタマイズができるサービスもありますが制約が大きく、自分で技術選定をしてWebサイトを構築するといった事もできません。

カスタマイズができたとしても、汎用的な技術知見が身に付くかというと…そのプラットフォーム専用の知識にすぎないため、その知見が役に立つシーンは限られます。
個人サイトの場合は、サーバ環境さえ用意すれば自由にプログラミング言語やライブラリを選定したり、自由にページのデザインを実装し公開することができます。

ここ数年は自分で手を動かしてWebを作ることが無くなっていましたが、知識が古くなっている事も感じており、昔のように実際に手を動かして作ってみたいと考えていました。

書きだして見ると特段珍しい理由ではないのですが、こういった背景から、自由に作りこみ・運用が可能な自分の”城”とも言える個人サイトを立ち上げました。

使った技術の解説

この記事のタイトルにも記載した通り、「コイズミのITノート」では、以下の技術を使用しています。

  • フレームワーク：Next.js
  • 言語：TypeScript
  • CMS：microCMS
  • ホスティング環境：AWS Amplify

これらを採用した理由についても解説をしていきます。

ちなみにCSSは、かなりの割合でChatGPTに聞きながら記述しました。近年のCSSの進化によりSassやwebpackももはや使っておらず、昔実装をしていた比べて隔世の感があります。

なぜWordPressではないのか？

はじめに「なぜWordPressではないのか？」を解説いたします。

ブログサイトを構築するツールとして、長い間WordPressがスタンダードともいえる存在でした。
シェアだけであれば、今でもスタンダードと言って良いとは思います。

昔はWordPressのコミュニティイベントであるWordCampに参加したり、多くのWordPress案件を担当したりと、とても愛着がありお世話になったCMSでした。
しかしこれも時代の流れになりますが、技術の発展により、WordPressの設計面の古さ・保守性の悪さが目立ち始めました。冒頭で「個人サイトが時代遅れ感がある」と書きましたが、WordPressもWeb制作/開発の場では、時代遅れ感が目立つようになってきました。

こういった背景から、今さらWordPressで個人サイトを構築するメリットがないと考え、別の技術を採用いたしました。

なお仕事では、WordPressの保守は現在も行っています。

microCMSとの出会い

当初から「今主流のNext.jsを用いてサイトを作る」という方針は決まっていました。＝ヘッドレスCMSで構築する方針です。

しかし、APIのデータ元であるCMS選定が難航しました。
自分のコンテンツを他社のサービスに預けるという点も、サービス終了リスク等を考えると、二の足を踏んでいました。

検討した内容はこんな感じです

  • WordPressのRestAPIを用いる → 結局WordPressを使うことになり本末転倒になるため却下
  • Django , LaravelあたりでCMSとAPIを作る？ → Next.jsでいっぱいいっぱいなので、バックエンドのキャッチアップまで手が回らないため却下

このように、技術選定で迷走をしていました。しかし月日が経った頃、こちらの書籍と出会い、microCMSの存在を知りました。

書籍の内容は、Next.jsとmicroCMSを用いて、架空のコーポレートサイトを作るものになっています。当初はNext.jsの練習として使っていましたが、非常に良くできているプロダクトであり、最終的にmicroCMSを採用することにしました。

またNext.jsのコンポーネントの考え方など、この書籍は構築にあたり参考になった点が多々ありました。

microCMSの選定ポイントは、下記になります。

  • ヘッドレスCMSのために作られたCMSのため、割り切った仕様で使い勝手が良い
  • 管理画面のUIが優れており学習コストが低く、フロントエンドの実装に専念できる
  • バックエンドやサーバサイドのメンテナンスはmicroCMS社に任せられるため、CMS側のセキュリティ対策や保守は考慮する必要がない
  • サービス終了リスクは割り切った

最後だけ少し解説が必要ですね。

他社のサービスに自分のコンテンツを預けることで、仮にサービスが終了した場合のリスク・不透明性が残ります。最悪サイトが全て消失してしまう可能性もあります。別のサービスに移行したとしても、検索エンジンの評価や外部リンクも切れてしまいます。

しかし近年の生成AIの台頭により、検索エンジンからの流入は低下していくだろうと、個人的には考えております。そのため検索エンジンの評価は、このブログでは、そこまで重視しない事にしました。
仮にサイトを作り直すことになっても、ドメインを持っておりデータのバックアップがあれば何らかの手段で復元ができるので、検索エンジンの評価が落ちたところで特に意識はしないと割り切りました。

もちろんこれだけお世話になっているmicroCMSなので、サービス終了することが無いように、実際の案件でも機会があればぜひ提案をして活用したいと考えています。国産のCMSという理由で、応援したい気持ちも強いです。

なぜVercelではなくAWS Amplifyを採用したのか？

この点も気になる人がいると思うので解説します。

Next.jsのホスティング先は、開発元のVercel Inc.が提供する「Vercel」を用いるのが鉄板です。Next.jsの最新バージョンの機能をいち早く利用できたり、AIを活用してUIデザインとコード生成が行える「v0」を利用できたりとメリットが大きいです。

それでもあえてAWS Amplifyを採用した理由は2つです。

  • Vercel無料プランの商用利用に対する規約が厳しい
  • AWSに触れる機会を作りたかった

Vercelは無料プランも用意されているのですが、商用利用がNGで、かつかなり厳密な規約になっています。

【参考】https://vercel.com/docs/limits/fair-use-guidelines#commercial-usage

Web広告を貼るかは悩んでいますが、少なくとも運営していく以上はアフィリエイト収入ぐらいは欲しいと思っているので、Vercelはいったん選択肢から除外しました。当初はインフラ周りのコストを抑えたい点も理由としてあります。

また、AWSを日常的に触りたいという理由も大きかったです。仕事ではAWSを用いた案件を担当することも増えており、少なからず個人で何かしらを触っておきたかったためです。

例えば、仕事でよく利用するEC2やS3などは、個人で使用するはコストも機能もオーバースペックですが、Amplifyであれば手軽に利用ができます。

デザインはどうしたか？

リリースを優先したいため「Figmaでページをデザインした上で実装」という正規のフローでは進行せず、最低限の構成で実装をしながら、CSSやレイアウトをブラウザ上で確認しながら組んでいくという進め方をしました。

ロゴもまだないので、いつか作る必要はあると思っていますが、しばらくはこのデザインで運用をしていきます。

どういったコンセプトのブログにしていく？

「コイズミのITノート」のコンセプトを紹介します。

  • IT/Webの話題や知識
  • IT/Webの案件におけるプロジェクトマネジメントの話題や知識
  • ビジネスの話題
  • 好きなITガジェットのお役立ち情報やレビュー

これらをテーマに執筆・運営していきます。

最後にnoteとの住み分けについてお話します。

冒頭でデメリットを感じると書きましたが、noteはnoteで良いサービスなので、引き続き使用していきます。ブログは公の情報発信、noteは趣味や個人的な考えをまとめていくのに使う予定です。

以上が「コイズミのITノート」立ち上げの紹介になります。

これからも当ブログをよろしくお願いします！

記事一覧へ