無料個別相談
ホームページ制作専門コース

未経験から学べる、
6ステージ・全32カリキュラム

ホームページ（HP）制作専門スクールとして、企画から公開・運用までを一つの流れで学びます。学ぶ順番は「まずはつくってみる」から。Webサイトが生まれてから運用されるまでを、未経験の方がつまずかない順番で並べています。卒業はありません。各カリキュラムを制作の中で繰り返し使い、完成後も学び直していきます。

  • 6ステージ
  • 32カリキュラム
  • 687学習項目
  • 期限なし制作後も質問可
How to read

学ぶ順番と、
仕事の順番は違います。

カリキュラムは「学びやすい順」に、総合制作は「仕事の順」に並んでいます。各カリキュラムには、到達するレベルと合格基準を示しています。

  • FOUNDATION理解して説明できる
  • PRACTICAL自分で実装・実践できる
  • PRODUCTION仕事で使えるレベルまで
  • SPECIALTY発展・選択の領域

評価のしかた：提出物を、講師が合格基準に沿ってレビューします。課題ごとの基準を満たした時点で、その課題の合格です。満たしていない項目は、指摘をもとに直して再提出します。合格後も、制作で必要になった内容は学び直します。

学ぶ順番

まずつくれるようになることから。HTML・CSS・JavaScriptなどの技術を身につけてから、企画・営業・ディレクションへ進みます。

仕事の順番（総合制作）

実際の仕事は営業・ヒアリング・企画から始まります。総合制作では、この順番どおりに、38工程を進めます。

Keep learning

学び続けることを、
受講の前提に。

0→1には卒業がありません。決まった時間を学べば終わるコースではなく、制作のたびに課題を見つけ、調べ、試し、直しながら学び続けるスクールです。

必要なのは、学び続ける覚悟です。

Web制作に取り組む限り、知識や技術を更新していく姿勢が必要です。受講するだけで力が身につくとは考えていません。自分で手を動かし、分からないことを質問し、レビューを受けて修正することを続けてください。

仕事や生活に合わせてペースを調整しながら、学ぶ時間をつくります。中断したときも、状況に合わせて取り組む課題を見直し、学びへ戻ってこられるようにします。

687項目は、学ぶ内容を細かく分けた一覧です。687個の作品をつくる、あるいはすべてを同じ深さまで習得するという意味ではありません。

共通の学習：01〜31

FOUNDATIONは理解・説明、PRACTICALは自分で実践、PRODUCTIONは制作物の品質まで確認します。例えばセキュリティ・インフラの基礎と、HTML・CSSの制作課題では、求める到達点が異なります。

専門・発展の選択：32

Creative DevelopmentはSPECIALTYです。WebGL・3Dなどは発展領域として扱います。各技術をすべて盛り込むのではなく、作品の目的に必要な表現を検討します。

発展領域の合格基準を見る →

制作物と振り返りで、次の課題を決める

各段階で、何をつくり、何を説明できるようになったかを確認します。課題の合格は、その時点の理解と成果物を確かめる節目です。制作で新しい課題に出会ったら、基礎にも戻って学び直します。

学習の節目に、成果物と改善点を確かめる
段階成果物の例振り返ること
Stage 1：基礎・HTML・CSS・JavaScriptお知らせ一覧・記事ページ、レスポンシブLP構造や動きを説明し、表示・操作の問題を直せるか
Stage 2：情報設計・UIデザインサイトマップ、ワイヤーフレーム、デザイン利用者と目的に合わせて、情報と導線を見直せるか
Stage 3：フロントエンド・CMS・データ機能の実装、更新できるCMSサイト実装の意図を説明し、不具合を調べて修正できるか
Stage 4：品質確認・公開テスト結果、修正記録、公開手順品質を確認し、修正後にもう一度検証できるか
Stage 5：企画・ディレクション調査・企画、要件整理、提案根拠をもって提案し、変更に合わせて計画を直せるか
Stage 6：公開後の改善解析・SEO・運用の改善案公開後の状況を調べ、改善と検証を繰り返せるか
総合制作38工程の記録と公開を想定したサイト工程全体を振り返り、次の制作で学ぶ課題を見つけられるか

完成の先でも、学びを繰り返す

つくって確かめる

小さく実装し、実際の表示と操作を確認します。予想と違う結果も、次に調べる材料にします。

レビューを受けて直す

指摘の理由を理解し、自分で修正します。直した結果と判断の理由を記録し、次の制作に生かします。

次の課題に取り組む

作品の完成やアワード応募を節目に、改善点や新しく試す技術を決めます。制作後も質問・レビュー・面談を利用できます。

つまずいたら、課題を小さくして再提出。

試したこと、分からない箇所、表示結果を添えて質問します。講師の指摘をもとに修正し、合格基準に照らして再提出。文章で伝えにくい場合は、日時を調整して面談できます。

課題・レビュー・修正の流れを体験する → ／ 質問・面談の条件を確認する

1

Stage 1まずは、つくってみる

最初は、手を動かしてWebページをつくるところから。Webの仕組みと、HTML・CSS・JavaScript・Gitの基礎を身につけ、「つくれる」実感をつかみます。

01Web制作・デジタルビジネス基礎FOUNDATION

Web制作を単なるデザインやコーディングとしてではなく、ビジネスとして理解します。

なぜ学ぶ？誰が、何のために、どんなWebサイトをつくっているのか。全体像を知らないと、学ぶ順番も目指す職種も決められません。

学習内容を見る閉じる26項目

SYLLABUSWeb制作・デジタルビジネス基礎

合格基準

  • Webサイトが作られるまでの流れと、関わる職種を説明できる
  • 案件の種類（コーポレート・LP・ECなど）ごとに、目的の違いを説明できる

提出物：Web業界の地図（職種と案件の種類の整理）

  • Webサイトが作られるまで
  • Web制作会社の仕組み
  • クライアントワーク
  • BtoB / BtoC
  • コーポレートサイト
  • ブランドサイト
  • 採用サイト
  • ECサイト
  • LP
  • Webサービス
  • Webアプリケーション
  • オウンドメディア
  • CMS
  • SaaS
  • 制作会社・代理店・事業会社の違い
  • ディレクター
  • PM
  • プランナー
  • UX Designer
  • UI Designer
  • Web Designer
  • Frontend Engineer
  • Backend Engineer
  • Creative Developer
  • DevOps Engineer
  • QA Engineer

02Semantic HTMLPRODUCTION

CSSやJavaScript以前に、正しいWeb文書を作る能力を身につけます。

なぜ学ぶ？HTMLは、検索エンジンや音声読み上げにも正しく伝わる「文書」の土台です。ここが崩れていると、その上のすべてが崩れます。

学習内容を見る閉じる29項目

SYLLABUSSemantic HTML

合格基準

  • 見出し構造とランドマークを、正しく設計できる
  • ボタンとリンクを使い分け、キーボードだけで操作できるページを書ける

提出物：お知らせ一覧と記事ページのマークアップ

  • HTML Living Standard
  • Semantic HTML
  • heading構造
  • landmarks
  • header
  • main
  • nav
  • section
  • article
  • aside
  • footer
  • list
  • table
  • form
  • button
  • link
  • picture
  • source
  • video
  • audio
  • dialog
  • details / summary
  • popover
  • Metadata
  • OGP
  • Structured Data
  • JSON-LD
  • SEO
  • Progressive Enhancement

03Modern CSSPRODUCTION

CSSを「装飾」ではなくUIエンジンとして学びます。

なぜ学ぶ？現代のCSSは、レイアウトやアニメーションまで担うUIの中核です。正しく理解すれば、少ないコードで壊れにくいUIがつくれます。

学習内容を見る閉じる42項目

SYLLABUSModern CSS

合格基準

  • 320pxから大きな画面まで、崩れないレイアウトを組める
  • Grid・Flexbox・コンテナクエリを、目的に応じて使い分けられる

提出物：3つの画面幅に対応したランディングページ

基礎

  • Cascade
  • Specificity
  • Inheritance
  • Box Model
  • Formatting Context
  • Positioning
  • Stacking Context
  • z-index

Layout

  • Flexbox
  • Grid
  • Subgrid
  • Multi-column
  • Logical Properties

Modern CSS

  • CSS Custom Properties
  • Cascade Layers
  • Nesting
  • Container Queries
  • Style Queries
  • Scroll State Queries
  • :has()
  • :is()
  • :where()
  • :not()
  • :focus-visible
  • :focus-within
  • CSS Functions
  • CSS Math
  • clamp()
  • min()
  • max()
  • CSS Variables
  • Color Functions
  • color-mix()
  • Modern Color Spaces
  • oklch()

Animation

  • Transition
  • Transform
  • Keyframes
  • Scroll Snap
  • Scroll Driven Animation
  • View Timeline
  • View Transition API

04JavaScriptPRACTICAL

WebをインタラクティブにするためのJavaScriptを基礎から学びます。

なぜ学ぶ？入力に応じた処理やデータの取得など、HTMLやCSSだけでは扱えない機能をJavaScriptで実装します。

学習内容を見る閉じる24項目

SYLLABUSJavaScript

合格基準

  • DOM操作とイベント処理で、メニューやタブなどのUIを実装できる
  • 非同期処理でデータを取得し、画面に表示できる

提出物：メニュー・タブ・モーダルのUI部品

  • Variables
  • Functions
  • Array
  • Object
  • Class
  • Scope
  • Closure
  • Modules
  • DOM
  • Event
  • Form
  • Validation
  • Fetch
  • REST API
  • Promise
  • async / await
  • JSON
  • Storage
  • IntersectionObserver
  • ResizeObserver
  • MutationObserver
  • Web APIs
  • Error Handling
  • Debugging

05Git / Development WorkflowPRODUCTION

実務の制作環境を学びます。

なぜ学ぶ？チームでの開発、変更履歴の管理、コードレビューはGitで行います。現場で働くための共通言語です。

学習内容を見る閉じる17項目

SYLLABUSGit / Development Workflow

合格基準

  • ブランチを切り、意味のある単位でコミットできる
  • プルリクエストを作り、レビューを受けて修正できる

提出物：レビューを受けて修正したプルリクエスト

  • Terminal
  • CLI
  • Git
  • Remote Repository
  • Repository
  • Commit
  • Branch
  • Merge
  • Rebase
  • Pull Request
  • Code Review
  • Conflict
  • Git Flow
  • Feature Branch Flow
  • Issue
  • Release
  • Semantic Versioning
2

Stage 2伝わるデザインを学ぶ

見た目を整えるだけでなく、情報が伝わり、迷わず使える画面を設計します。スマホから大画面まで、あらゆる画面で成立させます。

06UX / IAPRACTICAL

情報を「見つけられる・理解できる・操作できる」構造へ設計します。

なぜ学ぶ？どんなに美しいデザインでも、情報が見つからなければ使われません。見た目の前に、構造と導線を設計します。

学習内容を見る閉じる21項目

SYLLABUSUX / IA

合格基準

  • ペルソナと利用者の行動から、サイトマップを設計できる
  • 情報の優先順位を、ワイヤーフレームで説明できる

提出物：ペルソナ・サイトマップ・ワイヤーフレーム

  • UX Design
  • User Flow
  • Task Flow
  • Customer Journey
  • Information Architecture
  • サイトマップ
  • コンテンツ階層
  • ナビゲーション
  • Breadcrumb
  • URL設計
  • ワイヤーフレーム
  • Low-fi Prototype
  • High-fi Prototype
  • フォームUX
  • エラー設計
  • Empty State
  • Loading State
  • Error State
  • Onboarding
  • ユーザビリティテスト
  • ヒューリスティック評価

07UI / Visual DesignPRACTICAL

見た目だけでなく、意味と機能を持ったデザインを学びます。

なぜ学ぶ？デザインは好みではなく、情報を正しく伝えるための技術です。チームで再現できる仕組み（デザインシステム）までつくります。

学習内容を見る閉じる24項目

SYLLABUSUI / Visual Design

合格基準

  • 色・文字・余白のルールを決めて、ページをデザインできる
  • デザインの意図を、言葉で説明できる

提出物：トップページのデザインカンプと、デザインの意図の説明

  • レイアウト
  • Composition
  • Grid System
  • Visual Hierarchy
  • Typography
  • Font Pairing
  • Web Font
  • 色彩
  • Color System
  • Contrast
  • White Space
  • Photography
  • Illustration
  • Iconography
  • Art Direction
  • Figma
  • Auto Layout
  • Component
  • Variant
  • Variables
  • Design Tokens
  • Design System
  • UI Library
  • Responsive Components

08Responsive / Fluid / Edge-to-Edge DesignPRODUCTION

単純なPC・スマホ切り替えではなく、あらゆる画面環境へ対応します。

なぜ学ぶ？ユーザーの画面は、スマホからタブレット、折りたたみ端末、大型ディスプレイまでさまざまです。どの環境でも成立する設計が必要です。

学習内容を見る閉じる68項目

SYLLABUSResponsive / Fluid / Edge-to-Edge Design

合格基準

  • 画面幅に応じて、文字と余白がなめらかに変わるデザインを実装できる
  • スマホの画面の端まで、崩れずに表示できる

提出物：画面幅でなめらかに変わる、レスポンシブなページ

レイアウト設計

  • Fixed Layout
  • Fluid Layout
  • Liquid Layout
  • Responsive Design
  • Adaptive Design
  • Mobile First
  • Desktop First
  • Intrinsic Web Design
  • Content Driven Layout
  • Fluid Typography
  • Fluid Spacing
  • Flexible Grid
  • Flexible Image
  • Component Driven Responsive Design

Modern Responsive CSS

  • Media Queries
  • Container Queries
  • Style Queries
  • Container Query Units
  • CSS Grid
  • Flexbox
  • Subgrid
  • min()
  • max()
  • clamp()
  • minmax()
  • fit-content()
  • aspect-ratio

Viewport

  • vw
  • vh
  • svh
  • lvh
  • dvh
  • Dynamic Viewport
  • Mobile Browser UI対策
  • Visual Viewport
  • Layout Viewport

Edge-to-Edge

  • Edge-to-Edge UI
  • Full Bleed Layout
  • Safe Area
  • Display Cutout
  • Notch
  • Dynamic Island
  • Gesture Navigation Area
  • env(safe-area-inset-top)
  • env(safe-area-inset-right)
  • env(safe-area-inset-bottom)
  • env(safe-area-inset-left)

デバイス対応

  • iPhone
  • Android
  • Tablet
  • Desktop
  • Large Display
  • Touch Device
  • Mouse Device
  • Stylus
  • Portrait
  • Landscape
  • Foldable Device
  • High DPI / Retina
  • Device Pixel Ratio

Interaction Media Features

  • hover
  • pointer
  • any-hover
  • any-pointer
  • orientation
  • prefers-reduced-motion
  • prefers-color-scheme
  • prefers-contrast

「ブレークポイントを3つ設定して終わり」ではなく、コンテンツ・コンポーネント・デバイス特性に合わせて変化するWebデザインを習得します。

09Usability / Human InterfacePRACTICAL

アクセシビリティだけでなく、人が迷わず使えるUIを考えます。

なぜ学ぶ？人は迷うと、すぐにページを離れます。人の認知や行動の法則を知り、迷わせないUIを設計します。

学習内容を見る閉じる14項目

SYLLABUSUsability / Human Interface

合格基準

  • 使いにくい箇所を見つけ、改善案を出せる
  • 簡単なユーザーテストを計画し、結果をまとめられる

提出物：ユーザーテストの計画と結果のまとめ

  • Nielsen Heuristics
  • Cognitive Load
  • Affordance
  • Feedback
  • Consistency
  • Error Prevention
  • Recognition vs Recall
  • Fitts's Law
  • Hick's Law
  • Touch Target
  • Navigation
  • Form Usability
  • Mobile Usability
  • User Testing
3

Stage 3本格的なWebサイトを開発する

React・Next.js、CMS、データベース。実務の現場で使われている技術で、更新でき、動きのある本格的なサイトをつくります。

10TypeScript / Modern FrontendPRACTICAL

大規模なWeb制作にも対応できるフロントエンド技術へ進みます。

なぜ学ぶ？実務の大規模なサイトやWebサービスは、TypeScriptやReact、Next.jsでつくられています。現場で通用する開発手法を身につけます。

学習内容を見る閉じる18項目

SYLLABUSTypeScript / Modern Frontend

合格基準

  • 型を使って、安全なコンポーネントを書ける
  • フレームワークでページを組み立て、ビルドして公開できる

提出物：型付きのコンポーネントでつくった小さなWebアプリ

  • TypeScript
  • npm
  • pnpm
  • Vite
  • React
  • Next.js
  • App Router
  • Server Components
  • Client Components
  • Routing
  • Server Actions
  • API
  • State Management
  • Component Architecture
  • Headless CMS
  • SSR
  • SSG
  • ISR

11Motion / InteractionPRACTICAL

サイト体験を動きによって設計します。

なぜ学ぶ？動きは、ユーザーの理解を助け、ブランドの印象を決めます。一方で、使いにくさや酔いの原因にもなるため、設計が必要です。

学習内容を見る閉じる16項目

SYLLABUSMotion / Interaction

合格基準

  • 意味のあるアニメーションを実装し、視差効果を減らす設定にも対応できる
  • 動きのタイミングとイージングを調整できる

提出物：動きのあるページ（視差効果を減らす設定にも対応）

  • Motion Design
  • Micro Interaction
  • Hover Interaction
  • Page Transition
  • Scroll Interaction
  • GSAP
  • ScrollTrigger
  • SVG Animation
  • Mask
  • Clip Path
  • Morphing
  • Parallax
  • Smooth Scroll
  • Cursor Interaction
  • Physics Animation
  • Motion Accessibility

12CMS / WordPressPRODUCTION

更新可能なサイトを設計します。

なぜ学ぶ？公開後に、クライアント自身がお知らせやブログを更新できる仕組みが求められます。使う人を考えたCMSを設計します。

学習内容を見る閉じる13項目

SYLLABUSCMS / WordPress

合格基準

  • クライアントが自分で更新できるサイトを構築できる
  • 投稿タイプとカスタムフィールドを設計できる

提出物：お客さんが自分で更新できるWordPressサイト

  • WordPress
  • Theme Development
  • Block Editor
  • Custom Post Type
  • Custom Fields
  • REST API
  • Headless WordPress
  • CMS設計
  • 権限設計
  • 更新フロー
  • MicroCMS
  • Contentful
  • Headless CMS

13Backend / DatabasePRACTICAL

Web制作の裏側も理解します。

なぜ学ぶ？会員登録、予約、お問い合わせの管理。Webサイトの「裏側」でデータを扱う仕組みを理解します。

学習内容を見る閉じる18項目

SYLLABUSBackend / Database

合格基準

  • フォームから送られたデータを受け取り、保存できる
  • データベースの基本的な設計と操作ができる

提出物：お問い合わせ内容を保存するフォームとデータベース

  • HTTP
  • REST API
  • Node.js
  • PHP
  • Server
  • Database
  • SQL
  • MySQL
  • PostgreSQL
  • Supabase
  • Firebase
  • Authentication
  • Authorization
  • Session
  • Cookie
  • API Design
  • CRUD
  • File Upload
4

Stage 4品質を確認し、サイトを公開する

速く、安全で、誰もが使えるサイトだけが、仕事として納品できます。テストからサーバー、本番公開までを自分の手で行います。

14AccessibilityPRODUCTION

アクセシビリティを「後からチェックするもの」ではなく、設計段階から組み込みます。WCAG 2.2を中心に学びます。

なぜ学ぶ？目が見えにくい人、キーボードだけで操作する人、高齢の人。誰もが使えることは、Webサイトの品質そのものです。

学習内容を見る閉じる29項目

SYLLABUSAccessibility

合格基準

  • WCAG 2.2 AAを基準に、ページをチェックして修正できる
  • スクリーンリーダーで、主要な操作を確認できる

提出物：アクセシビリティのチェック結果と修正の記録

学習内容

  • WCAG
  • A / AA / AAA
  • POUR
  • Semantic HTML
  • WAI-ARIA
  • Accessible Name
  • Landmark
  • Focus Management
  • Keyboard Navigation
  • Skip Link
  • Focus Visible
  • Touch Target
  • Color Contrast
  • Zoom
  • Text Reflow
  • Motion
  • Cognitive Accessibility
  • Accessible Forms
  • Error Identification

Assistive Technology

  • VoiceOver
  • NVDA
  • Screen Reader
  • Keyboard Only
  • Switch Control

Testing

  • axe
  • Lighthouse
  • Accessibility Tree
  • Manual Testing
  • Screen Reader Testing

WCAG 2.2は国際的なWebアクセシビリティ標準で、A・AA・AAAという適合レベルを持ちます。

15Performance EngineeringPRACTICAL

速いWebサイトを作ります。

なぜ学ぶ？表示が遅いサイトは、それだけでユーザーが離れ、検索での評価も下がります。速さは、デザインと同じくらい重要な品質です。

学習内容を見る閉じる24項目

SYLLABUSPerformance Engineering

合格基準

  • Core Web Vitalsを計測し、改善点を見つけられる
  • 画像やフォントを最適化できる

提出物：計測にもとづく表示速度の改善レポート

  • Core Web Vitals
  • LCP
  • CLS
  • INP
  • Critical Rendering Path
  • Browser Rendering
  • Network
  • HTTP
  • Cache
  • CDN
  • Compression
  • Brotli / gzip
  • Image Optimization
  • AVIF / WebP
  • Responsive Images
  • srcset
  • sizes
  • Lazy Loading
  • Preload
  • Prefetch
  • Web Font Optimization
  • Code Splitting
  • Tree Shaking
  • Bundle Analysis

16QA / TestingPRACTICAL

制作物を「なんとなく確認」ではなく、体系的に検証します。

なぜ学ぶ？「たぶん大丈夫」で納品すると、公開後に不具合が見つかり信頼を失います。テストで品質を保証してから届けます。

学習内容を見る閉じる18項目

SYLLABUSQA / Testing

合格基準

  • テスト項目を作り、不具合を報告できる
  • 主要な画面の自動テストを書ける

提出物：テスト項目表と、主要画面の自動テスト

  • QA設計
  • Test Case
  • Acceptance Criteria
  • Unit Test
  • Integration Test
  • E2E Test
  • Visual Regression Test
  • Playwright
  • Vitest
  • Browser Testing
  • Device Testing
  • Responsive Testing
  • Accessibility Testing
  • Performance Testing
  • HTML Validation
  • CSS Validation
  • Regression Testing
  • Bug Report

17Browser / Device CompatibilityPRODUCTION

実際のユーザー環境で正しく動作させます。

なぜ学ぶ？自分のPCでは正しく見えても、iPhoneのSafariでは崩れているかもしれません。実際のユーザー環境で検証します。

学習内容を見る閉じる14項目

SYLLABUSBrowser / Device Compatibility

合格基準

  • 主要なブラウザと実機で、表示を確認できる
  • 表示が違う原因を調べ、修正できる

提出物：ブラウザ・実機での確認表と修正の記録

  • Chrome
  • Safari
  • Firefox
  • Edge
  • iOS Safari
  • Android Chrome
  • Feature Detection
  • Progressive Enhancement
  • Graceful Degradation
  • Polyfill
  • Browser Support Policy
  • Can I Use
  • Real Device Testing
  • Remote Device Testing

18SecurityFOUNDATION

安全なWebサイトを作ります。

なぜ学ぶ？情報漏えいや改ざんは、クライアントの信用を一瞬で失わせます。安全なサイトをつくることは、つくり手の責任です。

学習内容を見る閉じる17項目

SYLLABUSSecurity

合格基準

  • フォームやログインまわりの、主な脆弱性を説明できる
  • HTTPSやセキュリティに関わる設定を確認できる

提出物：セキュリティのチェックリストと確認結果

  • HTTPS
  • SSL/TLS
  • Authentication
  • Authorization
  • XSS
  • CSRF
  • SQL Injection
  • CSP
  • CORS
  • Cookie Security
  • Session Security
  • Environment Variables
  • Secret Management
  • Dependency Security
  • OWASP
  • Backup
  • Incident Response

19Infrastructure / NetworkFOUNDATION

Webサイトがインターネット上で公開される仕組みを理解します。

なぜ学ぶ？Webサイトが世界中から見られる仕組み（ドメイン、DNS、サーバー）を知らなければ、自分の手で公開できません。

学習内容を見る閉じる25項目

SYLLABUSInfrastructure / Network

合格基準

  • ドメイン・DNS・サーバーの関係を説明できる
  • サイトを公開するための設定ができる

提出物：独自ドメインで公開したサイト

Network

  • IP
  • TCP/IP
  • DNS
  • HTTP
  • HTTPS
  • HTTP/2
  • HTTP/3
  • Domain
  • Nameserver

Server

  • Linux
  • SSH
  • SFTP
  • Web Server
  • Apache
  • Nginx
  • VPS
  • Hosting
  • Cloud

Cloud

  • AWS基礎
  • Vercel
  • Netlify
  • Cloudflare
  • CDN
  • Object Storage
  • Edge Network

20DevOps / CI/CDPRACTICAL

コードを書いて終わりではなく、安全に本番へ届けます。

なぜ学ぶ？手作業での公開はミスの元です。テストから公開までを自動化し、安全に何度でも本番へ届けます。

学習内容を見る閉じる21項目

SYLLABUSDevOps / CI/CD

合格基準

  • プッシュすると自動でテストと公開が行われる仕組みをつくれる
  • 公開の前に問題を見つける流れを説明できる

提出物：プッシュで自動テスト・公開される仕組み

  • Development
  • Local
  • Preview
  • Staging
  • Production
  • Environment Variables
  • Build
  • Deployment
  • CI Workflow
  • CI
  • CD
  • Automated Test
  • Preview Deployment
  • Docker
  • Container
  • Monitoring
  • Logging
  • Error Tracking
  • Backup
  • Rollback
  • Release Management

21Production / ReleasePRODUCTION

実際のWebサイト公開を経験します。

なぜ学ぶ？本番公開は、Webサイトが世界に出るいちばん緊張する瞬間です。チェックリストと切り戻しの手順まで、実際に経験します。

学習内容を見る閉じる14項目

SYLLABUSProduction / Release

合格基準

  • 公開前のチェックリストを作り、確認できる
  • 公開後の不具合に対応する手順を説明できる

提出物：公開前チェックリストと公開手順書

  • Domain取得
  • DNS設定
  • SSL
  • Server
  • Build
  • Deploy
  • Database Migration
  • CMS Migration
  • Redirect
  • Production Check
  • Cache Purge
  • Rollback
  • Monitoring
  • Release Checklist
5

Stage 5企画し、プロジェクトを動かす

つくれるようになったら、次は「何を、なぜつくるか」を決める側へ。調査、企画、ディレクション、営業、契約まで、プロジェクトを0から動かす力を身につけます。

22Research / StrategyPRACTICAL

デザインする前に「なぜ作るのか」を考えます。

なぜ学ぶ？「なんとなく良さそう」でつくったサイトは、成果が出ません。市場・競合・ユーザーを調べて、つくる理由を明確にします。

学習内容を見る閉じる21項目

SYLLABUSResearch / Strategy

合格基準

  • 競合と市場を調べ、課題を整理できる
  • 調査結果から、サイトの目的と指標を決められる

提出物：競合調査と課題の整理シート

  • 市場調査
  • 競合分析
  • ベンチマーク
  • ユーザー調査
  • インタビュー
  • アンケート
  • 定量調査
  • 定性調査
  • SWOT
  • 3C
  • STP
  • ペルソナ
  • JTBD
  • カスタマージャーニー
  • UXリサーチ
  • ユーザー課題
  • ビジネス課題
  • ブランド分析
  • コンテンツ分析
  • SEO調査
  • キーワード調査

23コンセプト・企画・プランニングPRACTICAL

調査結果をWeb表現へ変換します。

なぜ学ぶ？調査結果をそのまま並べても、人の心は動きません。伝えるべきメッセージと表現の方向性を決めてから、デザインに進みます。

学習内容を見る閉じる15項目

SYLLABUSコンセプト・企画・プランニング

合格基準

  • 課題から、コンセプトを言葉にできる
  • 企画書にまとめ、提案できる

提出物：コンセプトシートと企画書

  • Web戦略
  • サイトコンセプト
  • Creative Concept
  • Communication Concept
  • ブランドコンセプト
  • Value Proposition
  • Tone & Manner
  • メッセージ設計
  • コピーライティング
  • ストーリーテリング
  • コンテンツ企画
  • ページ企画
  • キャンペーン企画
  • ブランド体験
  • Creative Direction

24WebディレクションPRACTICAL

制作チームをまとめ、プロジェクトを完成まで導く技術を学びます。

なぜ学ぶ？Web制作は、デザイナー、エンジニア、クライアントなど多くの人が関わるチーム作業です。誰かが全体を進めなければ、プロジェクトは完成しません。

学習内容を見る閉じる25項目

SYLLABUSWebディレクション

合格基準

  • スケジュールと役割を決め、進行を管理できる
  • 議事録と仕様書をつくれる

提出物：スケジュール表・議事録・仕様書

  • 要件定義
  • 要求整理
  • サイト要件
  • 機能要件
  • 非機能要件
  • ターゲット定義
  • KPI
  • KGI
  • コンバージョン
  • プロジェクト計画
  • WBS
  • ガントチャート
  • スケジュール管理
  • 工数管理
  • タスク管理
  • Backlog / Jira / Issue Tracker
  • リスク管理
  • 外注管理
  • 制作進行
  • レビュー
  • 品質管理
  • クライアントコミュニケーション
  • 議事録
  • 仕様変更管理
  • 納品管理

25営業・案件獲得PRACTICAL

仕事を受注するところからWeb制作は始まります。

なぜ学ぶ？どれだけ技術があっても、仕事を受注できなければWebサイトは生まれません。見積や契約を知らないと、つくるほど赤字になることもあります。

学習内容を見る閉じる21項目

SYLLABUS営業・案件獲得

合格基準

  • 問い合わせに返信し、ヒアリングの場を設定できる
  • 見積書と提案書をつくれる

提出物：ヒアリングシート・見積書・提案書

  • 営業戦略
  • 問い合わせ対応
  • 初回商談
  • ヒアリング
  • 課題抽出
  • 顧客ニーズ分析
  • RFP
  • 提案書
  • プレゼンテーション
  • 見積
  • 工数計算
  • 原価
  • 利益
  • 契約
  • NDA
  • 業務委託
  • 準委任・請負
  • スコープ定義
  • 追加修正への対応
  • 失注分析
  • 継続案件の作り方

26Web法務・ガバナンスFOUNDATION

実際に企業サイトを公開するために必要な知識を学びます。

なぜ学ぶ？画像やフォントのライセンス、プライバシーポリシー、特定商取引法。知らずに公開すると、クライアントが法的なリスクを負います。

学習内容を見る閉じる13項目

SYLLABUSWeb法務・ガバナンス

合格基準

  • 著作権・肖像権・個人情報の基本を説明できる
  • 特定商取引法の表記やプライバシーポリシーの役割を説明できる

提出物：法務まわりのチェックリスト

  • Copyright
  • Trademark
  • Image License
  • Font License
  • OSS License
  • Privacy Policy
  • Cookie
  • Personal Information
  • Terms
  • 特定商取引法
  • Accessibility Policy
  • Security Policy
  • AI利用ポリシー
6

Stage 6公開後の改善と高度な表現を学ぶ

公開したサイトを検索・データ・運用で改善し、AIの活用やWebGL・3Dによる表現まで学びます。ここまでで、総合制作の準備が整います。

27SEO / SearchPRACTICAL

検索されるサイトを設計します。

なぜ学ぶ？検索で見つからないサイトは、存在しないのと同じです。技術とコンテンツの両面から、見つけてもらえるサイトを設計します。

学習内容を見る閉じる15項目

SYLLABUSSEO / Search

合格基準

  • 検索意図に合ったページ構成を考えられる
  • タイトル・構造化データ・サイトマップを設定できる

提出物：SEOの設計シートと構造化データ

  • Technical SEO
  • Content SEO
  • Crawl
  • Index
  • robots.txt
  • sitemap.xml
  • Canonical
  • Redirect
  • Metadata
  • Structured Data
  • Schema.org
  • Internal Links
  • Core Web Vitals
  • Search Console
  • Google Search

28Analytics / GrowthPRACTICAL

公開後のデータからサイトを改善します。

なぜ学ぶ？公開後のデータを見れば、どこで迷い、どこで離脱しているかがわかります。勘ではなく、数字でサイトを改善します。

学習内容を見る閉じる14項目

SYLLABUSAnalytics / Growth

合格基準

  • アクセス解析を設定し、指標を読み取れる
  • データから改善案を出せる

提出物：アクセス解析の設定と改善提案レポート

  • GA4
  • GTM
  • Search Console
  • Event Tracking
  • Conversion
  • Funnel
  • KPI
  • Dashboard
  • Heatmap
  • User Behavior
  • A/B Testing
  • CRO
  • PDCA
  • Growth

29EC / CommerceFOUNDATION

売れるWebサイトを作ります。

なぜ学ぶ？ECサイトは、成果が売上として直接見える仕事です。商品を探し、選び、買うまでの体験を設計します。

学習内容を見る閉じる14項目

SYLLABUSEC / Commerce

合格基準

  • ECサイトの購入の流れと、必要な機能を説明できる
  • 商品ページとカートの基本を設計できる

提出物：ECサイトの購入導線の設計

  • Shopify
  • EC-CUBE
  • WooCommerce
  • 楽天市場
  • Yahoo!ショッピング
  • 商品ページ
  • カート
  • Checkout
  • Payment
  • Stripe
  • 商品DB
  • Inventory
  • Conversion
  • EC UX

30AI × Web ProductionPRACTICAL

AI時代のWeb制作を学びます。

なぜ学ぶ？AIで制作は速くなりました。だからこそ、AIが出したコードやデザインが正しいかを判断し、直せる人が求められます。

学習内容を見る閉じる22項目

SYLLABUSAI × Web Production

合格基準

  • AIの出力を、自分で確かめてから使える
  • AIを使う場面と、使わない場面を判断できる

提出物：AIを使った制作の記録と、出力を確かめた手順

AI活用

  • AI Research
  • AI Planning
  • AI Copywriting
  • AI Design
  • AI Coding
  • AI Refactoring
  • AI Code Review
  • AI Testing
  • AI Accessibility Check
  • AI Image Generation
  • AI Video Generation
  • AI Agent
  • MCP
  • AI Workflow

ただし、「AIに作らせる」だけではありません。AIが生成した

  • HTML
  • CSS
  • JavaScript
  • UI
  • デザイン
  • コピー
  • アクセシビリティ
  • セキュリティ

が正しいかどうかを判断し、修正できる力を身につけます。

31Operation / MaintenancePRACTICAL

公開後までがWeb制作です。

なぜ学ぶ？Webサイトは、公開した日から古くなり始めます。更新・保守・改善を続け、次のリニューアル提案までつなげます。

学習内容を見る閉じる13項目

SYLLABUSOperation / Maintenance

合格基準

  • 更新・保守の計画を立てられる
  • 公開後のサイトを、データに基づいて改善できる

提出物：保守・運用の計画書

  • CMS運用
  • コンテンツ更新
  • Security Update
  • Dependency Update
  • Backup
  • Monitoring
  • Analytics
  • SEO Improvement
  • Accessibility Improvement
  • Performance Improvement
  • Incident Response
  • Maintenance Contract
  • Renewal Proposal

32Creative DevelopmentSPECIALTY

高度な表現をWebへ実装します。

なぜ学ぶ？アワードで評価されるWeb表現の多くは、WebGLや3D、シェーダーで実装されています。総合制作でCSS Design Awardsに応募する作品で使う技術です。

学習内容を見る閉じる22項目

SYLLABUSCreative Development

合格基準

  • 動きや3Dを使った表現を、表示速度を保ったまま実装できる
  • アワードの審査基準をふまえて、表現を選べる

提出物：動きや3Dを使った作品（表示速度の計測つき）

  • Canvas
  • WebGL
  • Three.js
  • React Three Fiber
  • GLSL
  • Vertex Shader
  • Fragment Shader
  • ShaderMaterial
  • Texture
  • Lighting
  • Camera
  • Post Processing
  • EffectComposer
  • Particles
  • Instancing
  • 3D Model
  • glTF
  • Blender連携
  • WebGPU
  • Creative Coding
  • Generative Art
  • Interactive 3D
Study style

学習スタイルの例

Books / Practice / Review

本で学び、手を動かし、理由を説明できるまで直す。

知識の入口には、選定した専門書や公式ドキュメントも活用します。スクール専用教材を終えることが目的ではありません。必要な情報を自分で探し、読み、制作に応用する力を育てます。教材費の取り扱いは受講料のページで確認できます。

レビューでは、直し方だけでなく「なぜその構造・余白・技術を選んだか」を問いかけます。技術を使う理由と、あえて使わない理由も説明できるようにします。

仕事や生活に合わせてペースを調整し、調べる・つくる・振り返る時間を継続して確保します。

小さく手を動かす

一つの疑問を調べ、一つの表示や動きを試します。次に着手することをメモして、学びをつなげます。

制作に戻して確かめる

教材で知ったことを自分の制作物に使い、レビューを受けます。説明を読むことと、自分で直せることの差を確認します。

中断しても再開する

仕事や生活で間が空いたら、前回の記録を振り返ります。取り組む範囲を小さくし、講師と次の課題を決め直せます。

受講を始めるときに、生活に合わせた学び方を一緒に考えます。その後も制作と理解度に合わせて見直します。時間数や期間で学習を終える「卒業」はありません。

Next

32のカリキュラムのあとは、総合制作へ。

32のカリキュラムで学んだことを一つのプロジェクトで実践し、CSS Design Awardsへの応募を目指します。作品の完成や応募の後も、改善と次の制作を通じて学び続けます。

無料個別相談を予約総合制作を見る

毎月2名まで受講できます