STUDIOからCloudflare Pagesへ、コーポレートサイトを引っ越しました

UNIQUEXのコーポレートサイト（uniquex.co.jp）を、STUDIO（studio.design）で公開する形から、Cloudflare Pagesで配信する静的なサイトへ引っ越しました。2026年4月に作り直し、いまは、サイトの変更をGitHubで管理しています。この記事では、引っ越しの進め方と、そのあとでつまずいたことを、リポジトリに残っている記録をたどりながら、お話しします。

見た目は、そのままに

いちばん大切にしたのは、訪れてくださる方から見て「何も変わらない」ことでした。4月13日から14日にかけて、作り直しの方法をいくつか試し、4月15日に、STUDIOで公開しているページをそのまま描画したHTMLを取り出して、静的なサイトとして持つ方法に決めました。

• ブラウザの自動操作（Playwright）で、元のサイトの描画済みHTMLを取り出しました。
• フォント577個、画像27個、Google Fontsなど、外にあった資源を、自分たちのサイトの中に取り込みました。
• 記事3件と、その画像6件も同じ方法で移しました。画像は、画面の幅に合わせて、PC・タブレット用とスマートフォン用を出し分けるようにしています。

引っ越しても、同じ形のままです

PCでも、スマートフォンでも、ヘッダー、大きな色の面のヒーロー、ボタンの形は、引っ越し前と同じ形のままです。その後に、キャッチコピーやサービスの紹介を、新しい内容に更新しています。サービスの紹介のページも、同じ形のまま、中身だけを新しくしました。

同じに見えるかを、機械で見比べました

目で見るだけでは心もとないので、元のサイトと引っ越し後のサイトを、同じページ・同じ画面幅で撮影し、違いを数値にする検査（画面の比較検査）を作りました。

• 4月15日: 6ページ×3つの画面幅（PC・タブレット・スマホ）で、すべて違いが1%未満になりました。
• 4月16日: 9ページ×3つの画面幅の27項目すべてで1%未満になり、平均の違いは0.272%でした。
• 最後まで残ったのは、画像の縦横比の0.266ピクセルのずれと、スマホでの記事の画像でした。画像の出し分けを直して、2.19%あった違いを0.34%まで小さくできました。

検索とアクセスを引き継ぐ

• 4月18日: robots.txt、sitemap.xml、構造化データ（Organization・WebSite・BreadcrumbList）を加えました。
• 4月19日: 旧サイトで表示できなくなっていたURL（記事のカテゴリのページ5つと、旧い記事1件）は、記事の一覧（/article）へ301でご案内するようにしました。

配信と、お問い合わせフォーム

4月19日に、Cloudflare Pagesからの配信を始めました。mainブランチに変更が入ると、GitHub Actionsが、生成物の一致と検査を確かめたうえで、自動で公開します。

お問い合わせフォームは、STUDIOの旧フォームをやめ、Cloudflare Pages Functionsで受け取る形に作り直しました。お預かりした内容はNotionのデータベースにため、対応状況と受信日時で進み具合を見ています。迷惑な投稿を避けるために、Cloudflareが提供するTurnstileを使っています。

引っ越しのあとで、つまずいたこと

うまくいったことばかりではありません。

• スマートフォンのヘッダーとメニューの表示が崩れ、4月17日と20日に直しました。
• フォントは、4月20日に、権利の面で安心できる構成へ見直しました。5月5日には、読み込まれない問題が見つかり、Noto Sans JPとGoogle Fontsの構成にそろえて直しています。
• 存在しないURLを開くと、Cloudflare Pagesは、404.htmlが無い限り、トップページを返してしまいます。10月3日に専用の404ページを置き、サイトの検査にも確認を加えました。

いまの画面を、測ってみました

2026年10月13日13時20分ごろに、公開しているトップページ（https://uniquex.co.jp/ 、公開版のコミット953b56d）を、Chrome 155のDevToolsに入っているLighthouse 13.4.1で測りました。PC（幅1440px）とスマートフォン（幅390px）の画面で、1回ずつです。下の値は、次の段落の修正をしたあとの測り直しです。

• アクセシビリティ: PC 100、スマートフォン 100
• SEO: PC 100、スマートフォン 100
• ベストプラクティス: PC 77、スマートフォン 77（アクセスの解析に使っているタグが、サードパーティのCookieを使っているという指摘によるものです）

同じ日の最初の測定では、PCの画面でナビゲーションの小さな文字の色が基準に届いていませんでした（コントラスト3.36対1）。色を濃くして直し、そのあとで測り直しています。レポートは、リポジトリのdocs/measurements/2026-10-13/に置いています。

これから

サイトの変更は、リポジトリに記録され、公開の前に自動の検査を通ります。ページの構造・リンク・サイトマップの確認と、PCやスマートフォンの画面幅での表示の確認です。10月には、全ページの右下に「フィードバックを送る」ボタンを置きました。読んでくださった方の声を、直接受け取れるようにするためです。これからも、少しずつ手を入れていきます。

なお、ここまでの経緯は、リポジトリに残っている変更の記録だけをもとにまとめています。表示速度や費用の比較は測っていないため、扱っていません。