DesignerSchool

Webデザイナーの実践的なスキルは基礎の定着から!
動画で基礎学習を始めよう。
受講生は上限なしでデザイナーに添削依頼もできちゃう!!

02:09

03:45

02:01

Webデザイン

コーディング

サイト公開

Webデザインの基本

全 2 動画

Webサイトの設計図

02:12

Webサイトには、コーポレートサイト、サービスサイト、ECサイト…

サイトが公開されるまで

01:54

Webデザインの実務レベルの要件定義から公開までの流れを説明し…

Figmaの使い方

全 14 動画

Figma(フィグマ)とは

01:03

Figmaは、無料で使えるWebデザインツールです。Webサイトの設計…

Figmaのインストールと初期設定

00:46

Figmaを始めるためには会員登録と初期設定が必要になります。以…

Figmaのホーム画面の見方

02:06

今回は、Figmaのホーム画面の見方、その他の設定について説明し…

デザインファイルを作る

00:50

今回は、デザインファイルの作成について説明します。 …

デザインファイルの構成を知る

01:49

Figmaのデザインファイルについて説明していきます。フ…

会員限定

各種ツールの使い方

04:57

今回は、Figmaのさまざまなツールの使い方について説明していき…

会員限定

Webデザインの作り方

全 3 動画

Webデザインを作ろう

02:29

Webデザインの制作は、複数のステップを踏むことでクオリティの…

Figmaでバナーデザインのトレースに挑戦

02:39

トレースは、デザインのテクニックやコツを効率よく学ぶことが…

ギャラリーサイトの活用

02:27

デザインがうまくいかない、またはいいアイデアが思い浮かばな…

Figmaで実践

全 2 動画

バナーを作ってみよう!

04:03

これまでFigmaの使い方の基礎を学んできました。この動画では、…

コンポーネント / オートレイアウトでテーブルを作ろう!

03:55

Webデザインにおいて「テーブル」は料金表や比較表、管理画面な…

デザイン制作課題

全 1 動画

ケースのWebデザイン制作に挑戦!

03:10

これまでのステップで、Figmaの使い方やデザイン作成の概要など…

会員限定

コーディング環境の準備

全 6 動画

コーディングとは？

02:21

コーディングは、デザインしたWebサイトをコンピューターが理解…

GoogleChromeのインストール

01:42

今回は、Google Chromeのインストールを行います。 Google C…

VSCodeのインストール

01:58

今回は、Visual Studio Codeのインストールを行います。 Vis…

VSCodeの基本操作

03:20

今回は、Visual Studio Codeの画面レイアウトについて説明して…

会員限定

プロジェクトファイルの作成

03:03

今回は、Visual Studio Code内でのプロジェクタフォルダの読み…

会員限定

推奨する環境設定

02:06

今回は、デザデジが推奨するVisual Studio Codeの環境設定につ…

会員限定

HTMLの基本

全 4 動画

テキストやタグを書いてブラウザで表示

02:21

このステップでは、HTMLをブラウザで表示する方法について学ん…

宣言文の記述から、headタグなど

04:36

HTMLとは HTMLはHyperText Markup Languageと…

頻出のタグ説明

05:39

HTMLのコーディングにおいて、頻繁に使用されるタグがあります…

コピーライトとは

02:43

コピーライト（Copyright）は、著作権のことです。著作権とは、…

CSSの基本

全 6 動画

CSSの書き方

03:45

CSSとは CSSはCascading Style Sheetsといいます。Webサイ…

ブラウザで表示

01:23

外部CSSファイルで読み込み、ブラウザに反映このステップで…

基本のプロパティを覚える1

08:03

CSSのコーディングにおいて、よく使われるプロパティがあります…

会員限定

基本のプロパティを覚える2

03:24

前回の「基本のプロパティを覚える1」に続きで、今回はCSSのコ…

会員限定

classとは

02:06

classとは、HTMLのタグの中に設定することができる属性の一つで…

会員限定

リセットCSS

01:16

リセットCSSは、ブラウザが持つデフォルトのスタイルを完全にリ…

会員限定

パーツのコーディング

全 2 動画

ボタンの作り方

02:01

今回のステップでは複数パターンの基本的なボタンのコーディン…

会員限定

開発モードの活用

02:16

開発モードとは Figma開発モードとは、デザインの各要素…

会員限定

コーディング実践

全 7 動画

Webデザインの模写コーディングに挑戦

03:12

これまでのステップで、コーディングの基礎知識を学んできまし…

会員限定

headerのコーディング解説

03:22

コーディングの準備コーディング課題一覧からコーディ…

会員限定

bodyのコーディング解説

06:36

このステップではコーディング課題No.001のbodyのコーディング…

会員限定

footerのコーディング解説

03:26

このステップではコーディング課題No.001のfooterのコーディン…

会員限定

レスポンシブとは

02:34

レスポンシブとは「レスポンシブWEBデザイン」の略語で、異なる…

会員限定

メディアクエリ

04:15

メディアクエリとは、CSSの記述においてWebページのデザインを…

会員限定

Sassコーディング

全 9 動画

Sassとは

04:26

Sassとは Sass（サス、サース）は Syntactica…

ターミナルについて

05:08

ターミナルとはターミナルは、Macをコマンド…

Sassのインストール

04:42

Sassのインストール今回は、Sassのインストールを行い…

Sassの書き方

02:35

「Sassとは？」のステップで、SassにはSass（インデント形式）…

ブラウザで表示

01:58

Sassをコンパイルして、ブラウザに反映このステップで…

変数

03:38

本ステップでは、ネスト、変数、演算、ミックスインなどのSCSS…

会員限定

jQuery

全 4 動画

jQueryとは

05:04

jQueryについて jQueryは、Webページに動的な動きやインタ…

jQueryの書き方

05:03

jQueryの書き方について jQueryには、決まった記述方法…

実用的なjQueryのコーディング

04:19

今回のステップでは、実用的でよく使われる jQuery のコーディ…

会員限定

slick slider

06:46

この「jQueryプラグイン」のレッスンでは、実際によく利用され…

会員限定

WordPress

全 13 動画

WordPressのダウンロード

05:58

WordPressとは WordPress（ワードプレス）は、無料で利用で…

サーバーにWordPressをインストール

05:46

WordPressをサーバーにインストールする方法今回は、Wo…

管理画面の使い方

03:41

今回は、WordPressの管理画面のレイアウトについて解説します。…

フォルダ構成とオリジナルテーマの作り方

07:20

今回は、WordPressのフォルダ構成とオリジナルテーマの作り方に…

会員限定

テンプレートファイルの分割

04:55

今回は、前回のステップで作成したオリジナルテーマをさらに整…

会員限定

固定ページ (page.php)

04:40

固定ページとは固定ページとは、更新頻度が低く、内容…

会員限定

ドメインの取得

全 2 動画

ドメインとは

01:58

ドメインの役割ドメインとは、インターネット上でウェ…

ドメインの取得方法

03:18

このステップでは独自ドメインの取得方法について説明していき…

会員限定

サーバー

全 5 動画

サーバーとは

02:54

一般的にWEBを制作する際のサーバーとはソフトウェアとしてのウ…

レンタルサーバーの契約

03:42

有料レンタルサーバーの契約方法有料レンタルサーバー…

会員限定

ドメインとサーバーを繋ぐ

01:22

これまで独自ドメインの取得とサーバーの契約について説明しま…

会員限定

サイトデータのアップロード

05:38

前回のステップでサーバーの設定を行いました。このステップで…

会員限定

サイト公開後の運用

02:09

公開したサイトの変更方法公開したサイトの変更方法は2…

会員限定