8/19開始：無料オンラインで学ぶサイト制作基礎

実践的な手順を順に追って学ぶ、4回連続のオンラインセミナー

株式会社クリーク･アンド･リバー社（C&R社）は、2026年8月から9月にかけて、Webデザイナーやコーダー、専門学校で学ぶ学生を対象とした無料オンラインセミナー「デモンストレーションを見ながら学ぶサイト制作の基礎 2026年度版（全4回）」を開催します。いずれもオンライン開催で、各回は実際のデモを見ながら、HTML/CSSを中心とした実装手順と設計意図を順に学べる構成です。

本セミナーは、1つのWebサイトを頭から作っていく流れに合わせて、header → ヒーローイメージ → アニメーション → モーダル・ループ → アコーディオン → footerと段階的に学べるため、個別のテクニックだけでなく、ページ全体の構成理解やデザインとコーディングの関係性を深めることができます。参加費は無料、定員は60名です。

開催スケジュールと参加方法のポイント

セミナーは全4回で、各回とも19:00から20:00の1時間開催です。各回の開催日は以下のとおりです。

• 第1回：2026年8月19日（水）19:00〜20:00 — 「headerとヒーローイメージを作成してみる」
• 第2回：2026年9月2日（水）19:00〜20:00 — 「FadeInアニメーションを利用してコンテンツを表現してみる」
• 第3回：2026年9月16日（水）19:00〜20:00 — 「モーダルウィンドウとループを使用してコンテンツを表現してみる」
• 第4回：2026年9月30日（水）19:00〜20:00 — 「アコーディオンとfooterを作成してみる」

開催はすべてオンラインです。参加申し込みや詳細はクリーク･アンド･リバー社のイベントページにて案内されています。申し込みページのURLは、詳細・お申し込みはこちらです。

また、制作するWebサイトのイメージや過去のデモの参考動画も公開されています。視聴を通じて、どのような実装を学べるか事前に確認できます（例：https://www.youtube.com/watch?v=PXCMrJu9CJg）。

カリキュラム詳細：各回の学習ポイントとデモの内容

各回はデモンストレーション形式で進行し、デザイン意図と実装手順を具体的に示します。各パートではHTML/CSSの構造やスタイルのつくり方、スクロールや表示切替などのインタラクション表現を、コードの読み方と合わせて解説します。

対象レベルとしては、基本的なHTML/CSSの理解と、jQueryの使い方の基礎を有している方が想定されています。既に基礎を習得している方向けに、より実践的な制作手順や実装の考え方を補強する内容です。

第1回〜第4回の具体的な内容

以下は各回で扱う項目と、実際に参照できるデモや解説動画のリンクです。それぞれの回で扱う「何を学ぶか」「どのように実装するか」を明確に示します。

1. 第1回：「headerとヒーローイメージを作成してみる」

   主な学習ポイントはヘッダーの役割と基本構造、ヒーローイメージのデザインポイントです。ヘッダーはナビゲーションやサイトの導線を決める重要な要素で、マークアップとレスポンシブ対応の基本をデモで解説します。

   実装面ではHTML/CSSを使った具体的なマークアップとスタイル設定をライブで示します。参考動画：https://youtu.be/7JkLO2DE_N4?si=_ZdbKlH4YBhAMhLj

2. 第2回：「FadeInアニメーションを利用してコンテンツを表現してみる」

   この回では、FadeInアニメーションの基礎構造と仕組みを学びます。スクロール連動アニメーションをCSSのみで実装する手法を中心に、自然な表示制御やパフォーマンス配慮についても触れます。

   CSSトランジションやスクロールトリガーの考え方を、デモを通じて段階的に説明します。参考動画：https://youtu.be/U-beWwb3bpc?si=K4UYWKNbX3-popMG

3. 第3回：「モーダルウィンドウとループを使用してコンテンツを表現してみる」

   モーダルウィンドウの基本構造、ユーザーからの操作に対する表示制御、そしてコンテンツのループ処理（スライドや連続表示）を、HTMLとCSSのみでどこまで実装できるかを解説します。

   アクセシビリティやキーボード操作、表示の戻し方など注意点も含めて説明します。参考動画：https://youtu.be/PXCMrJu9CJg?si=kK2oX9FJMnHcspyY

4. 第4回：「アコーディオンとfooterを作成してみる」

   アコーディオンの開閉動作とfooter内のデザイン要素を、HTMLとCSSのみで実装する手法に焦点を当てます。コンテンツの見せ方、情報の優先順位づけ、そしてフッターに求められる要素配置の考え方を示します。

   ページの締めくくりとしてのフッター設計と、実用的なアコーディオン構築を合わせて学べる構成です。参考動画：https://youtu.be/ez98HX1-cOU?si=Hkbt8Tma4jhyAoba

登壇者情報、対象者、参加条件・申し込みに関する詳細

本セミナーの登壇者は「祐」-たすく-代表取締役であり、Web・Officeインストラクター／Webディレクターとして活動する塚田大祐（つかだ・だいすけ）氏です。塚田氏は専門学校での教職経験や独立後の制作・講師活動を通じ、教育と実務の両面で豊富な実績を有しています。

塚田氏の経歴には、DTPによる印刷物制作や専門学校の担任教員、大学・専門学校での非常勤講師、企業研修の講師などが含まれます。『マックでマンガ』（共著）での執筆や、Mac検定関連の問題作成にも関与してきた人物です。

参加対象と募集情報、問い合わせ先

対象は主に以下のとおりです。基本的なHTML/CSSの理解とjQueryの基礎がある方が前提となります。

• Webデザイナー、コーダー
• 専門学校やスクールでWeb制作を学んでいる方

参加費は無料、定員は60名です。申し込みは先着等の案内がされる可能性があるため、詳細ページからの手続きが必要です。セミナーに関するお問い合わせは以下の窓口で受け付けています。

主催

株式会社クリーク･アンド･リバー社（PEC事務局「サイト制作の基礎」セミナー担当）

問い合わせメール

pec_seminar@pr.cri.co.jp

参加費

無料

定員

60名

PECスタ、関連サービスとクリーク･アンド･リバー社の紹介

本セミナーはC&R社の教育部門であるPEC（Professional Education Center）による企画の一環です。PECはウェビナーのアーカイブや研修コンテンツを蓄積しており、法人向けのオンライン研修サービス「PECスタ」を開始しています。

「PECスタ」はPECが企画・開催したウェビナー550本以上のアーカイブを法人向けにパッケージ化したサービスで、IT・デジタル・クリエイティブ領域を中心に、デザイン、プログラミング、AIなどの最新トピックを網羅するコンテンツを提供しています。研修やリスキリング、教育訓練に活用できる点が特徴です。

関連リンクと追加リソース

セミナーや関連サービスの詳細は下記リンクから確認できます。CREATIVE VILLAGEや各種SNS、企業サイトにて情報発信が行われています。

• セミナー詳細・申込ページ（Creative Village）
• PECスタ サービス詳細
• 関連プレスリリース（C&R社）
• CREATIVE VILLAGE（サイト）：https://www.creativevillage.ne.jp/
• アプリ（iOS）：https://apple.co/3qLDNbT ／（Android）：https://bit.ly/3dkO2AS
• C&R社サイト：https://www.cri.co.jp/ ／ YouTube：https://www.youtube.com/channel/UCS9MHzddqWKsOAgmUnTgxIg

なお、C&R社は1990年創設以来、クリエイターのキャリア支援や各種研修を通じて、プロフェッショナルの生涯価値向上を目指して活動してきました。事業領域は映像、ゲーム、Web、広告・出版、作家、舞台芸術、建築、AI/DX、アスリート分野など多岐にわたります。

この記事の要点を表で整理

以下の表は、本セミナーに関する重要事項を整理したものです。日程、開催方法、参加条件、申込先、問い合わせ先などをまとめていますので、参加検討時の確認にご利用ください。

本記事ではセミナーの開催概要、各回のカリキュラム、登壇者情報、申込・問い合わせ先、ならびに関連サービス情報を漏れなく整理しました。参加を検討する際は、上記の開催日や申し込みページ、問い合わせメールアドレスを参照してください。