「最近HTMLを書いてないんです」―― Web制作の現場で起きている変化と、Astroという選択肢
弊社は、LP（ランディングページ）制作で培ってきたコンバージョン改善のノウハウを軸に、LP単体にとどまらず中規模のWebサイトまでを手がけています。目指しているのは、ただページを作ることではなく、問い合わせ・申し込み・購入といった「成果（CV）」につながるサイトをつくることです。
本記事で紹介するAstroの採用も、この「CV改善のためのサイト制作」という目的を実現するための技術選定の一つです。
はじめに：ある日の打ち合わせから
「最近、HTMLを直接書いてないんですよね」
あるお客様との打ち合わせでそう口にしたとき、「え、WebサイトってHTMLでできてるんじゃないんですか！？」と驚かれました。
たしかに、Web制作といえば「HTMLを書く仕事」というイメージが強いかもしれません。実際、ほんの数年前まではそうでした。しかし今、制作の現場では気づかないうちに大きな変化が起きています。
HTMLがなくなったわけではありません。HTMLは今もWebの根幹を支える技術です。
変わったのは、HTMLとの向き合い方です。
今回は、弊社がWebサイト制作に採用しているフレームワーク 「Astro（アストロ）」 について、技術者ではない方にもわかるようにご紹介します。
「フレームワークって何？」
「導入すると何が嬉しいの？」
「制作を依頼する側にとってどんなメリットがあるの？」
そんな疑問にお答えできればと思います。
そもそも「フレームワーク」とは？
本題に入る前に、「フレームワーク」という言葉を整理しておきます。Web制作に関わるミーティングや提案書で見かけることが増えた言葉ですが、改めて説明される機会は意外と少ないかもしれません。
フレームワークとは、Web制作を効率的に進めるための"土台"となる仕組みのことです。
料理にたとえてみます。毎回ゼロから食材を買い出し、調味料を量り、調理器具を棚から出して——という作業を繰り返すのは大変です。
しかし、よく使う道具が整理され、基本の下ごしらえが済んだ状態のキッチンがあったらどうでしょう。
作る料理（＝Webサイト）自体は同じでも、準備にかかる時間と手間がぐっと減り、料理そのもの。つまりデザインの再現やコンテンツの作り込みに集中できるようになります。
フレームワークは、そうした「制作に集中するための仕組み」を提供してくれるツールです。
Astroとは
Astroは、2021年に登場した、Webサイトを効率よく作るための新しいフレームワークです。数あるフレームワークの中でも、特にコーポレートサイトやLP（ランディングページ）のような「コンテンツを届けること」が主な目的のサイトとの相性に優れているのが大きな特徴です。
近年、Webのフレームワークはさまざまな選択肢が登場しています。React、Next.js、Vue、Nuxt、Svelte——技術者じゃないとなかなか聞かない単語ですよね。それぞれに得意分野がありますが、Astroは「情報を正しく、速く届けるWebサイト」という領域に特化することで、急速に支持を広げています。
ではなぜ弊社がAstroを選んだのか。従来のやり方と比較しながらご説明します。
従来のHTML制作で起きていたこと
これまでのWeb制作では、ページごとにHTMLファイルを1枚ずつ作成していました。
一見シンプルに見えるこの構成。ページ数が3〜4枚の小規模なサイトであれば、これでも問題なく運用できます。しかし、実際の案件では10ページ、20ページ、時にはそれ以上の規模になることも珍しくありません。そうなると、次のような問題が日常的に発生していました。
課題①：同じ修正を何度も繰り返す
たとえば、グローバルナビゲーション（サイト上部の共通メニュー）に新しい項目を1つ追加するケースを考えてみてください。従来の方法では、ヘッダー部分のHTMLはすべてのページにコピーされています。つまり、20ページのサイトなら20ファイルを開いて、まったく同じ修正を20回繰り返すことになります。
単純作業の繰り返しは、時間がかかるだけでなく、集中力の低下によるミスを誘発します。
課題②：修正漏れという"気づきにくい事故"
ファイルが増えるほど、「あのページだけ修正が反映されていなかった」という事故が起きやすくなります。公開直後に気づければまだよいのですが、数週間後にお客様から「このページだけメニューが古いままですよ」とご連絡をいただく……そんな経験は、制作に携わる方なら一度はあるのではないでしょうか。
これは仕組みとして修正漏れが起きやすい構造になっていることが根本的な原因です。
課題③：CSSの肥大化と"触れないコード"の発生
サイト全体のスタイル（デザインの指定）を1つのCSSファイルで管理していると、サイトの成長とともにファイルが巨大化していきます。数千行、時には1万行を超えるCSSファイルの中から目的のスタイルを探し、修正の影響範囲を正確に把握するのは容易ではありません。
結果として、「この部分を変えると他のページが崩れるかもしれないから触りたくない」というコードが生まれます。これが積み重なると、サイトの改修や機能追加のたびに予想以上の工数がかかるようになっていきます。
Astroではどう変わるのか
Astroでは、サイトを構成する要素を「コンポーネント（部品）」という単位で管理します。
ヘッダー修正が「1箇所で完結する」世界
ヘッダーを修正したいときは、Header.astro というファイルを1つ直すだけ。あとはすべてのページに自動で反映されます。 20ページあっても、100ページあっても、修正するのは1ファイルだけです。
修正漏れという概念そのものが、仕組みとしてなくなります。
スタイルが「部品の中に閉じる」安心感
Astroでは、各コンポーネントのスタイルはそのコンポーネントの中に記述します。つまり、ボタンのスタイルを変えても、ヘッダーやフッターのデザインには一切影響しません。「ここを直したら別の場所が崩れた」というトラブルが、構造的に起きにくくなっています。
これにより、制作チーム内で「このCSSは触らないで」といった暗黙のルールに頼る必要がなくなり、誰でも安心してコードを修正できる環境が生まれます。
比較表
弊社がAstroを採用している4つの理由
1. 表示速度の速さ —— "ゼロJS"という設計思想
Astroの最大の特長は、必要最低限のJavaScriptしか出力しないという設計思想です。Astroはこれを「ゼロJSデフォルト」と呼んでいます。
そもそもJavaScriptとは、ページに動きやインタラクションを加えるためのプログラミング言語です。メニューの開閉、スライダー、アニメーションなど、多くの場面で使われています。しかし、JavaScriptはブラウザがダウンロードして解析・実行する必要があるため、多用するほどページの表示が遅くなります。
多くのフレームワーク（ReactやNext.jsなど）は、ページ表示のためにある程度のJavaScriptを必要とします。一方、Astroは「動きが必要ない部分にはJavaScriptを一切使わない」というアプローチを取ります。スライダーやハンバーガーメニューなど、本当にJavaScriptが必要な部分にだけ、ピンポイントで読み込む仕組みです。
結果として、ページの表示が非常に速くなります。これは単にユーザーの快適さだけでなく、ビジネス上も重要な意味を持ちます。
・ユーザー体験の向上
表示が遅いページは、ユーザーが離脱する大きな原因になります。Googleの調査では、表示に3秒以上かかるとモバイルユーザーの53%が離脱するとされています。
・SEOへの好影響
Googleは検索順位の指標としてCore Web Vitals（表示速度やインタラクション性能に関する評価指標）を採用しています。ページの表示速度が速いほど、検索結果で上位に表示されやすくなります。
・コンバージョン率の改善
ECサイトやLPでは、表示速度が0.1秒改善するだけでコンバージョン率が向上するというデータもあります。
2. デザインの一貫性を保ちやすい
ボタン、カード、見出し、フォームなどのUI要素を「部品」として定義・管理するため、サイト全体でデザインのブレが生じにくくなります。
これはデザイナーの方にとっても大きなメリットです。Figmaで丁寧にデザインシステムを組んでも、実装の段階で微妙なずれが生じることがあります。「このページだけボタンの角丸が違う」「余白がページによってバラバラ」「同じ見出しなのにフォントサイズが微妙に違う」——こうした、制作過程で生まれがちなデザインの不整合を、コンポーネントという仕組みで構造的に防ぐことができます。
また、デザインの変更があった際も効率的です。たとえば「サイト全体のボタンの色を青から緑に変更したい」という要望があった場合、ボタンのコンポーネントを1つ修正するだけで、サイト全体に反映されます。従来の方法では、サイト内のすべてのボタンを手作業で探して修正する必要がありました。
3. 特別なサーバー環境が不要
Astroで書いたコードは、最終的に通常のHTML・CSS・JavaScriptファイルとして出力されます。この工程を「ビルド」と呼びます。
ビルドされた成果物は、普通の静的ファイルです。つまり、サーバーに特別なソフトウェア（Node.jsやPHPなど）をインストールする必要がなく、従来と同じ静的なホスティング環境でそのまま公開できます。
これは、制作を依頼されるお客様にとって重要なポイントです。
・既存のサーバーをそのまま使える — 新しいサーバーの契約や設定変更が不要です
・ランニングコストが増えない — 特別なサーバー環境を維持するための追加費用が発生しません
・セキュリティリスクが低い — サーバー側でプログラムが動作しないため、攻撃対象が少なくなります
・サーバー移転も容易 — 静的ファイルなので、ホスティング先の変更も比較的スムーズです
お客様側のサーバー要件を増やさずに、制作側の効率と品質を上げられる。この点は、お客様へのご提案時にもメリットとしてお伝えしています。
4. HTMLの知識がそのまま活かせる
Astroのコンポーネントファイル（.astro）の中では、HTMLの構文がそのまま使われています。
ReactやVueといった他のフレームワークでは、JSXや独自のテンプレート構文といった新しい書き方を覚える必要があります。これは強力な機能を提供してくれる反面、学習コストが高く、HTML/CSSの経験があるコーダーやデザイナーにとってはハードルになることがあります。
一方、Astroの場合はHTMLを知っている人なら、ほぼそのまま読めるコードになっています。新しいメンバーがプロジェクトに加わったときや、制作会社間で引き継ぎが発生したときにも、コードの理解にかかる時間が短くて済みます。
「HTMLを書いていない」の真意
冒頭の「HTMLを書いていない」という発言に戻ります。
正確には、「HTMLを直接手打ちする工程が減った」 ということです。Astroの中ではHTMLの構文をそのまま使って書いています。ただし、それを部品化・自動化の仕組みの上で書いているため、「生のHTMLファイルを1枚ずつ手作業で作る」という従来のやり方はしなくなりました。
たとえるなら、手紙を書く技術そのものは変わっていないのに、書き方が変わったようなものです。以前は便箋に1枚ずつ手書きしていたのが、今はパソコンで文面を作り、宛名だけ差し替えて印刷している——手紙を「書く」能力は同じどころか、レイアウトや書式の知識はむしろ増えています。
HTMLの知識は今まで以上に活用しています。セマンティクス（意味的に正しいHTMLの構造）、アクセシビリティ（すべての人が使いやすいWebの設計）、パフォーマンス（表示速度の最適化）——これらはAstroを使うことでより意識するようになった領域です。ツールが進化したことで、HTMLの本質的な部分に集中できるようになったとも言えます。
どんなサイトに向いているのか
Astroが特に力を発揮するのは、以下のようなサイトです。
・コーポレートサイト — 会社情報や事業紹介など、情報を正確に届けることが目的のサイト。ページ数が多くなっても、コンポーネント管理で保守性が保たれます。
・LP（ランディングページ） — キャンペーンや商品紹介など、表示速度が成果に直結するページ。Astroの「ゼロJSデフォルト」が威力を発揮します。
・メディアサイト・ブログ — 記事コンテンツを中心としたサイト。AstroにはMarkdown（マークダウン：シンプルな記法でコンテンツを書ける形式）のサポートが組み込まれており、記事の管理が効率的です。
・採用サイト — ブランディングと情報設計の両立が求められるサイト。ビジュアルの表現力と表示速度を両立できます。
・多言語サイト — コンテンツの構造を部品化しておくことで、言語ごとの展開が効率的に行えます。
逆に、あまり向いていないケース
Webアプリケーションのようにユーザー操作が多く、画面がリアルタイムに変化するサービスには、別のフレームワークが適しています。たとえば、チャットツール、プロジェクト管理ツール、ダッシュボード型のサービスなどは、ReactやVueのようなフレームワークの方が得意な領域です。
重要なのは、すべてのプロジェクトに万能なフレームワークは存在しないということです。弊社では、プロジェクトの目的や要件に応じて最適な技術を選定しています。
ディレクター・デザイナーの方へ ―― 制作を依頼する立場から見たメリット
技術的な話が続きましたが、ここからは制作を依頼する側・プロジェクトを進行する側の目線で、Astroを使った制作のメリットを整理します。
修正・更新のスピードが上がる
「ヘッダーのロゴを差し替えたい」「フッターの電話番号を変更したい」——こうした全ページに共通する修正は、コンポーネント管理によって短時間で完了します。従来は「全ページ確認して修正」だった作業が「1ファイル修正」に変わるため、修正依頼から反映までのリードタイムが大幅に短縮されます。
デザインの意図が正確に再現される
Figmaでデザインした通りの余白、フォントサイズ、色が、コンポーネントとして定義されるため、ページによってデザインがブレるリスクが減ります。 デザインレビューの指摘事項が減り、修正のやりとりが効率化されます。
表示速度をクライアントへの提案材料にできる
「Astroで制作することで、表示速度が最適化され、Core Web Vitalsのスコア改善が見込めます」——これは、提案や見積もりの場面で具体的な付加価値として伝えることができるポイントです。
将来の拡張や引き継ぎがしやすい
部品化されたコードは構造が明確なため、別の制作者やチームが引き継ぐ際のコストが低いというメリットがあります。制作会社の変更やチーム体制の変化があっても、コードの可読性が高いため混乱が少なくなります。
まとめ
・弊社は、LPで培ったコンバージョン改善のノウハウを軸に、LPから中規模サイトまで「CV改善のためのサイト制作」を手がけている
・Astroは「コンテンツを届けるWebサイト」に最適化された新しいフレームワーク
・HTMLを「書かなくなった」のではなく、「より効率的に、より安全に書けるようになった」
・表示速度に優れ、Googleの評価指標であるCore Web Vitalsの改善に貢献する
・コンポーネント管理により、デザインの一貫性と保守性が向上する
・最終成果物は通常のHTML/CSS/JSなので、お客様側に特別なサーバー要件を求めない
・修正のスピード・デザインの再現性・将来の拡張性において、制作を依頼する側にも大きなメリットがある
弊社では、こうしたツールの選定も含めて「お客様にとって最適な制作体制」を常に模索しています。
技術は日々進化していますが、その本質は変わりません——届けたい情報を、正確に、速く、美しく届け、成果（CV）につなげること。 Astroは、その目的を達成するための強力な選択肢の一つです。
WebサイトやLPの制作・リニューアルをご検討中の方は、ぜひお気軽にご相談ください。
