CONTENTS
現場で役立つWeb制作力を、ゼロから学習できる。独学の限界を超える、段階別カリキュラム | Webtraining　- Webトレは、 初心者から実務までのWeb学習トレーニング

ONLINE WEB TRAINING

デザインからコードへ。 できることを、少しずつ増やす。

FigmaからHTML・CSS・WordPressまで。
「コードは難しそう」と感じる方にも、Web制作の基礎から実践まで順番に学べる教材を用意しています。
デザインにコードの知識をプラスして、仕事や副業につながる「作れる力」を身につけていきましょう。

講座を見る
タイピング練習 基礎テスト
  • 基礎から実践まで
  • 自分のペースで学習
  • 無料教材を公開

FREE LEARNING TOOLS

無料で使える学習ツール

Web制作の基礎学習、コード入力の練習、理解度チェックから、次のステップとなる生成AI活用まで学べます。

Web制作レッスン

HTML、CSS、JavaScript、PHPなどを基礎から順番に学べます。

レッスンを見る

タイピング練習

HTML/CSS/JavaScript/PHPなどのコード入力に慣れるためのタイピング練習です。

タイピング練習を開く

Web制作 基礎テスト

HTML/CSSの基礎理解をステップごとに確認できるテストサイトです。

基礎テストを受ける

生成AIを学ぶ

ChatGPTなどの生成AIの基礎から、安全な使い方、仕事やWeb制作での活用方法まで学べます。

AI学習サイトを開く

COURSES

学びたい講座を選ぶ

Webデザインの設計から、HTML・CSS、Design to Code、JavaScript、WordPress、PHPまで。
基礎から実践へ、自分の目的に合わせて必要な講座を選んで学べます。

どこから始めるか迷った方は、Figma・HTML・CSSなどの基礎講座から順番に進めてみましょう。

Figma 基礎・実践で、設計からプロトタイプまで学習 HTML Webページの構造をつくる基本 CSS レイアウトとデザインを実装 PRACTICE Design to Code デザインを見て、HTML/CSSで形にする5STEPの実践講座 JavaScript ページに動きと仕組みを追加 WordPress テーマ制作とサイト運用を実践 PHP フォームやデータ処理を学習 Bootstrap フレームワークを使った制作
すべてのレッスンを見る

FEATURES

WebTrainingの特徴

初めての内容にも、安心して取り組める学習環境を用意しています。

基礎からひとつずつ

用語や操作を飛ばさず、図解や実例を使いながら段階的に進めます。

作りながら身につける

読むだけではなく、FigmaやHTML/CSSを実際に使いながらWebページを制作します。

自分のペースで進められる

必要な講座から選び、分からないところは戻りながら何度でも学習できます。

CHOOSE YOUR GOAL

学習目的から選ぶ

作りたいものや、これから広げたい力に合わせて選べます。

ノートパソコンでフロントエンドの画面を制作する様子

デザインからコードへ進みたい

Figma、HTML、CSSの基礎を順番に学んだあと、Design to Codeで制作の流れを実践します。

  • Figma
  • HTML
  • CSS
  • Design to Code
コースを見る
コード画面を見ながらバックエンドを開発する様子

Webサイトの仕組みを学びたい

PHP・フォーム処理・データベース連携から、WordPressテーマ化までWebサイトの裏側を学びます。

  • PHP
  • データベース
  • WordPress
コースを見る
複数の制作画面を使ってWebサイト全体を開発する様子

Web制作の全体を理解したい

デザインから実装、サーバー処理、WordPressまで、Webサイト制作の流れを通して学びます。

  • Figma
  • JavaScript
  • PHP
  • WordPress
コースを見る

LEARNING ROADMAP

おすすめの学習順

デザインから始めたい方はFigmaから。コードから始めたい方はHTMLからでも進められます。

  1. STEP 1

    Figmaで設計・デザインを知る

    画面の組み立て方やデザインの考え方に触れ、制作のイメージをつかみます。

    講座を見る
  2. STEP 2

    HTMLでページの構造を作る

    見出しや文章、画像を正しく組み立て、Webページの土台を作ります。

    講座を見る
  3. STEP 3

    CSSでデザインを形にする

    レイアウト、余白、文字組みを整え、デザインをページに反映します。

    講座を見る
  4. STEP 4

    Design to Codeで通して練習

    デザインを見ながら、HTML/CSSでページを形にする流れを実践します。

    講座を見る
  5. STEP 5

    JavaScript・WordPressへ進む

    ページの動きや更新の仕組みを学び、必要に応じてPHP・データベースにも進めます。

    講座を見る

CREATIVE CHALLENGE

制作チャレンジ

順次準備中

学んだ内容を使って、実際の制作に挑戦できる課題を準備しています。
HTML/CSSの基礎テストやタイピング練習で力をつけながら、公開までお待ちください。

入門編
入門編のHTML・CSS制作課題の完成イメージ

HTML・CSSの基礎を確認

ページ構造や基本スタイルを理解し、シンプルなWebページ制作に挑戦します。

近日公開予定
初級編
初級編のWebデザイン再現課題の完成イメージ

デザインを忠実に再現

レイアウト・余白・文字組みを意識し、デザインカンプの再現に挑戦します。

近日公開予定
中級編
中級編の設計を意識したWeb制作課題の完成イメージ

設計を意識して実装

クラス設計や再利用性を考え、保守しやすいHTML・CSSを構築します。

近日公開予定

FREE TOOLS

制作を助ける便利ツール

制作練習や確認作業に使えるコンテンツをまとめました。

Web制作ジェネレーター

制作の練習や確認に使えるジェネレーターサイト「kobeya.com」の活用方法を紹介します。

詳しく見る

WordPress関数一覧

テーマ制作やカスタマイズで使う基本的なWordPress関数を確認できます。

詳しく見る

LATEST ARTICLES

新着記事

学習のヒントやWeb制作に関する情報を更新しています。

記事一覧を見る

CONTACT

学習・制作について相談する

トレーニングサポート、教材制作、企業研修などのご相談を受け付けています。

お問い合わせへ