01
Corporateコーポレートサイト
課題で制作総合制作で選べる
- 企業サイト
- 中小企業サイト
- 大規模企業サイト
- IRサイト
- グループ企業サイト
関わるカリキュラム02 Semantic HTML ／ 03 Modern CSS ／ 12 CMS / WordPress
Learning and outcomes
学ぶこと・課題で作ること・応用できること。
81種類すべてを制作するわけではありません。一覧は学んだ技術を応用できる制作ジャンルの例です。「課題で制作」の表示も、そのジャンル内の全種類を完成させるという意味ではありません。
授業で扱う
仕組み・考え方・技術を学ぶ範囲。ジャンル全体の制作完了を示すものではありません。
下のジャンル図は説明用のイメージです。模擬案件の画面例と、講師の実際の制作実績は、それぞれ区別して掲載しています。
Genres
代表的なWeb制作案件に、対応できる力を。
それぞれのジャンルで、関わるカリキュラムも添えています。気になるジャンルから、どんな力が身につくのかを見てみてください。
授業で扱うカリキュラムの中で学ぶ課題で制作課題として実際につくる総合制作で選べる総合制作のテーマにできる
02
Brandingブランドサイト
課題で制作総合制作で選べる
- ブランドサイト
- Product Brand Site
- Campaign Site
- Storytelling Site
- Editorial Site
関わるカリキュラム23 コンセプト・企画・プランニング ／ 07 UI / Visual Design ／ 11 Motion / Interaction
03
Landing PageLP
課題で制作総合制作で選べる
- 商品LP
- サービスLP
- 広告LP
- 採用LP
- キャンペーンLP
- Responsive LP
- Motion LP
関わるカリキュラム07 UI / Visual Design ／ 11 Motion / Interaction ／ 28 Analytics / Growth
04
Recruitment採用サイト
授業で扱う総合制作で選べる
- 新卒採用
- 中途採用
- Career Site
- Employee Interview
- Culture Site
関わるカリキュラム23 コンセプト・企画・プランニング ／ 06 UX / IA ／ 12 CMS / WordPress
05
ECECサイト
授業で扱う課題で制作
- Shopify Store
- D2C
- ブランドEC
- 商品ページ
- Campaign Page
- Checkout UX
- 楽天商品ページ
- Yahoo!商品ページ
関わるカリキュラム29 EC / Commerce ／ 13 Backend / Database ／ 18 Security
06
Mediaメディア
授業で扱う課題で制作
- News Site
- Magazine
- Blog
- Owned Media
- Editorial Platform
- Archive Site
関わるカリキュラム12 CMS / WordPress ／ 27 SEO / Search ／ 15 Performance Engineering
07
CMSCMSサイト
課題で制作
- WordPress
- Headless CMS
- MicroCMS
- Contentful
- API Driven Site
関わるカリキュラム12 CMS / WordPress ／ 13 Backend / Database
08
Web ApplicationWebアプリ
授業で扱う
- Dashboard
- Admin UI
- Member Site
- Authentication
- Reservation System
- Contact Management
- Search Application
- Data Visualization
関わるカリキュラム10 TypeScript / Modern Frontend ／ 13 Backend / Database ／ 18 Security
09
Accessibilityアクセシブルサイト
課題で制作
- WCAG対応サイト
- Keyboard Accessible UI
- Screen Reader対応
- Accessible Forms
- Accessible Navigation
関わるカリキュラム14 Accessibility ／ 09 Usability / Human Interface ／ 16 QA / Testing
10
Multilingual多言語サイト
授業で扱う
- 日本語 / 英語
- 多言語Corporate
- Global Brand Site
- International SEO
関わるカリキュラム27 SEO / Search ／ 02 Semantic HTML ／ 19 Infrastructure / Network
Motion
& 3D
11
Creative WebsiteアワードレベルのWeb表現
課題で制作総合制作で選べる
- Immersive Website
- Scroll Experience
- Interactive Storytelling
- 3D Website
- WebGL Website
- Three.js Website
- Shader Experience
- Particle Experience
- Virtual Space
- Product 3D Viewer
- Experimental Website
関わるカリキュラム32 Creative Development ／ 11 Motion / Interaction ／ 15 Performance Engineering
12
Mobile Webモバイル特化サイト
課題で制作
- Edge-to-Edge
- Safe Area対応
- Gesture UI
- Touch UI
- Dynamic Viewport対応
- PWA
関わるカリキュラム08 Responsive / Fluid / Edge-to-Edge Design ／ 17 Browser / Device Compatibility
13
Design System大規模UI
授業で扱う
- Design System
- UI Component Library
- Design Tokens
- Responsive Components
- Accessible Components
- React Components
関わるカリキュラム07 UI / Visual Design ／ 10 TypeScript / Modern Frontend ／ 14 Accessibility
Process
制作の流れは、ジャンルが違っても同じです。
- 01受注・要件定義
- 02設計・デザイン
- 03実装
- 04テスト・公開
- 05納品・運用
ジャンルが変わっても、仕事の流れは変わりません。営業から運用までを一度、自分の手で通しておけば、どんなサイトにも応用できます。その一度を、総合制作の38工程で経験します。
総合制作の38工程を見る
Career
学んだ先のキャリア例
One project, whole workflow
前後の工程を知ると、仕事での判断が変わる。
コーディング担当でも、なぜこのデザインが必要なのかを理解できる。デザイナーでも、公開後の更新やアクセシビリティを考えられる。フリーランスなら、依頼の受け方から見積もり、変更調整、納品後の対応まで考える必要があります。
0→1が企画から納品・運用まで学ぶのは、すべての職種を一人で兼任させるためではありません。自分の担当工程が、前後の仕事にどうつながっているかを理解するためです。就職・案件獲得を保証するものではありません。
Web制作の全体を、ひとりで完成させられる。それは、どの道に進んでも強みになります。下は、学んだ先で選べるキャリアの例です。就職や案件の獲得を保証するものではありません。
Webデザイナー
企業のブランドサイトを、
コンセプトから提案し、
デザインする。
フロントエンドエンジニア
速くて、誰もが使える
Webサイトを、
自分の手で実装する。
クリエイティブデベロッパー
動きや3Dを使った、
アワードレベルの
表現をつくる。
Webディレクター
お客さんとチームをつなぎ、
プロジェクトを
完成まで導く。
フリーランス
営業から公開・運用まで、
自分で仕事を受けて
完成させる。