「ある大学の先生が実験データを出してくれたんです」
その施工会社の担当者がそう言った。カーエアコンを洗浄する前と後で、吹き出し口の菌の量がどれくらい変わるか。数値がある。グラフにしたい。ペライチのウェブサイトには入らなかった。
「ペライチから移行しましょう」と提案したのはその場だった。
ペライチの限界
ペライチはノーコードのLP作成サービスだ。設定なしでウェブサイトが作れる。しかしできることの範囲が決まっている。
SVGグラフで動的なデータ表示がしたい。数値がアニメーションで増えていくUIを作りたい。資料請求フォームに自動返信メールとPDFダウンロードリンクを組み込みたい。これらは全てペライチでは難しい。
静的HTMLで1から作り直すことにした。
AWS S3 + CloudFrontを選んだ理由
静的HTMLのホスティングにGitHub PagesやNetlifyを使う方法もある。設定が簡単でよく使われる。
その施工会社ではS3+CloudFrontを選んだ。理由は単純で、焼き菓子店・洋菓子店・DXゲームで同じ構成を使っており、設定手順が確立されているからだ。新しいサービスを調べる時間を省ける。
キャッシュの設定だけ注意した。HTMLファイルのTTLを0にした。HTMLを更新したとき、CloudFrontのキャッシュが残って古い版を配信し続けることを防ぐ。CSS・JS・画像はTTLを長く設定してCDNの効果を使う。HTMLと静的アセットでキャッシュ戦略を分ける。
サイトの構成
トップページとブログページの2ファイルが基本構成だ。
トップページのセクションは、ヒーロー（特許番号・統計パネル）、ビジネス概要、ある大学調査データのSVGグラフ、施工写真ギャラリー、資料請求フォームの順に並ぶ。
SVGグラフはJavaScriptで動的に描画した。Chart.jsのような外部ライブラリを使わずに、SVG要素を直接生成した。外部ライブラリのロードが不要になり、ページが速くなる。
デプロイの自動化
AWSコンソールから毎回手動アップロードするのは面倒だ。PowerShellスクリプトで自動化した。
aws s3 cp 'index.html' 's3://（バケット名）/index.html' `
--content-type 'text/html; charset=utf-8' --no-verify-ssl
aws cloudfront create-invalidation `
--distribution-id E2WBP7DEPABHYJ --paths '/index.html' --no-verify-ssl--no-verify-sslオプションが必要だった。ローカルのSSL証明書検証エラーが出るためだ。社内ネットワーク・管理者操作に限定されているため許容と判断した。
モバイル対応
ブレークポイントは2段階にした。980px以下でタブレット向け、560px以下でスマートフォン向けだ。
パートナー（加盟店候補）はPCからアクセスすることが多い。しかし一般のユーザーはスマートフォンから来る。どちらでも適切に表示されるレスポンシブデザインにした。
980px以下ではハンバーガーメニューに切り替わる。全画面オーバーレイメニューで、メニュー項目がタップしやすいサイズで表示される。
*次回は「GASで資料請求フォームを実装——Formspreeから自作への移行」*
*シンプルシステム株式会社 代表 伊藤勝彦*