株式会社アクア

アクアコーポレートサイトの利用技術

2021年10月27日 喬 丹

技術動向

皆さんがご覧になっているアクアのコーポレートサイトの開発を担当している若手社員の喬です。 アクアのコーポレートサイトは、今どきのWebサイト構築技術(いわゆるJAMStackというやつですね)をつかって開発しています。

今日は、アクアのコーポレートサイトを支える技術について紹介します。

システム構成図

Gatsby

Gatsbyは静的サイトジェネレーター(SSG)の1つで、高速なサイトを手軽に構築するためのReactをベースに開発されたフレームワークです。

公式サイト: https://www.gatsbyjs.org/

ビルド時に全てのHTMLを最初に生成するツールで、サーバーでのページ生成処理がないので読み込みが高速動的要素が少ないコーポレートサイトにはうってつけです。

Gatsbyを採用するメリット:

  • GraphQLを標準採用している

  • プラグインが豊富で、Contentful連携などが容易に実現可能

  • 欧米での導入実績が増えており今後のトレンドと予想される

  • 公式でNetlify, Contentfulとのコラボレーションが多く紹介

Contentful

“Contentful”を一言でいうと、コンテンツを1つのリポジトリで管理してくれるサービスです。Webページの「ヘッド」つまり「フロントエンド」がないCMSで、API経由でデータを取得し、独自のフロントエンドを構築可能です。

公式サイト: https://www.contentful.com/

Contentfulを採用するメリット

  • PaaS型CMSでサーバー管理の必要がない
  • Headless CMS界隈で開発者コミュニティの規模が最大
  • Spotify、WeWorkなど、企業での導入実績あり
  • Webhook機能を用いることでコンテンツ更新を他サービスに伝えることができる

Netlify

Netlifyは、静的サイトをホスティングすることができるWebサービスです。

公式サイト: https://www.netlify.com/

Netlifyを採用するメリット

  • CIツールを内包。GitHubなどのリモートリポジトリと連携するだけでCI/CDを実現できる(別途ブランチの設定は必要)
  • build hookと呼ばれる外部サービスのイベントをトリガに自動ビルド/デプロイを行うAPIが用意されている
  • Form機能を利用することでサーバーサイド設計なしで問い合わせ処理が実現できる。メール通知も設定できる

これからも最新のWeb技術を取り入れて、コーポレートサイトも進化を続けていきます。どうぞご期待ください。

関連トピックス