Webサイトの設計図

Webサイトの設計図

02:12

Webサイトには、コーポレートサイト、サービスサイト、ECサイト、ブランディングサイト、採用・リクルートサイトなど、様々な種類があります。種類が違っても、同じ要素を使っていることもよくあります。 このセクションでは、コーポレートサイトの構成について説明しますので、Webサイトの基本構成を理解しましょう。 コーポレートサイトの基本構成 こちらの参考コーポレートサイトの構成について説明して...

サイトが公開されるまで

サイトが公開されるまで

01:54

Webデザインの実務レベルの要件定義から公開までの流れを説明します。 WEBサイト制作の流れ 企画・要件定義 目的の明確化サイトの目的やターゲットユーザーを明確にします。 要件の洗い出し必要な機能やコンテンツをリストアップします。 リサーチ・分析 競合分析競合サイトを分析し、webサイトの構成や装飾を学びます。 ユーザーリサーチターゲットユーザーのニーズや行動パターンを調査します...

Figma(フィグマ)とは

Figma(フィグマ)とは

01:03

Figmaは、無料で使えるWebデザインツールです。Webサイトの設計図である、デザインカンプの作成や、擬似的にWebサイトの動きを再現するプロトタイプなどを作成することができます。 Figmaで出来ること デザインカンプの作成デザインカンプは、Webサイトやアプリケーションの最終的な外観やインターフェースを具体的に示すために作成される静的な画像です。 プロトタイプの作成プロトタイプは、デ...

基礎学習から始める

初めてWebデザインを学習をするならこちらから!

Figma(フィグマ)とは

Figma(フィグマ)とは

01:03

Figmaは、無料で使えるWebデザインツールです。Webサイトの設計図である、デザインカンプの作成や、擬似的にWebサイトの動きを再現するプロトタイプなどを作成することができます。 Figmaで出来ること デザインカンプの作成デザイ...

Webデザイン > Figmaの使い方
VSCodeのインストール

VSCodeのインストール

01:58

今回は、Visual Studio Codeのインストールを行います。 Visual Studio Codeを使用する理由は利用率は非常に高いからです。Visual Studio Codeは、シンプルな使い勝手ながら、拡張機能を追加することで多機能になり、コードを書くときに便利な機能や...

コーディング > コーディング環境の準備
ボタンの作り方

ボタンの作り方

02:01

今回のステップでは複数パターンの基本的なボタンのコーディング方法について学んでいきます。 ボタンのコーディングは、STEP1からSTEP3までの段階で進めていきます。 ボタンのコーディング一般的なデザインのボタンをコーディングについて...

コーディング > パーツのコーディング
jQueryとは

jQueryとは

05:04

jQueryについて jQueryは、Webページに動的な動きやインタラクションを簡単に追加できる、人気のあるJavaScriptライブラリです。JavaScriptの機能を簡単に使えるようにまとめたツールで、コードを短く、シンプルに書けるように設計されています。...

コーディング > jQuery
ドメインとは

ドメインとは

01:58

ドメインの役割 ドメインとは、インターネット上でウェブサイトや電子メールサービスなどを識別するために使用される、人間にとって分かりやすい名前のことを指します。 サイトを公開するためには、この”名前”が必要になってきます。名前がな...

サイト公開 > ドメインの取得

デザイン制作ツール : Figma を学ぶ

画面のプロトタイプデザインを簡単に作り始めることができます!

Figma(フィグマ)とは

Figma(フィグマ)とは

01:03

Figmaは、無料で使えるWebデザインツールです。Webサイトの設計図である、デザインカンプの作成や、擬似的にWebサイトの動きを再現するプロトタイプなどを作成することができます。 Figmaで出来ること デザインカンプの作成デザイ...

Webデザイン > Figmaの使い方
Figmaの会員登録と初期設定

Figmaの会員登録と初期設定

00:46

Figmaを始めるためには会員登録と初期設定が必要になります。以下の手順でFigmaの利用準備を進めていきましょう。 Figma用アカウントを作成しよう Figmaのアカウントはメールアドレスとパスワードで簡単に作成することができます。Go...

Webデザイン > Figmaの使い方
Figmaのホーム画面の見方

Figmaのホーム画面の見方

02:06

今回は、Figmaのホーム画面の見方、その他の設定について説明します。 言語を日本語に変更する ホーム画面の説明の前にFigmaではデフォルトの言語が英語となっているので、必要に応じて言語を変更します。以下で日本語に変更する手順を説明し...

Webデザイン > Figmaの使い方
Figmaでバナーデザインのトレースに挑戦

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

02:39

トレースは、デザインのテクニックやコツを効率よく学ぶことができる学習方法です。目的としては、優れたデザインを模倣することでデザインスキルを向上させることです。 トレース学習の目的 デザインの基礎を理解するレイアウト、配色、タ...

Webデザイン > Webデザインの作り方

効率的なコーディング : Sass を学ぶ

Sassを使用することでコードの記述を効率化、軽量化しましょう!

Sassとは

Sassとは

04:26

Sassとは Sass(サス、サース)は Syntactically Awesome Stylesheetsといいます。CSSをより効率的に記述するためのメタ言語です。メタ言語とは、他の言語(この場合はCSS)を拡張し、より便利にするための言語を指します。Sassには、「Sa...

コーディング > Sassコーディング
Sassのインストール

Sassのインストール

04:42

Sassのインストール 今回は、Sassのインストールを行います。Sassにはいくつかの実装がありますが、その中からDart Sassをインストールします。 Dart Sassを使用する理由は、現在(2024年時点)の標準実装で、公式にサポートされている唯一の...

コーディング > Sassコーディング
Sassの書き方

Sassの書き方

02:35

「Sassとは?」のステップで、SassにはSass(インデント形式)とSCSS(波括弧形式)の2つの記述形式があると紹介しました。デザデジでは、CSSに近い記述ができるSCSS形式を採用しており、「Sassの書き方」以降のステップではSCSSを使って進めていきます。...

コーディング > Sassコーディング
ブラウザで表示

ブラウザで表示

01:58

Sassをコンパイルして、ブラウザに反映 このステップでは、Sassをコンパイルしてブラウザに反映させる方法について学びます。前ステップで学んだSCSSの基本的な書き方を活用し、実際にブラウザでその表示を確認してみましょう。 Sassをコンパ...

コーディング > Sassコーディング

KASOUで学ぶ

KASOUではWebデザインを始めるための
基礎学習を行えます。

人気の学習コンテンツ

  • Webサイトの設計図

    Webサイトの設計図

    02:12

    Webサイトには、コーポレートサイト、サービスサイト、ECサイト、ブランディングサイト、採用・リクルートサイトなど、様々な種類があります。種類が違っても、同じ要素を使っていることもよくあります。 このセクションでは、コーポレートサイトの...

    Webデザイン > Webデザインの基本
  • Figmaのホーム画面の見方

    Figmaのホーム画面の見方

    02:06

    今回は、Figmaのホーム画面の見方、その他の設定について説明します。 言語を日本語に変更する ホーム画面の説明の前にFigmaではデフォルトの言語が英語となっているので、必要に応じて言語を変更します。以下で日本語に変更する手順を説明し...

    Webデザイン > Figmaの使い方
  • バナーを作ってみよう!

    バナーを作ってみよう!

    04:03

    これまでFigmaの使い方の基礎を学んできました。この動画では、WebサイトやSNSで目を引くデザインを作る第一歩として、今回はFigmaを使ったバナー制作に挑戦してみましょう。 参考バナーのデザインを確認しよう まずは用意されたバナ...

    Webデザイン > Figmaで実践
  • Figmaでバナーデザインのトレースに挑戦

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

    02:39

    トレースは、デザインのテクニックやコツを効率よく学ぶことができる学習方法です。目的としては、優れたデザインを模倣することでデザインスキルを向上させることです。 トレース学習の目的 デザインの基礎を理解するレイアウト、配色、タ...

    Webデザイン > Webデザインの作り方
  • Webデザインを作ろう

    Webデザインを作ろう

    02:29

    Webデザインの制作は、複数のステップを踏むことでクオリティの高いウェブサイトを作成するプロセスです。 ここでは、Webサイトの制作に関わるワイヤーフレームとデザインカンプについて解説いたします。解説を元にワイヤーフレーム→デザインカンプ...

    Webデザイン > Webデザインの作り方