
Web制作コース by ZeroPlus
コラボレーションコースは厳選した外部教育サービスと
デジタルバッジの連携をしたコース

コラボレーションコースは、ランサーズデジタルアカデミーのオリジナルコースとはサービス内容が異なります。
・受講自体は、コラボレーション先のZeroPlusの内容になります。
・ZeroPlusの内容に加えて、ランサーズデジタルバッジの贈呈があるというものになります。
・詳しくは無料相談、もしくはお問い合わせください。
概要
Webデザインからコーディングまでを一気通貫して学べる

マークアップ,JS,WordPressを含むWeb制作の基本的なプログラミング知識から、
Webデザインまでを一気通貫して学べるカリキュラムです。
反転学習を導入しており、授業で新しい知識を学ぶのではなく、事前課題で基礎知識を身につけた上で、
授業では演習などを通して実際の現場に即した環境で実践的なスキルを習得することが可能です。
また、Web制作だけでなく、フリーランスとして活躍する上で必要な営業やライティングなどのビジネススキルも教えています。
カリキュラムの最後には卒業制作としてオリジナルサイトの制作を行います。
学習内容
学習期間:4〜10ヶ月
事前課題
学習内容詳細
- 各種ツールのダウンロードやインストール
- HTML, CSSの概要について学ぶ
- HTML, CSSの基礎を学ぶ
- Emmetの使い方を学ぶ
- Webフォントの使い方を学ぶ
- デザインデータからのコーディングの流れ(Figma)
入学テスト
学習内容詳細
- 事前課題の理解度の確認テスト(知識テスト、技能テスト)
Lesson01(HTML, CSS)
・position
・transform
・擬似要素
課題
学習内容詳細
-
ブログサイトのトップページ制作(モバイル)
- モバイルファーストで進めることの重要性
- コンテンツ幅に収まらない要素の表示の仕方
- 適切なレイアウトのコーディング
- レイアウトシフトについての理解
Lesson02(HTML, CSS)
・様々なデバイスに対応するためにレスポンシブを学ぶ
・ブログサイトのレスポンシブ化
課題
学習内容詳細
- CSSの知識
- 要素を固定する方法を学ぶ
- 要素の重なり順を扱うCSSを学ぶ
- 擬似要素を作れるようになるコーディングを効率化する
- コーディングを効率化する
- 複数クラスを使えるようになる
- 類似のレイアウトを転用したコーディング
Lesson03(HTML, CSS)
・calc()の使い方を学ぶ
・CSS設計を学ぶ
課題
学習内容詳細
- レスポンシブの書き方と流れを学ぶ
- 必要なmetaタグを学ぶ
Lesson04(HTML, CSS)
・positionとtransformで要素を上下左右中央寄せのやり方を学ぶ
・linear-gradient()を使ってグラデーションをする方法を学ぶ
・CSSを使って吹き出しの作り方を学ぶ
・CSSでハンバーガーメニューアイコンを作る
課題
学習内容詳細
- CSS変数を適用する
- calc()を使って値を計算する
- CSS設計を適用する
Lesson05(HTML, CSS)
課題
学習内容詳細
- コーポレートサイトの目的
- ハンバーガーメニューの作り方
- クラス名及び共通化を意識してコーディング
Lesson06(HTML, CSS)
・tableタグの使い方を学ぶ
・お問合せフォームのレスポンシブ化
課題
学習内容詳細
-
コーポレートサイトのトップページ、サービスページ制作(モバイル)
- 画像のトリミング
- テキストにマーカー装飾をつける
Lesson07(HTML, CSS)
・ブログサイトのレスポンシブ化
課題
学習内容詳細
- テーブル利用したコーディングを学ぶ
Lesson08(HTML, CSS)
・変数の使い方について
・演算子について
・条件分岐について
・ループ処理について
・関数の使い方について
・スコープについて
・オブジェクトと配列について
・DOM操作について
課題
学習内容詳細
- より実践的なレスポンシブを学ぶ
Lesson09(JavaScript)
・GSAPの使い方について
課題
・変数定義
・if文を使用しての条件分岐問題
・関数を使用しての計算問題
学習内容詳細
- Web制作におけるJavaScriptの活用について学ぶ
- 変数の使い方について学ぶ
- 関数の使い方について学ぶ
- if文について学ぶ
- DOM操作について学ぶ
Lesson10(JavaScript)
・ブログサイトのレスポンシブ化
課題
・ハンバーガーメニュー
・GSAPを使用してのワイプイン
・GSAPを使用してのオープニングアニメーション
学習内容詳細
- ハンバーガーメニューの作り方について学ぶ
- GSAPを使用してのワイプインの作り方を学ぶ
- GSAPを使用してのオープニングアニメーションの作り方について学ぶ
JavaScript オンデマンド①
・GSAPプラグインのスクロールアニメーションについて
・ループ処理について
課題
・GSAPのスクロールアニメーション
・foreach文を使用しての連続アニメーション
学習内容詳細
- プラグインのスクロールアニメーションの使い方について学ぶ
- foreach文を使用しての連続アニメーションの作り方について学ぶ
JavaScript オンデマンド②
・Swiperの使い方について
・ループ処理について
課題
・Swiperを使用してのカルーセルパネルの作成
・Swiperを使用してのスライドショーの作成
・foreachを使用してのアコーディオンメニューの作成
学習内容詳細
- Swiperを使用してカルーセルパネルの作り方を学ぶ
- Swiperを使用してスライドショーの作り方を学ぶ
- foreachを使用してのアコーディオンメニューの作り方を学ぶ
WordPress オンデマンド①
・WordPressの概要を知る
・WordPressで使用するPHPの基本を学ぶ
・WordPressのテンプレート階層について学ぶ
・ブログサイトのWordPress化基礎編(Localの環境構築)
・WordPressのテンプレートパーツファイルについて学ぶ
・WordPressでのCSSの読み込み
・WordPressでよく使うURL出力関数を学ぶ
・WordPressのエスケープについて学ぶ
課題
・トップページのテンプレート化
・ブログサイトのスタイルの適用(functions.phpの編集)
学習内容詳細
- 授業で使用するWordPressの環境構築(HTMLの授業で作成したブログサイトのWordPress化)
- トップページのテンプレート化
- 相対パスの書き換え
- ブログサイトのスタイルの適用(functions.phpの編集)
WordPress オンデマンド②
・個別投稿ページの作成の仕方を学ぶ
・カテゴリーの作成の仕方について学ぶ
・メインループの使い方について学ぶ
・サブループの使い方について学ぶ
課題
・投稿記事の作成
・メインループの作成
・ページネーションの作成
・カテゴリの作成
・サブループの作成
学習内容詳細
- 投稿記事の作成
- メインループの作成
- ページネーションの作成
- カテゴリの作成
WordPress オンデマンド③
・固定ページの作成の仕方について学ぶ
・スクリプトの登録の仕方について学ぶ(functions.phpの編集)
課題
・コーポレートサイトを固定ページで作成し、コーポレートサイトをトップページに、復習で作成したブログサイトをコーポレートの下層ページに設定するやり方について学ぶ
・固定ページの作成
・スクリプトの登録(functions.phpの編集)
学習内容詳細
- コーポレートサイトを固定ページで作成し、コーポレートサイトをトップページに、授業で作成したブログサイトをコーポレートの下層ページに設定するやり方について学ぶ
- 固定ページの作成
- スクリプトの登録(functions.phpの編集)
WordPress オンデマンド④
・WordPressのプラグインについて学ぶ
・WordPressプラグインを使用してのコンタクトフォームの実装について学ぶ
課題
・コーポーレートサイトの下層ページを作る
・プラグインを使用してのコンタクトフォームを作る
学習内容詳細
- コーポーレートサイトの下層ページを作る
- プラグインを使用してのコンタクトフォームを作る
- ローカル環境でのメールの送受信についての紹介・導入
- セキュリティ面で使用するプラグインの紹介・導入
Lesson11(Web Design)
・Figmaの使い方についてのインプット(コンポーネント機能)
・Webサイトの制作フローについてインプット(デザインカンプ)
課題
学習内容詳細
- デザインの原則について学ぶ(デザイン四大原則)
- Figmaの使い方について学ぶ(基本操作・リピートグリット・アセット)
- Webサイトの制作フローについて学ぶ(ワイヤーフレーム)
Lesson12(Web Design)
課題
学習内容詳細
- デザインの原則について実践的に学ぶ(配色・あしらい・ジャンプ率)
- Figmaの使い方について実践的に学ぶ(コンポーネント機能)
- Webサイトの制作フローについて実践的に学ぶ(デザインカンプ)
Lesson13(Web Design)
課題
学習内容詳細
- お問い合わせフォームの実践的なデザイン
Web Design オンデマンド①
・自主制作課題(卒業制作)の決定
学習内容詳細
- Figmaの使い方について学ぶ(共有モード・プロトタイプ機能・ステート機能)
Lesson14(卒業制作)
課題
学習内容詳細
- 要件定義について学ぶ
- 卒業制作の再要件定義(1on1形式で面談をし、担当の講師と決定する。)
Lesson15(卒業制作)
課題
学習内容詳細
- 卒業制作の制作
サーバー オンデマンド①
学習内容詳細
- サーバーアップに関する知識
- 有料サーバーのレンタル方法
コラボレーションする
教育企業

株式会社TOMAP
株式会社TOMAPは「すべての人に選択の自由を」をミッションとして掲げており、現在はプログラミングスキルの習得を経て働き方の自由を広げるためのスクール事業を展開しています。
Web制作事業や人材紹介事業から派生し、生徒様のキャリアに必要な支援も随時行っております。また、プログラミングスクールに付随したコミュニティも保有しており、コミュニティ内でも制作案件をシェアしたりなど、「学ぶ」と「働く」のサイクルを回せる環境があります。
受講要件

ZeroPlusのフリーランスコースは、完全未経験でも受講することが可能です。
下記に該当する方は受講をおすすめしません。
下記に該当する方は受講をおすすめしません。
- 一般的なパソコン操作ができない
- 必須環境のPCを持っていない
受講するために必要なもの
- OS: macOS または Windows11
- CPU:Apple M1 または Intel Core i5以上
- メモリ:8GB以上
- ストレージ:256GB以上
- Figma、Zoom、VScode
料金プラン
スクール業界最安級の料金プラン
実戦プラン
- TOMAPの教材
- 質問対応
- 修了試験フィードバック
- デジタルバッジ贈呈
個別プラン
- TOMAPの教材
- 質問対応
- 修了試験フィードバック
- デジタルバッジ贈呈
- 案件獲得サポート