ランサーズデジタルアカデミー

Web制作スキル

Web制作コース by ZeroPlus

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

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

概要

Webデザインからコーディングまでを一気通貫して学べる

マークアップ,JS,WordPressを含むWeb制作の基本的なプログラミング知識から、
Webデザインまでを一気通貫して学べるカリキュラムです。
反転学習を導入しており、授業で新しい知識を学ぶのではなく、事前課題で基礎知識を身につけた上で、 授業では演習などを通して実際の現場に即した環境で実践的なスキルを習得することが可能です。
また、Web制作だけでなく、フリーランスとして活躍する上で必要な営業やライティングなどのビジネススキルも教えています。
カリキュラムの最後には卒業制作としてオリジナルサイトの制作を行います。

学習内容

学習期間:4〜10ヶ月

事前課題

HTML・CSS

学習内容詳細

  • 各種ツールのダウンロードやインストール
  • HTML, CSSの概要について学ぶ
  • HTML, CSSの基礎を学ぶ
  • Emmetの使い方を学ぶ
  • Webフォントの使い方を学ぶ
  • デザインデータからのコーディングの流れ(Figma)

入学テスト

HTML・CSS

学習内容詳細

  • 事前課題の理解度の確認テスト(知識テスト、技能テスト)

Lesson01(HTML, CSS)

CSSプロパティの使い方について学ぶ
・position
・transform
・擬似要素

課題

・異なるブログサイトのトップページ制作(モバイル)

学習内容詳細

    ブログサイトのトップページ制作(モバイル)
    • モバイルファーストで進めることの重要性
    • コンテンツ幅に収まらない要素の表示の仕方
    • 適切なレイアウトのコーディング
    • レイアウトシフトについての理解

Lesson02(HTML, CSS)

・必要なmetaタグ
・様々なデバイスに対応するためにレスポンシブを学ぶ
・ブログサイトのレスポンシブ化

課題

・異なるブログサイトのカテゴリーページ、個別ページ制作(モバイル)

学習内容詳細

ブログサイトのカテゴリーページ、個別ページ制作(モバイル)CSSの知識
  • CSSの知識
  • 要素を固定する方法を学ぶ
  • 要素の重なり順を扱うCSSを学ぶ
  • 擬似要素を作れるようになるコーディングを効率化する
  • コーディングを効率化する
  • 複数クラスを使えるようになる
  • 類似のレイアウトを転用したコーディング

Lesson03(HTML, CSS)

・CSS変数の使い方を学ぶ
・calc()の使い方を学ぶ
・CSS設計を学ぶ

課題

・異なるブログサイトのレスポンシブ化

学習内容詳細

ブログサイトのレスポンシブ化
  • レスポンシブの書き方と流れを学ぶ
  • 必要なmetaタグを学ぶ

Lesson04(HTML, CSS)

・テキストへの影の付け方を学ぶ
・positionとtransformで要素を上下左右中央寄せのやり方を学ぶ
・linear-gradient()を使ってグラデーションをする方法を学ぶ
・CSSを使って吹き出しの作り方を学ぶ
・CSSでハンバーガーメニューアイコンを作る

課題

・異なるブログサイトのリファクタリング

学習内容詳細

ブログサイトのリファクタリング
  • CSS変数を適用する
  • calc()を使って値を計算する
  • CSS設計を適用する

Lesson05(HTML, CSS)

・CSSでいろいろな図形を作る

課題

・異なるコーポレートサイトのトップページ制作(モバイル)

学習内容詳細

コーポレートサイトのトップページ制作(モバイル)
  • コーポレートサイトの目的
  • ハンバーガーメニューの作り方
  • クラス名及び共通化を意識してコーディング

Lesson06(HTML, CSS)

・よく使用するinputタグの種類と使い方を学ぶ
・tableタグの使い方を学ぶ
・お問合せフォームのレスポンシブ化

課題

・異なるコーポレートサイトのトップページ、サービスページ制作(モバイル)

学習内容詳細

    コーポレートサイトのトップページ、サービスページ制作(モバイル)
  • 画像のトリミング
  • テキストにマーカー装飾をつける

Lesson07(HTML, CSS)

・お問合せフォームを作る
・ブログサイトのレスポンシブ化

課題

・異なるコーポレートサイトの会社概要ページ、お問合せページ制作(モバイル)

学習内容詳細

コーポレートサイトの会社概要ページ、お問合せページ制作(モバイル)
  • テーブル利用したコーディングを学ぶ

Lesson08(HTML, CSS)

JavaScriptの基礎を学ぶ
・変数の使い方について
・演算子について
・条件分岐について
・ループ処理について
・関数の使い方について
・スコープについて
・オブジェクトと配列について
・DOM操作について

課題

・異なるコーポレートサイトのコーポレートサイトのレスポンシブ化

学習内容詳細

コーポレートサイトのレスポンシブ化
  • より実践的なレスポンシブを学ぶ

Lesson09(JavaScript)

JavaScriptのライブラリ
・GSAPの使い方について

課題

コンソールログで確認ができる以下の問題を解いていく
・変数定義
・if文を使用しての条件分岐問題
・関数を使用しての計算問題

学習内容詳細

JavaScriptの基礎と活用
  • Web制作におけるJavaScriptの活用について学ぶ
  • 変数の使い方について学ぶ
  • 関数の使い方について学ぶ
  • if文について学ぶ
  • DOM操作について学ぶ

Lesson10(JavaScript)

・お問合せフォームを作る
・ブログサイトのレスポンシブ化

課題

HTML/CSSの授業で取り扱ったコーポレートサイトに以下のアニメーション・機能を追加する
・ハンバーガーメニュー
・GSAPを使用してのワイプイン
・GSAPを使用してのオープニングアニメーション

学習内容詳細

ライブラリGSAPを使ったアニメーション
  • ハンバーガーメニューの作り方について学ぶ
  • GSAPを使用してのワイプインの作り方を学ぶ
  • GSAPを使用してのオープニングアニメーションの作り方について学ぶ

JavaScript オンデマンド①

動画教材については事前課題として動画を閲覧する前に以下の内容を学習していただく
・GSAPプラグインのスクロールアニメーションについて
・ループ処理について

課題

HTML/CSSの授業で取り扱ったコーポレートサイトに以下のアニメーション・機能を追加する
・GSAPのスクロールアニメーション
・foreach文を使用しての連続アニメーション

学習内容詳細

ライブラリGSAPの応用
  • プラグインのスクロールアニメーションの使い方について学ぶ
  • foreach文を使用しての連続アニメーションの作り方について学ぶ

JavaScript オンデマンド②

動画教材については事前課題として動画を閲覧する前に以下の内容を学習していただく
・Swiperの使い方について
・ループ処理について

課題

HTML/CSSの授業で取り扱ったコーポレートサイトに以下のアニメーション・機能を追加する
・Swiperを使用してのカルーセルパネルの作成
・Swiperを使用してのスライドショーの作成
・foreachを使用してのアコーディオンメニューの作成

学習内容詳細

ライブラリSwiperを使ったUIアニメーション
  • Swiperを使用してカルーセルパネルの作り方を学ぶ
  • Swiperを使用してスライドショーの作り方を学ぶ
  • foreachを使用してのアコーディオンメニューの作り方を学ぶ

WordPress オンデマンド①

動画教材については事前課題として動画を閲覧する前に以下の内容を学習していただく
・WordPressの概要を知る
・WordPressで使用するPHPの基本を学ぶ
・WordPressのテンプレート階層について学ぶ
・ブログサイトのWordPress化基礎編(Localの環境構築)
・WordPressのテンプレートパーツファイルについて学ぶ
・WordPressでのCSSの読み込み
・WordPressでよく使うURL出力関数を学ぶ
・WordPressのエスケープについて学ぶ

課題

異なるブログサイトのWordPress化
・トップページのテンプレート化
・ブログサイトのスタイルの適用(functions.phpの編集)

学習内容詳細

WordPress概要、ブログサイトのCMS化
  • 授業で使用するWordPressの環境構築(HTMLの授業で作成したブログサイトのWordPress化)
  • トップページのテンプレート化
  • 相対パスの書き換え
  • ブログサイトのスタイルの適用(functions.phpの編集)

WordPress オンデマンド②

動画教材については事前課題として動画を閲覧する前に以下の内容を学習していただく
・個別投稿ページの作成の仕方を学ぶ
・カテゴリーの作成の仕方について学ぶ
・メインループの使い方について学ぶ
・サブループの使い方について学ぶ

課題

異なるブログサイトのWordPress化
・投稿記事の作成
・メインループの作成
・ページネーションの作成
・カテゴリの作成
・サブループの作成

学習内容詳細

ブログサイトのCMS化
  • 投稿記事の作成
  • メインループの作成
  • ページネーションの作成
  • カテゴリの作成

WordPress オンデマンド③

動画教材については事前課題として動画を閲覧する前に以下の内容を学習していただく
・固定ページの作成の仕方について学ぶ
・スクリプトの登録の仕方について学ぶ(functions.phpの編集)

課題

異なるコーポレートサイトのCMS化 固定ページ
・コーポレートサイトを固定ページで作成し、コーポレートサイトをトップページに、復習で作成したブログサイトをコーポレートの下層ページに設定するやり方について学ぶ
・固定ページの作成
・スクリプトの登録(functions.phpの編集)

学習内容詳細

コーポレートサイトのCMS化 固定ページ
  • コーポレートサイトを固定ページで作成し、コーポレートサイトをトップページに、授業で作成したブログサイトをコーポレートの下層ページに設定するやり方について学ぶ
  • 固定ページの作成
  • スクリプトの登録(functions.phpの編集)

WordPress オンデマンド④

動画教材については事前課題として動画を閲覧する前に以下の内容を学習していただく
・WordPressのプラグインについて学ぶ
・WordPressプラグインを使用してのコンタクトフォームの実装について学ぶ

課題

コーポレートサイトのCMS化 お問い合わせ機能
・コーポーレートサイトの下層ページを作る
・プラグインを使用してのコンタクトフォームを作る

学習内容詳細

コーポレートサイトのCMS化 お問い合わせ機能
  • コーポーレートサイトの下層ページを作る
  • プラグインを使用してのコンタクトフォームを作る
  • ローカル環境でのメールの送受信についての紹介・導入
  • セキュリティ面で使用するプラグインの紹介・導入

Lesson11(Web Design)

・デザインの原則についてのインプット(配色・あしらい・ジャンプ率)
・Figmaの使い方についてのインプット(コンポーネント機能)
・Webサイトの制作フローについてインプット(デザインカンプ)

課題

・異なるデザインサイトのワイヤーフレーム制作

学習内容詳細

  • デザインの原則について学ぶ(デザイン四大原則)
  • Figmaの使い方について学ぶ(基本操作・リピートグリット・アセット)
  • Webサイトの制作フローについて学ぶ(ワイヤーフレーム)

Lesson12(Web Design)

・お問い合わせフォームのデザインのインプット

課題

・異なるデザインサイトのデザインカンプ制作

学習内容詳細

  • デザインの原則について実践的に学ぶ(配色・あしらい・ジャンプ率)
  • Figmaの使い方について実践的に学ぶ(コンポーネント機能)
  • Webサイトの制作フローについて実践的に学ぶ(デザインカンプ)

Lesson13(Web Design)

・Figmaの使い方についてのインプット(共有モード・プロトタイプ機能・ステート機能)

課題

・異なるデザインサイトのお問い合わせフォーム制作

学習内容詳細

  • お問い合わせフォームの実践的なデザイン

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

料金プラン

スクール業界最安級の料金プラン

実戦プラン

547,800
  • TOMAPの教材
  • 質問対応
  • 修了試験フィードバック
  • デジタルバッジ贈呈

個別プラン

712,800
  • TOMAPの教材
  • 質問対応
  • 修了試験フィードバック
  • デジタルバッジ贈呈
  • 案件獲得サポート

自由だけど不安な、個の時代。
未来が見えにくい現代で戦うあなたへ。

選択肢が多いからこそ、何をするのか悩む。
今から何ができるのかと心配になる。
誰もが悩み、もがいている、今の時代。

人生は後戻りできないけれど、軌道を変えることはできる。
正しい道なのかわからなくても、前に進むことはできる。

一歩踏み出そうとする小さな意志が、
人生のターニングポイントになることもある。

社会を変えるほどの挑戦でなくとも、
自分を成長させるチャンスは誰にでもある。

理想の人生、自由な人生、憧れの人生。
何かをつかみ取ろうとする想いが少しでもある限り、
人生の可能性が閉ざされることはない。