Gatsby + Contentful + Netlifyでブログを構築するメリット
今回は、デザイナーである私が当ブログを作った目的とその構成を紹介いたします。これからブログを作って運用しようと考えている方や、当サイトの技術を利用する上でのメリット・デメリットを知りたい方に情報提供できればと思います。
また、この記事では当ブログで使用しているサービスを利用した技術的な構築方法は割愛さしています。すでに多くのブログ等で情報公開されていますので、お急ぎの方はそちらをお調べください。気が向いたら当ブログでも紹介したいと思います。
この記事のターゲット
これからブログを構築しようと考えている方
Webアプリやウェブサイトを自分で構築・開発した経験のある方
Gatsby + Contentful + Netlify のサイト構成について知りたい方
1. このブログを立ち上げた狙い
もともと私がこのブログを作ろうと思ったきっかけは、自身のデザイン技術を組織に還元する方法を模索していたことが発端になります。
私は事業会社のインハウスデザイナーでしたので、個人でデザインを受託したり制作に携わることは、ほぼありませんでした。なので、ポートフォリオやブログといった個人のオウンドメディア（営業ツール）が必要でなかったことと、事業に帰属するアウトプットがほとんどでしたので、公開できる情報もそんなに多くはないと思い込んでいました。
また、デザインのプロセスや技術を人に伝えることが苦手なこともあり、それが故に組織内でデザイン業務が自身に集中してしまい、組織としての推進力のボトルネックになってしまっているという危機感がありました。
そこで、組織の中で必要となるベーシックなデザインの技術をドキュメント化していくことで、非デザイナーでも簡単にデザインできるような手法をサポートができれば、と考えて始めたのがこのブログになります。
付け加えると、自身のドキュメント執筆の修行を兼ねて、デザインの知見をアウトプットしてみようという挑戦と、WEB開発の知見を得るために自分のプロダクトを自身で改善しながら運用してみたい（マーケの勉強もしたいし）という下心も動機になっています。
このブログの目的
普段デザインをしない方（非デザイナー）でも、円滑にデザイン業務を遂行できるようにするための情報を提供すること
UI/UXデザイナーとして得た知見を一般化し、情報提供すること
自身のドキュメント執筆の修行と、WEB開発の知見を得るため
2. このブログの構成
上記の目的を達成するために構築の際に検討したポイントは以下になります。
パフォーマンスが高速であること
記事のメンテナンスとブログのメンテナンスを切り分けられること
執筆できる場所や環境を選ばないこと（執筆に集中したい）
できるだけコストをかけたくない
サーバーのメンテナンスに手間がかからないこと
必要な機能やデザインを自由に追加・編集できること
SEO対策ができる
…こんな都合の良い環境はあるのでしょうか？
いろいろ調べたり教えてもらった結果、その解の一つに辿り着きました。
以下がその構成（イメージ図）になります。
Gatsby.js：React.jsベースの静的サイトジェネレータ（フロントエンド役）
Contentful：ヘッドレスCMS（データベース・バックエンド役）
Netlify：静的サイトホスティングサービス（デプロイ・サーバー役）
Github：ソースコード管理
実際に、この記事はContentfulで書いていますが、これをそのままPublish（公開）すると自動的にGithubからNetlifyへ自動的にデプロイが走るようになっています。
この構成が、どのように作用すると上記のポイントをクリアするのか一つずつ解説していきます。
パフォーマンスが高速であること
この点は、Gatsby.jsが高いパフォーマンスを発揮してくれています。
百聞は一見にしかず、このサイトの記事のページ遷移をいくつかしてもらえるとわかると思いますが、Wordpressなどで構築されたサイトに比べると非常に高速であることがわかると思います。
公式サイトでもトップメッセージで触れられているように、「The fastest frontendfor the modern web」とのことで、その実力は本物ということですね。
細かい説明は省略しますが、ビルド時に静的サイトをSPAで生成してくれるので、最小限のコンテンツを部分的にロードするのに長けているということで高速な動作を実現しているようです。
代わりに、更新する際は必ずビルドが必要になるので、ほんの一部の変更でも全体をビルドしなければなりません。なので、リアルタイムにデータを取得したり、ビルドなしにファイルが自動更新されることはありません。
記事のメンテナンスとブログのメンテナンスを切り分けられること
Gatsbyのような比較的新しい技術を取り入れて実装をしていると、しばしば破壊的変更の影響でサイトが壊れることがありますので、一定のメンテナンスが必要になります。
そうした場合、前のバージョンに戻したり場合によってはrevertによってロールバックが発生するケースもあります。
その時に、並行して記事の内容が巻き戻って内容が消えてしまうことも考えられたので、Contentfulを利用することで記事コンテンツとソースを物理的に切り分けることで、サイトの構造を戻したり変更しても記事コンテンツは守られる構造を作りたかった背景があります。
Contentfulは、こうしたブログを自分で開発する上でのリスクヘッジとして非常に有効な選択肢だと思います。
また、副次的なメリットとして記事のメンテナンスに集中しやすい環境になったと思います。検索パフォーマンスなどを分析して、数字が悪い記事は定期的にメンテナンスを加えることで、継続的にSEOパフォーマンスを向上させる取り組みが可能です。
執筆できる場所や環境を選ばないこと
コンテンツの執筆にはContentfulというヘッドレスCMSを利用しています。Contentfulのおかげで、各種ブラウザから自由に記事を執筆・投稿できます。
ヘッドレスCMSは何かというと、「管理画面だけのWordpress」というイメージでしょうか。ブログの箱（外装）をGatsbyで用意して、箱の中身をContentfulで詰めてあげるという構造ですね。
例えば、ブログで必要なデータモデルは、「記事」「記事内の画像」「タグ」などがあると思います。このデータモデルをContentfulで定義してコンテンツを流し込み、Gatsbyでビルド時によしなに処理することでサイトとして構築することが可能になります。コンテンツの種類も豊富で、リッチテキストなどにも対応しており、記事内に画像を埋め込むことも可能です。
Contentfulを利用することでバックエンドの実装を考えなくて良くなるので、フロントエンドでさえ俄か知識の私でも簡単に構築できたので、とても助かりました。
さらに、Contentfulにはコンテンツをpublishした時に自動でNetlifyのデプロイをトリガーする機能もあるので、記事を公開すると同時にデプロイ・ビルドされて自動でサイトを更新することができます。なので、スマホやタブレットのブラウザからも簡単に更新ができるわけですね。
できるだけコストをかけたくない
これだけリッチな環境で構築しているということは、さぞコストもかかりそうなものですが、今のところ当サイトはドメイン使用料以外のコストは１円も払っていません（2021年3月現在）。
とはいえ、ブログ自体が立ち上げ間もないこともあり、コンテンツ量も流入量も多くはないので、帯域や容量的にフリープランの範囲で賄えている、というのが正しい状況です。
これからコンテンツをどんどん追加して、流入もまともに入ってくるようになれば、プランのアップグレードが必要になってくるとは思います。
サーバーのメンテナンスに手間がかからないこと
当サイトはNetlifyの静的ホスティングサービス上で配信されているだけなので、サーバーを持ちません。つまり、サーバーにWordpressを構築して…といったメンテナンスは一切不要です。
ContentfulとNetlifyとGithubの強力な連携のおかげで、初期設定とドメイン設定さえしてしまえば、デプロイ〜ホスティングは勝手にやってくれます。新機能の実装やスタイル変更をしても、ローカルで動作を確認してgit pushするだけで簡単に更新できてしまいます。
そして、Gatsbyによる静的サイトジェネレートのおかげでサーバー上にデータベースを持たないので、Wordpressのプラグインやphpmyadminの脆弱性を気にして頻繁に更新を確認する必要もありません。
ただし、Netlifyが死ねば当然ホスティングされているサービスも影響を受けるので、そこだけリスクはあると思いますが、この便利さには替えられないと思いました。まじすごい。
必要な機能やデザインを自由に追加・編集できること
GatsbyとContentfulの連携により、Wordpressのような検索機能や記事のリスティングやタグ機能など、基本的なブログの機能は十分に実現可能です。
Gatsbyでプレーンな状態からサイトを構築しようとする場合は、これらの機能は基本的に自力で実装することになりますが、Gatsbyにはこれらの機能が標準で実装されている強力なテンプレートが用意されています。
「Blog」カテゴリだけでも173ものテンプレートが利用できます（2021年3月現在）。他にも、「Landing Page」や「Portfolio」といったカテゴリもあり、必要に応じて選択できるのも助かりますね。
ちなみに当サイトは、プレーンに近いデフォルトのテンプレート（gatsby-starter-default）を使用して構築しています。タグ機能などは後付けで実装しました。
私自身がReact.jsの勉強もしたかったのと、全ての機能を一からデザイン・実装してみたかったのでこのようにしていますが、時間を節約してありもので構築したい方はもっとリッチなテンプレートを使うと便利だと思います。
ただし、サーバーにデータベースを持たないので、読者からのコメント投稿やフォーム送信など動的な機能を実現するには、GetformやDisqusなどの外部サービスを利用して実装する必要があります。
SEO対策ができる
Gatsbyのプラグインが充実しており、SEO対策のためのプラグインも充実しています。これは、私が尊敬する天才フロントエンジニアが書いた以下の記事を参考にさせてもらいました。
GatsbyでGoogle Lighthouseで満点を取るブログを一から作る
こちらの記事を参考にブログを構築することで、Lighthouseで実際に満点を取ることができました。ただし、記事やコンテンツによっては満点にならないページもあります。
3. まとめ
最後に、Gatsby + Contentful + Netlifyでブログを構築することのメリット・デメリットをまとめました。
メリット
Gatsby.jsによる非常に高速な読み込みパフォーマンスの実現
Contentfulによる柔軟で場所を選ばない執筆環境
Netlifyによるデプロイの自動化
サーバーのメンテナンスが不要
最小限のコストから始められる
必要な機能やデザインを自由度高く実現できる
SEO対策が容易
プラグインでEmotionなど既存のCSSフレームワークの導入が容易
コンテンツ管理とフロントエンド開発を切り離して開発できるので、ソースコードの管理がシンプル
テーマの違うブログを立てようと思った時に使い回しがしやすそう（未検証）
デメリット
基本的に機能やデザインを自分で実装する必要がある
実装にReact.jsやGraphQLやローカル開発環境構築などの専門的な知識が必要
フォーム送信やコメント投稿など動的にデータ扱う機能が使いづらい（別途外部サービスを利用する必要がある）
Netlify、Contentfulで破壊的な仕様変更があると、都度対応しなければならない
フリープランの改正や従量課金によるコスト増加のリスクがある
実装がそれぞれのサービス用のインフラに依存するため、サービス切り替えがしづらい
これらのサービスが終了するリスクがある
いかがでしょうか。私のフロントエンド・バックエンドの知識では十分に説明できてないかもしれないですが、この構成の魅力が少しでも伝われば幸いです。
当面はFigmaやデザイン関連の投稿を増やしていくつもりです。将来的には、このブログを実験場として記事を読みやすくするUI/UXの検証や、SEOに関する検証をしながらこのコンテンツを発展させていこうかなと考えていますので、機会があればまたそのノウハウについても書いてみたいと思います。
