ホームページの技術構成について

実は、今ご覧いただいているエンライコンサルティング合同会社のホームページは代表である鈴木が自作しております。

外注をすることでより良いデザインのサイトになることは理解しているのですが、それでも会社の顔であるホームページをあえて自作した理由、それはいわゆるJamstackという技術構成を自身で試してみたかったからです。

このJamstack、エンジニア以外だとあまり馴染みのない単語だと思います。簡単に説明すると、このJamstackはメンテナンスが簡単でめちゃくちゃ早いサイトを構築するための技術構成となります。

当然この構成には単純なメリットだけでなく、さまざまなデメリットもあるのですが、ホームページ + blogのシンプルな構成であればメリットのみを享受できるように思います。

画面を切り替えていただくと、他のサイトと比べても我々のサイトの表示速度が速いことを実感いただけると思います。

具体的な技術構成としては「gatsby.js」というjavascriptのフレームワークでサイトを構築し、記事については「microCMS」というヘッドレスCMSサービスを利用、「Cloudflare pages」をホスティングとして利用しています。

通常、レンタルサーバーやSTUDIO/Wraptusなどのサービスを使うと月数百円程度の利用料がかかるのですが、Jasmtackの構成であれば私の選んだ「Cloudflare pages」をはじめとして無償のホスティングサービスで十分運用可能なため、サイト維持費も大幅に抑えることができます。

今回のサイトを作成するにあたり、以下の書籍を参考にさせてもらいました。ちょうどkindle unlimitedの2ヶ月99円のキャンペーンが適用されたので、お財布に優しく学ぶことができました。

JAMStackを学ぼうGatsby4＋Tailwind＋Gatsby Cloudでつくるコーポレートサイト改訂新版【前編】: もうレンタルサーバーはいらない

JAMStackを学ぼうGatsby4＋microCMSでつくるコーポレートサイト 改訂新版 【後編】: ～WordPressはもう古い～

また、ヘッドレスCMSのmicroCMSはwordpressなどとは異なり、導入のためには多少の実装技術が必要になるためか、詳細な実装方法の説明などの情報がmicroCMSのblogに充実しており、こちらも参考にさせていただきました。

今回、Jamstackを使ったサイト構築を試そうと思ったのは、いただいたお仕事の案件で、計測用のURLや一部の文言だけを変えたLPを誰でも簡単に複製できるようにしたい、という要望をいただいたことで、本構成を使うことができるのではないかと思い、概念を実証も兼ねて構築してみたという次第です。

デザインだけはもう少し洗練させたいものの、構成自体は概ね満足のいくホームページが作成できました。