DesignerSchool

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

02:12

01:54

01:03

Webデザイン

コーディング

サイト公開

Webデザインの基本

全 2 動画

Webサイトの設計図

02:12

Webサイトには、コーポレートサイト、サービスサイト、ECサイト、ブランディングサイ...

サイトが公開されるまで

01:54

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

Figmaの使い方

全 14 動画

Figma(フィグマ)とは

01:03

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

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

00:46

Figmaを始めるためには会員登録と初期設定が必要になります。以下の手順でFigmaの利...

Figmaのホーム画面の見方

02:06

今回は、Figmaのホーム画面の見方、その他の設定について説明します。言語...

デザインファイルを作る

00:50

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

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

01:49

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

会員限定

各種ツールの使い方

04:57

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

会員限定

Figmaで実践

全 2 動画

バナーを作ってみよう!

04:03

これまでFigmaの使い方の基礎を学んできました。この動画では、WebサイトやSNSで目...

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

03:55

Webデザインにおいて「テーブル」は料金表や比較表、管理画面など幅広い場面で使わ...

Webデザインの作り方

全 3 動画

Webデザインを作ろう

02:29

Webデザインの制作は、複数のステップを踏むことでクオリティの高いウェブサイトを...

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

02:39

トレースは、デザインのテクニックやコツを効率よく学ぶことができる学習方法です。...

ギャラリーサイトの活用

02:27

デザインがうまくいかない、またはいいアイデアが思い浮かばないというのは、誰もが...

デザイン制作課題

全 1 動画

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

03:10

これまでのステップで、Figmaの使い方やデザイン作成の概要などの基礎知識を学んで...

会員限定

コーディング環境の準備

全 6 動画

コーディングとは？

02:21

コーディングは、デザインしたWebサイトをコンピューターが理解できる言語に変換す...

GoogleChromeのインストール

01:42

今回は、Google Chromeのインストールを行います。 Google Chromeを使用する理由...

VSCodeのインストール

01:58

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

VSCodeの基本操作

03:20

今回は、Visual Studio Codeの画面レイアウトについて説明していきます。 Vi...

会員限定

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

03:03

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

会員限定

推奨する環境設定

02:06

今回は、デザデジが推奨するVisual Studio Codeの環境設定について説明していきます...

会員限定

HTMLの基本

全 4 動画

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

02:21

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

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

04:36

HTMLとは HTMLはHyperText Markup Languageといいます。Webサイト...

頻出のタグ説明

05:39

HTMLのコーディングにおいて、頻繁に使用されるタグがあります。今回は、そんな頻出...

コピーライトとは

02:43

コピーライト（Copyright）は、著作権のことです。著作権とは、ある作品を創作した...

CSSの基本

全 6 動画

CSSの書き方

03:45

CSSとは CSSはCascading Style Sheetsといいます。Webサイトの見た目をデザイン...

ブラウザで表示

01:23

外部CSSファイルで読み込み、ブラウザに反映このステップでは、外部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

コーディングの準備コーディング課題一覧からコーディング課題No.001を選択...

会員限定

bodyのコーディング解説

06:36

このステップではコーディング課題No.001のbodyのコーディング解説を行います。...

会員限定

footerのコーディング解説

03:26

このステップではコーディング課題No.001のfooterのコーディング解説を行います。コ...

会員限定

レスポンシブとは

02:34

レスポンシブとは「レスポンシブWEBデザイン」の略語で、異なるデバイス（PC、タブレ...

会員限定

メディアクエリ

04:15

メディアクエリとは、CSSの記述においてWebページのデザインを異なるデバイスや画面...

会員限定

Sassコーディング

全 9 動画

Sassとは

04:26

Sassとは Sass（サス、サース）は Syntactically Awesome Stylesh...

ターミナルについて

05:08

ターミナルとはターミナルは、Macをコマンド（命令文）で操作す...

Sassのインストール

04:42

Sassのインストール今回は、Sassのインストールを行います。Sassにはいくつ...

Sassの書き方

02:35

「Sassとは？」のステップで、SassにはSass（インデント形式）とSCSS（波括弧形式）...

ブラウザで表示

01:58

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

変数

03:38

本ステップでは、ネスト、変数、演算、ミックスインなどのSCSSの追加機能を解説しま...

会員限定

jQuery

全 4 動画

jQueryとは

05:04

jQueryについて jQueryは、Webページに動的な動きやインタラクションを簡単に追...

jQueryの書き方

05:03

jQueryの書き方について jQueryには、決まった記述方法（基本構文）がありま...

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

04:19

今回のステップでは、実用的でよく使われる jQuery のコーディングを2つ説明します。...

会員限定

slick slider

06:46

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

会員限定

WordPress

全 13 動画

WordPressのダウンロード

05:58

WordPressとは WordPress（ワードプレス）は、無料で利用できるオープンソースの...

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

05:46

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

管理画面の使い方

03:41

今回は、WordPressの管理画面のレイアウトについて解説します。各エリアの役割やメ...

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

07:20

今回は、WordPressのフォルダ構成とオリジナルテーマの作り方について解説します。...

会員限定

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

04:55

今回は、前回のステップで作成したオリジナルテーマをさらに整理して使いやすくする...

会員限定

固定ページ (page.php)

04:40

固定ページとは固定ページとは、更新頻度が低く、内容が固定されたページを...

会員限定

ドメインの取得

全 2 動画

ドメインとは

01:58

ドメインの役割ドメインとは、インターネット上でウェブサイトや電子メール...

ドメインの取得方法

03:18

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

会員限定

サーバー

全 5 動画

サーバーとは

02:54

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

レンタルサーバーの契約

03:42

有料レンタルサーバーの契約方法有料レンタルサーバーの契約方法について説...

会員限定

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

01:22

これまで独自ドメインの取得とサーバーの契約について説明しましたが、それだけではW...

会員限定

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

05:38

前回のステップでサーバーの設定を行いました。このステップでは、サイトを公開する...

会員限定

サイト公開後の運用

02:09

公開したサイトの変更方法公開したサイトの変更方法は2つあります。どちら...

会員限定