Webぜんぶ、1校で。

初級で扱わなかった HTML/CSS の応用テクニックで、人に見せて自慢できる1ページへ。

CSSアニメーション・position・transform・scroll-driven animation・clip-path・backdrop-filter。初級で1ページが作れたあなたが、表現の幅を広げる30日。結果として、ポートフォリオに堂々と載せられる作品が完成します。
JavaScript は中級コース(次月)から扱います。本番公開も中級で。

  • CSSアニメーション
  • position / transform
  • scroll-driven animation
+AIで上質に
動画背景の1ページ
サンプル映え
違約金なし/いつでも解約OK
SCROLL

GOAL

30日後の到達点

受講者が AIプロンプトを使って実際に作る 完成形です。プロンプトは自分の業種・屋号に書き換えて再実行すれば、同じ品質のコードが生成されます。
「Yoga Studio Lumi」を題材に、初級コースで作る1ページの完成形をご確認ください。

/samples/curriculum-design-applied-sample/
初級サンプル:Yoga Studio Lumi マウスを乗せて全体を見る / クリックで実物
🎨 本講座 / 2ヶ月目:初級 +AI

柔らかく上質な
1ページサイト

同じ業種・同じ情報でも、CSS と写真・動画の力で「人に見せて自慢できる」レベルへ。LP に載せられる品質のポートフォリオに。

  • 動画背景+白半透明オーバーレイ
  • ✓ セリフ書体(Shippori Mincho × Cormorant)
  • ✓ scroll-driven animation(CSSのみ)
  • ✓ AI上質版プロンプトで業種別に再現可能
実物を新しいタブで見る →

※ 上記は AIプロンプト(ChatGPT・Claude・Gemini いずれでも動作確認済)で生成→講師が微調整した完成形。
受講者は同じプロンプトを自分の業種で実行すれば、同等の品質が再現できます
4レベル全ての到達点比較は トップページ から。

CURRICULUM

初級コースで学べるモジュール

初級で扱わなかった HTML/CSS の応用テクニックを6モジュール。結果としてポートフォリオに載せられる作品が完成します。

1️⃣
MODULE 01

CSSアニメーション応用

@keyframes / transition / animation-delay / ease-curve。fadeIn・slideUp・スクロールに合わせた演出を組み立てる。

  • @keyframes 設計
  • transition のタイミング関数
  • 連続アニメーション(delay)
2️⃣
MODULE 02

position と transform を使いこなす

relative / absolute / fixed / sticky の使い分け。transform: translate / scale / rotate で要素を自由に動かす。

  • positionの4種類の使い分け
  • transform で軽量に動かす
  • 固定ヘッダー・追従ナビ
3️⃣
MODULE 03

scroll-driven animation

CSSのみでスクロールに合わせた演出を実装。JSなしでパララックス・要素のフェードインなどを作る最新CSS技法。

  • animation-timeline: view()
  • animation-range
  • パララックス効果
4️⃣
MODULE 04

CSS Grid 応用・clip-path・backdrop-filter

複雑なレイアウトに CSS Grid。clip-path で要素を切り抜き、backdrop-filter でガラスモーフィズム。「凝った見た目」の引き出しを増やす

  • CSS Grid(grid-template-areas)
  • clip-path で形状変形
  • backdrop-filter でガラス効果
5️⃣
MODULE 05

動画背景・写真の見せ方

video タグでヒーロー動画背景+オーバーレイ。picture / srcset で WebP fallback + Retina対応。ヨガサンプルの世界観を作る

  • video 背景の実装
  • picture / srcset
  • filter(grayscale, blur)
6️⃣
MODULE 06

AI上質版プロンプトで仕上げる

講師が用意した AI上質版プロンプト を自分の業種で実行。出力されたコードを自分で読んで微調整し、ポートフォリオに載せられる作品に。

  • 上質版プロンプトの構造
  • 業種・トーンのカスタマイズ
  • 生成コードの仕上げ

関連領域も同じ月¥10,000で見放題:Webサイト 入門(前提) / Webサイト 中級(次月)

STRENGTH

ONECLICで学ぶ理由
🎨
STRENGTH 01

「派手」ではなく「上質」を学べる

単に動かす・色を増やす・装飾を盛る、ではなく、余白・タイポ・色数を抑える「上質さ」の作り方を学びます。AIで暴走しがちな"派手"を制御する判断力が身につきます。

📦
STRENGTH 02

サンプルがそのままポートフォリオに

30日後の成果物は、自分の業種に合わせた1ページサイト。営業資料・ポートフォリオ・LP掲載素材として、即戦力で活用できます。

🤖
STRENGTH 03

AI上質版プロンプトを提供

講師が現場で磨き込んだ AI上質版プロンプト を共有。ChatGPT・Claude・Gemini いずれでも動作確認済み。自分の業種で再実行すれば同等の品質が再現できます。

📦
STRENGTH 04

月¥10,000で、Webぜんぶ。

月¥10,000の単一プランで、全16領域×3レベルが見放題。入会金なし/最低契約期間なし/いつでも解約OK・違約金なし

PLAN

月額¥10,000の単一プランで、Webぜんぶ学び放題

プラン選定の迷いはゼロ。入会金なし/最低契約期間なし/いつでも解約OK。価格はすべて税込表示です。

🚀
月額プラン / 全領域・全レベル見放題

月額 ¥10,000(税込)

プログラミングもサイト制作も SNS もマーケも、Webぜんぶがこの1プランに。週1回90分のライブ講座(月4回)+全動画見放題+Discordコミュニティで、詰まらずに進められます。

  • 週1回90分のライブ講座(月4回)
  • 講座動画アーカイブ視聴
  • 受講者専用 Discord コミュニティへの参加
受講を申し込む

Stripe決済 → Discord招待まで最短5分/気になる点はお問い合わせ

RECOMMEND

こんな方におすすめ
📈

初級卒業者・基礎ができる方

初級を終えた方/HTML/CSS の基礎は独学で身につけた方。次のステップとして表現の幅を広げたい方。

🎨

デザイナー志望・デザイン強化したい方

コーディングはできるがデザインに自信がない方。サンプル映えする見栄えのコードを書きたい方。

📦

ポートフォリオを強化したい方

就職・転職活動中の方。書類で見栄えする1ページサイトを作品集として用意したい方。

🏢

個人事業主・店舗オーナー

自社サイトを自分で運営しているが、もう一段見栄えを上げたい方。営業資料に載せられるサイトに育てたい方。

🤖

AI活用を仕事に活かしたい方

「AIで作れる」ことは知っているが、結果が暴走するか、無難すぎる方。講師の上質版プロンプトで「使いこなす」を身につけたい方。

💼

副業・フリーランス志望

LP制作の単価を上げたい方。「シンプルな1ページ」だけでなく「上質な1ページ」まで提供できるようになりたい方。

FAQ

よくあるご質問
初級を受講していなくても大丈夫?

HTML/CSS の基礎(Flexbox・基本セレクタ・色/タイポ・margin/padding)が分かれば大丈夫です。初級アーカイブも見放題なので、並走しながら進めることもできます。

JavaScript も学べますか?

このコースでは JavaScript は扱いません。CSS のみで表現の幅を広げるのがゴールです。JS は中級コース(次月)で学びます。

本番公開はどのタイミング?

このコースではローカル完成までです。本番公開(独自ドメイン・FTP・SSL)は 中級コース(次月) で扱います。

料金はいくらですか?追加費用はありますか?

月額¥10,000(税込)の単一プランのみです。入会金・最低契約期間・違約金はありません。全16領域×3レベルの動画講座、週1回90分のライブ講座(月4回)、Discordコミュニティ参加まで全て月額に含まれます。

解約はいつでもできますか?違約金はありますか?

Stripe のお客様ポータルから、ご自身でいつでも解約できます。違約金や最低契約期間はありません。必要な月だけの受講もOKです。

AIのプロンプトは公開されますか?

はい、講座内で AI上質版プロンプトの全文を公開+解説します。ChatGPT・Claude・Gemini いずれでも動作確認済みで、自分の業種に書き換えて再実行できます。