SSG(静的サイトジェネレーター)でサイトやアプリなどを作成する際の課題の一つに、フォームの実装問題があります。

WordPressならプラグインを使えば簡単にフォームを作れますが、フォームのデータを直接サーバーに送信できないSSGで同じようなことをしようとすると、コードの記述量が増えたり、フォーム送信に関する別の知識が必要になったりして大変です。

ですが、SSGformというサービスを使えば、そういったフォーム問題を簡単に解決できます。

今回はSSGformの紹介とSSRとSSGについての解説記事です。

ぜひ最後までお読みください。

SSRとSSG

SSRとは

SSRはサーバーサイドレンダリング(Server Side Rendering)のことで、ページ遷移のたびにサーバーにリクエストが走り、サーバー側で生成されたコンテンツをブラウザに返す仕組みのことです。

サーバー側での処理が必要なため、基本的にバックエンド言語(PHP,Ruby,Pythonなど)の記述が必要になります。

SSGとは

SSGはStatic Site Generation(静的サイトジェネレーター)の頭文字を取ったもので、静的なサイトを生成するツールのことです。

SSGでは、ファイルのアップロード時にサーバー上でビルドという処理が走り、コンテンツが生成されます。
ユーザーからリクエストがあると、サーバー上でレンダリングはされずに、事前に生成されたコンテンツをブラウザに返すだけといった仕組みになっています。

代表的なフレームワークで言うと、Next.js、Gatsby.js、Nuxt.js、そしてAstroなどがあります。

SSGのいいところ

高速表示

SSGはサーバーにおけるレンダリングがなく、事前に用意されていたコンテンツを表示するだけなので、表示速度が高速というのが大きな特徴の一つです。

フレームワークやサイトごとに差異はありますが、URLを叩くと素早く画面が表示されたり、別ページへ遷移も早かったりするため、ユーザーのストレスを減らすことができ、サイトの離脱率を下げる効果が期待できます。

フロントエンドで完結

サーバー側での処理が必要ではないため、バックエンド言語(PHP,Ruby,Pythonなど)も必要ありません。
フロントエンド言語のみで実装できます。

セキュリティ面

SSGではデータベースとのやりとりが行われないため、データベースへの悪意のある攻撃へのリスクがなくなります。
また、SSGは一度ビルドすれば、その後はサーバーレス環境でコンテンツを提供するため、サーバーを狙った攻撃のリスクも減らすことができます。

SSGの問題点

難易度

Next.js,GatsbyであればReact、Nuxt.jsであればVueといったように、フレームワークによってはモダンJavaScriptの使用が必須になる場合があり学習コストがかかります。
また、フレームワークごとに記述方法や機能に違いがあるので、その分の勉強も必要になります。

記事の実装

SSGではデータベースとのやりとりが行われないので、WordPressのように記事を投稿して公開するということはできません。

エンジニアならマークダウンファイルでの記事の作成が可能ですが、非エンジニア向けには他のサービス(ヘッドレスCMS)とAPIで連携するのが一番いい方法です。

ちなみに、ヘッドレスCMSとは、見た目(フロントエンド)の部分はなく、データのみを管理しているシステムのことで、API連携をしてそこからデータのみを引っ張ってきてサイトに表示させるというのが、一般的なSSGでの記事の実装方法です。

代表的なヘッドレスCMSには以下のようなサービスがあります。

他にも様々なサービスがありますが、私のお気に入りはmicroCMSです。

日本の企業であるため、サイトが日本語表記であり、日本語ドキュメントも豊富なのでとてもわかりやすいです。

お問い合わせフォームの実装

SSGではフォームのデータを直接サーバーに送信することができないため、別の方法でフォームのデータを処理する必要があります。

他のサービスやフレームワークで実装するケースがほとんどだと思いますが、AWSやFirebaseなどのクラウドサービスを使って実装するとなると、専門知識が必要になるのはもちろん、時間や工数も増えて大変です。

そこで私がおすすめするのは「SSGform」というサービスです。

SSGformのメリット

実装がとにかく簡単

サービスに登録して、発行されたURLをformのaction属性に記述するだけでフォームの送信ができるようになります。

驚くほど簡単です。

日本の企業

サービスサイトはすべて日本語で書かれています。
何かあった時も日本語でやりとりができるので安心です。

スパム対策

お問い合わせフォームといえばスパム対策は必須ですが、簡単なコードを追記するだけで簡易スパム対策をすることができます。
また、recaptchaの設定も可能なので、合わせて使えばより高度な対策が可能になります。

ページ遷移

お問い合わせ後のサンクスページへのページ遷移もURLを入力するだけで可能です。
サンクスページを作らない場合は、SSGformが用意してくれているデフォルトの画面に遷移します。

自動返信機能

ユーザーへの自動返信機能も簡単に追加することができます。
メッセージも自由に記述でき、送信元はデフォルトではSSGformですが、DNSに追記することにより、送信元を変更することも可能です。

無料枠がある

月間フォーム送信数が100通までは無料です。
有料プランでも、月980円で1000通まで、月2980円で5000通までとかなり良心的です。(既存のプラン以外にもカスタムプランがあります)
上限が迫ってくると通知があり、いつでもプランの切り替えは可能です。

その他

上記以外にもSSGformのメリットはたくさんあります。
広告表示がない、送信元ドメインが変更、許可ホストの制限、Slack通知が可能などなど本当にたくさんのメリットがあります。

詳しくは公式サイトでご確認ください。
SSGForm公式サイト https://ssgform.com/

 

まとめ

以前は私も一生懸命コードを書き、フォーム機能を実装していましたが、SSGformを使うようになってからはその手間は全くなくなり、工数も時間もかなりカットできるようになりました。

神サービスです。

formのaction属性を記述するだけなので、SSGのフレームワークやサーバーを問わず利用でき、WordPressやHTMLとCSSだけの簡易サイト、LPなどでも利用できます。

気になった方はぜひ公式サイトにいってみてください。
SSGForm公式サイト https://ssgform.com/