リーク･アンド･リバー社（C&R社）では、2026年10月6日（火）から全4回で「Astroで学ぶモダンWeb制作入門 TypeScript・コンポーネント・静的サイト生成の基礎」を実施します。
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以降）の基本的な文法を理解していることを前提とします。
・TypeScriptについては講座内で必要な範囲を解説しますが、JavaScriptの基礎知識があることを前提としています。
・学習内容は2026年9月時点のAstroの仕様に基づいています。今後のアップデートにより画面や機能が変更される場合があります。
・アーカイブの配信はございませんので予めご了承ください。
↓ハンズオン形式で実施します。実習には以下の環境が必要となります。
・Visual Studio Code（最新版推奨）
・Node.js LTS版
・Google Chrome
・インターネット接続環境
※受講に必要な環境については、事前にご案内いたします。
▼このような方におすすめ
- HTML・CSS・JavaScriptの基礎知識を活かして次のステップに進みたい方
- Webサイト制作の効率化や保守性向上に興味がある方
- コンポーネントベースの開発手法を学びたい方
- Astroや静的サイト生成（SSG）に興味がある方
- ブログや企業サイト、ポートフォリオサイトを構築したい方
- フロントエンド開発の最新動向に触れたい方
開催概要
| 開催日時 |
2026年10月06日（火）19:00〜21:00 2026年10月13日（火）19:00〜21:00 2026年10月20日（火）19:00〜21:00 2026年10月27日（火）19:00〜21:00 |
|---|---|
| 開催形式 | オンライン開催 |
| 登壇者 |
関口 和真（せきぐち・かずま）氏
株式会社コムセント 取締役 CTO |
| 参加費 | 無料 |
| 定員 | 60名 |
| 主催 | 株式会社クリーク･アンド･リバー社 |
| 応募締め切り | 2026年10月27日(火) 21:00 |
登壇者
取締役 CTO
関口 和真（せきぐち・かずま）氏
サイトデザイン、HTMLのコーディング、JavaScript・PHP等を利用したプログラム開発、iOS・Android向けアプリの作成、ウェブサーバーの実装、運用などトータルでウェブサイトの作成を行う。テクノロジーを理解し、デザインやコーディング、サーバー運用やサービス運用のアドバイスをトータルで行える点が強み。
株式会社コムセント(Web制作会社)のCTOとしてWebサイト作成、システム開発及びプログラム開発に従事。ECサイトのカスタマイズ、フルスクラッチによるWebシステム開発、映像配信システムや映像配信、配信用スマートフォンアプリ作成を主に手がける。
大学・専門学校にて、Web制作の授業を担当（非常勤）。イベントやセミナーの登壇経験も豊富。 Dreamweaver等の著書も。
▼関口 和真氏に研修や講師を依頼されたい企業の方はこちらからお問い合わせください。
関口 和真氏：研修サービスお問い合わせフォーム
▼発売中のEラーニング
社内クリエイター向け研修の企画・実施をお手伝いします！
クリエイター向けに展開しているオンライン講座コンテンツや、御社向けに開発するオリジナルカリキュラムに基づいて、対面／オンライン／オンデマンドにて研修をご提供します。
＞＞＞研修サービスのご案内
資料請求・お問い合わせはこちら>>
