Astroで学ぶモダンWeb制作入門（全4回）コンポーネント・静的サイト生成の基礎

＞＞詳細およびお申込は、当社Webサイトからご確認ください。

リーク･アンド･リバー社（C&R社）では、2026年10月6日（火）から全4回で「Astroで学ぶモダンWeb制作入門 コンポーネント・静的サイト生成の基礎」を実施します。

Web制作の現場では、表示速度、保守性、SEO対策を意識したサイト構築がますます重要になっています。

本ウェビナーでは、近年注目を集めているフロントエンドフレームワーク Astro を使いながら、モダンなWebサイト制作の基礎を全4回で学びます。

Astroは、HTML・CSS・JavaScriptの知識を活かしながら、コンポーネント化による効率的な開発やMarkdownによるコンテンツ管理を実現できるフレームワークです。また、静的サイト生成（SSG）により、高速で軽量なWebサイトを構築できることから、企業サイト、ブログ、ポートフォリオ、お知らせサイトなど幅広い用途で活用されています。

本講座では、Astroプロジェクトの立ち上げから始まり、コンポーネント設計、Markdownによるコンテンツ管理、JavaScriptを活用したインタラクティブな表現、サイトのビルドと公開までを段階的に学習します。

4回の講座を通して、小規模なWebサイトを実際に構築しながら、Astroを活用したモダンなWeb制作の流れを体系的に習得できます。

---

▼予定しているカリキュラム

第1回：Astroの基本とページ作成(10月6日（火）19:00-21:00)
～Astroの基本的な仕組みを理解し、シンプルなWebページを作成する～

• Astroとは何か、どのようなWebサイト制作に向いているかを学ぶ
• 静的サイト生成（SSG）の基本的な考え方を理解する
• Astroプロジェクトを作成し、基本的なディレクトリ構成を確認する
• .astroファイルの役割と、HTML・CSS・JavaScriptの基本的な書き方を学ぶ
• 複数ページを作成し、Astroでのルーティングの仕組みを理解する
• ヘッダーやフッターなどを共通レイアウトとしてまとめる

第2回：コンポーネントとデータ表示(10月13日（火）19:00-21:00)
～ページを部品化し、再利用しやすいWebサイトの作り方を学ぶ～

• Astroコンポーネントを使って、ページ内の要素を部品として分ける
• Propsを使い、コンポーネントへタイトルや料金などのデータを渡す
• JavaScriptの配列データから、複数のコンテンツを繰り返し表示する
• カードやナビゲーションなど、複数ページで利用できる部品を作成する
• コンポーネントを利用した、修正しやすく再利用しやすいサイト構成を学ぶ

第3回：Markdownとコンテンツ管理(10月20日（火）19:00-21:00)
～お知らせやブログなど、追加・更新されるコンテンツを管理する方法を学ぶ～

• Markdownを使って、文章中心のコンテンツを作成する
• frontmatterを使い、タイトルや日付などの記事情報を管理する
• Content Collectionsを利用し、複数の記事をまとめて扱う
• Markdownの記事から、お知らせ一覧ページを作成する
• 動的ルーティングを利用し、記事ごとの詳細ページを生成する
• ページタイトルやdescriptionなど、基本的なSEO設定を行う

第4回：JavaScript・画像・ビルド(10月27日（火）19:00-21:00)
～Webサイトに必要な動きを加え、公開できる状態まで仕上げる～

• AstroでJavaScriptを利用し、必要な部分だけに動きを加える
• アコーディオンなど、シンプルなインタラクティブUIを作成する
• Astroの画像機能を利用し、画像を効率よく扱う
• これまで作成したページやコンポーネントを組み合わせ、サイト全体を仕上げる
• npm run buildを実行し、公開用の静的ファイルを生成する
• distディレクトリを確認し、Webサイトを公開する基本的な流れを理解する

※適時休憩をはさみます。
※講義内容は予定です。当日の受講者の進捗等によって変更になる場合があります。

▼お申込み前にご確認ください

※当オンライン講座の対象・レベル・環境などの注意点です。ご確認の上お申し込みください。

・HTML、CSSの基本的な知識がある方を対象としています。
・JavaScript（ES6以降）の基本的な文法を理解していることを前提とします。
・学習内容は2026年9月時点のAstroの仕様に基づいています。今後のアップデートにより画面や機能が変更される場合があります。
・アーカイブの配信はございませんので予めご了承ください。
↓ハンズオン形式で実施します。実習には以下の環境が必要となります。
・Visual Studio Code（最新版推奨）
・Node.js LTS版
・Google Chrome
・インターネット接続環境
※受講に必要な環境については、事前にご案内いたします。

▼このような方におすすめ

• HTML・CSS・JavaScriptの基礎知識を活かして次のステップに進みたい方
• Webサイト制作の効率化や保守性向上に興味がある方
• コンポーネントベースの開発手法を学びたい方
• Astroや静的サイト生成（SSG）に興味がある方
• ブログや企業サイト、ポートフォリオサイトを構築したい方
• フロントエンド開発の最新動向に触れたい方

登壇者

関口 和真（せきぐち・かずま）氏

株式会社コムセント
取締役 CTO

サイトデザイン、HTMLのコーディング、JavaScript・PHP等を利用したプログラム開発、iOS・Android向けアプリの作成、ウェブサーバーの実装、運用などトータルでウェブサイトの作成を行う。テクノロジーを理解し、デザインやコーディング、サーバー運用やサービス運用のアドバイスをトータルで行える点が強み。
株式会社コムセント(Web制作会社)のCTOとしてWebサイト作成、システム開発及びプログラム開発に従事。ECサイトのカスタマイズ、フルスクラッチによるWebシステム開発、映像配信システムや映像配信、配信用スマートフォンアプリ作成を主に手がける。
大学・専門学校にて、Web制作の授業を担当（非常勤）。イベントやセミナーの登壇経験も豊富。 Dreamweaver等の著書も。

参加費

無料

お申込み

こちらのサイトからお申込みください。

▼お申込締切：2026年10月27日（火）21:00

---

▼C&R社で実施しているオンライン講座・ウェビナー　一覧ページ
https://www.c-place.ne.jp/