Insights / 技術解説
実装と運用の判断を、再利用できる知見へ。
サービスや実績の背景にある設計判断を、Astro、Cloudflare、CMS、SEO、アクセシビリティなどのテーマごとに整理しています。
Library / 01
技術解説一覧
導入の考え方から整理したい場合は、導入ガイドをご覧ください。導入ガイドを見る
Cloudflare VectorizeとRAG入門：検索とAI回答の違いを理解する
Cloudflare Vectorizeで、公開済みの情報を言い換えた質問でも見つけやすくする方法を、導入メリット、通常検索との違い、RAGの役割、段階的な始め方から説明します。
- 技術
- Cloudflare
- Vectorize
- RAG
- 意味検索
- サイト内検索
Cloudflare Vectorize実装ガイド：公開HTMLを安全に同期する
公開HTMLからcorpusを作り、Pagefindと併用しながらVectorizeを安全に同期・運用するための実装ガイドです。
- 技術
- Cloudflare
- Vectorize
- OpenAI
- サイト内検索
「静かな基盤」をかたちに。Acecore Systemsサイトをリニューアルしました
Acecore Systemsのサイトを「静かな基盤」をテーマにリニューアルしました。業務を「現場・仕組み・運用」の三層で捉え、支援方針、サービス、実績、料金、導入ガイド、相談までの流れを再設計した背景と主な変更点を紹介します。
- お知らせ
- サービス
- Webサイト
- Web制作
Astro + Cloudflareで公式サイトを機能拡張する全体設計
AstroとCloudflare Pagesを土台に、問い合わせAI、Sveltia CMS、多言語ブログ、サービスCTA、Markdown安全描画、Cloudflareだけのコメント機能をどう組み合わせて公式サイトを育てたかを、他サイトにも転用しやすい全体設計として整理します。
- 技術
- Astro
- Cloudflare
- Webサイト
- AI
- CMS
CloudflareだけでAstroブログにコメント機能を作る方法
外部コメントサービスに頼らず、Cloudflare Pages Functions、D1、Turnstile、Wrangler設定だけでAstroブログにコメント機能を追加した実装記録です。API設計、保存先、スパム対策、origin制御、Wranglerでのbinding管理、運用時の注意点まで整理します。
- 技術
- Cloudflare
- Astro
- セキュリティ
- Webサイト
Sveltia CMSで多言語ブログを運用する方法
Sveltia CMSで日本語記事を更新し、GitHub ActionsとGitHub Copilotで翻訳PRを作る運用を、UI翻訳との違い、検索エンジン上のメリット、hreflang、RSS、sitemap、レビュー観点まで含めて整理します。
- 技術
- GitHub Copilot
- i18n
- CMS
- SEO
Sveltia CMS導入ガイド
Astroなどの静的サイトにSveltia CMSを導入し、GitHub OAuth、専用GitHub App、検証付き直接公開、画像アップロード、多言語運用まで整える手順と反省点をまとめます。
- 技術
- CMS
- Astro
- Cloudflare
- セキュリティ
AIチャット回答のMarkdownリンクを安全に描画する実装設計
AIチャットの回答に含まれるMarkdownリンクを、HTMLへ安全に変換するための実装メモです。URL前後の空白を許容しつつ、trim、許可リスト、DOM生成、fallback、テストケースを分けて考えることで、他サイトにも転用しやすいレンダラーになります。
- 技術
- Webサイト
- AI
- セキュリティ
- Astro
サービスCTAから問い合わせフォームへ文脈を引き継ぐ技術設計
サービスページで読んでいた文脈を問い合わせフォームへ引き継ぐための実装設計です。AstroサイトでのミニCTA、URLパラメータ契約、フォーム種別の初期選択、件名prefill、多言語URL、GA計測、生成HTML確認まで、他サイトでも使える形で整理します。
- 技術
- Webサイト
- サービス
- Astro
- CMS
Astroサイトに問い合わせAIチャットを組み込む技術設計
Astro + Cloudflare Pages 構成の静的サイトに、OpenAI Responses API を使った問い合わせAIチャットを組み込むための技術設計です。API境界、サイト内コンテキスト、プロンプト制御、locale別URL、Originチェック、レート制限、安全なMarkdownリンク描画まで、他サイトでも転用しやすい形で整理します。
- 技術
- Cloudflare
- Webサイト
- AI
- サービス
Hattのホームページを公開しました
絵、小説、VRChat向け3Dアバター・ギミック制作をまとめる「Hattのホームページ」を公開しました。Astro、Sveltia CMS、Pagefindを使い、創作活動を継続して発信できる個人サイトとして設計しています。
- お知らせ
- Web制作
- Webサイト
- CMS
- Astro
ホームページ制作の費用相場と見積もりで見るべきポイント
ホームページ制作の費用相場を目的別に整理し、見積もりで確認すべき項目、予算内で成果につなげる考え方を解説します。
- Web制作
- Webサイト
- SEO
- サービス
以前有料だった Cloudflare の SSL オプションの正体 ― Dedicated SSL から Advanced Certificate Manager へ
Cloudflare で以前有料だった「Dedicated SSL Certificates（専用SSL証明書）」は、2021年に「Advanced Certificate Manager（ACM）」として機能拡張・名称変更されました。無料の Universal SSL との違いや ACM が必要なケースを解説します。
- 技術
- Cloudflare
- セキュリティ
- インフラ
Astroサイトの品質改善ガイド 続編 ― PageSpeed Insights 全項目100点を達成した最終調整
Cloudflare Web Analytics の停止、GA4 と検索UIの遅延ロード化、PageSpeed Insights のモバイル / デスクトップ全項目100の達成、Search Console のパンくずと索引整理、SVGアイコン移行、そして試したが採用しなかった最適化の判断まで。前回記事の続編として最終改善をまとめます。
- 技術
- Astro
- パフォーマンス
- アクセシビリティ
- SEO
- Webサイト
Astroサイトの品質改善ガイド ― PageSpeedモバイル99点達成までの道のり
Astro + UnoCSS + Cloudflare Pages 構成のサイトをパフォーマンス・SEO・アクセシビリティ・UXの4軸で改善し、PageSpeed Insights モバイル99点・デスクトップ全項目100点を達成した全記録です。
- 技術
- Astro
- パフォーマンス
- アクセシビリティ
- SEO
- Webサイト
GitHub Copilot × Playwright でWebサイトをモンキーテストする実践手法
VS Codeのエージェントモード（GitHub Copilot）とPlaywrightブラウザツールを組み合わせ、静的サイトを体系的にモンキーテストした実践記録です。テスト設計の考え方から、実際に発見・修正したバグ、改善提案までを公開します。
- 技術
- GitHub Copilot
- VS Code
- Astro
- Webサイト
Astro View Transitionsの落とし穴と解決策 ― UX・コード品質改善ガイド
AstroのView Transitionsでスクリプトが動かなくなる問題の解決策、Pagefind全文検索の導入、TypeScript型安全性の向上、定数の一元管理など、UXとコード品質を改善した実践ガイドです。
- 技術
- Astro
- Webサイト
AstroサイトのアクセシビリティをWCAG AA準拠にする実践ガイド
Astro + UnoCSS 構成のサイトで実施したアクセシビリティ改善の全手順を紹介します。aria属性・コントラスト・フォーカス管理・フォーム検証・スクリーンリーダー対応など、WCAG AA準拠に必要な施策を網羅しています。
- 技術
- Astro
- アクセシビリティ
Astroサイトに構造化データとOGPを実装するSEO改善ガイド
Astro + Cloudflare Pages 構成のサイトに JSON-LD 構造化データ・OGP・サイトマップ・RSSを正しく実装した手順をまとめました。Google のリッチリザルト対応からRSSフィードの最適化まで、実践的な SEO 改善を紹介します。
- 技術
- Astro
- SEO
Astro 7 サイトを9言語対応に ― ブログ翻訳と多言語アーキテクチャ
Astro 7.1.3 + UnoCSS + Cloudflare Pages 構成のサイトを9言語対応にした記録です。UI の国際化からブログ記事の翻訳、Pages CMS の多言語設定まで、全工程を解説します。
- 技術
- Astro
- i18n
- Webサイト
GitHub Copilot に確定申告を全部やらせてみた ― 仕訳837件から申告提出まで
クラウド会計のデータ連携で蓄積した仕訳837件の分類・検証から、社会保険料の突合、控除入力、申告提出まで。GitHub Copilot Agent Mode × Simple Browser に実作業をほぼ全振りした確定申告の全記録です。
- 技術
- GitHub Copilot
- VS Code
Zoho Mail から KAGOYA MAIL への移行ガイド ― DNS・認証・データ棚卸しの実践記録
Zoho Workplace から KAGOYA MAIL へメールサービスを移行した際の手順・DNS設定・SPF/DKIM認証・Zoho Workplace 全体のデータ棚卸しまで、実践ベースで解説します。
- 技術
- メール
- DNS
- インフラ
AstroサイトのPageSpeedを改善する実践テクニック
Astro + UnoCSS + Cloudflare Pages 構成のサイトで行う最適化を紹介します。CSS配信戦略・フォント設定・レスポンシブ画像・AdSenseの読み込み制御・GA4の遅延読み込み・キャッシュ設定を、現行実装に合わせてまとめました。
- 技術
- Astro
- パフォーマンス
Cloudflare Pages で実現するセキュアな静的サイト配信
Cloudflare Pages での静的サイトデプロイと、_headers によるセキュリティヘッダー・CSP 設定の実践ガイドです。Worker から Pages に戻した経緯も紹介します。
- 技術
- Cloudflare
- セキュリティ
VitePress から Starlight へ ― ドキュメントサイトのフレームワーク統一
VitePress + UnoCSS で構築していた事業計画ドキュメントを Astro + Starlight に移行し、2つのプロジェクトでフレームワークを統一した記録です。Mermaid 図表の CDN 移行も紹介します。
- 技術
- Astro
- Starlight
