会員限定サイトが公開されるまで

Webデザインの実務レベルの要件定義から公開までの流れを説明します。 WEBサイト制作の流れ 企画・要件定義 目的の明確化サイトの目的やターゲットユーザーを明確にします。 要件...

会員限定デザインファイルの構成を知る

Figmaのデザインファイルについて説明していきます。 ファイルの構成 Figmaのデザインファイルは、ウェブサイトやアプリのデザインを作成・管理するためのものです。以下に主な要素を紹介し...

会員限定各種ツールの使い方

今回は、Figmaのさまざまなツールの使い方について説明していきます。 ツールバーについて ツールバーは、デザイン作業においてよく使用されるツールが並んでいます。例えば、選択ツール、ペンツ...

会員限定シェイプの配置とスタイル

今回は、シェイプツールの使い方とスタイルの変更について説明していきます。 シェイプの作成 シェイプツールを選択長方形の横のドロップダウンをクリックすると各シェイプツールが表示されるので、...

会員限定テキストの配置とスタイル

今回は、テキストレイヤーの作成方法、そのコンテンツの変更、そしてテキストレイヤーのサイズ調整について説明していきます。 テキストの作成 テキストレイヤーを新たに作成する場合、2つの方法があ...

会員限定ページとフレーム

今回は、デザインファイルの構造を整理し、効率的に進めるための基盤となるページとフレームについて説明していきます。 ページの概要 ページをは複数作成し、異なるページごとに整理できます。例えば...

会員限定オートレイアウト

今回は、ボタンやカードなどの要素を規則的に並べるレイアウトを簡単に作成できる機能のオートレイアウトについて説明します。 要素をオートレイアウト化する オートレイアウトフレームを作成する ...

会員限定コンポーネント

Figmaのコンポーネント機能は、デザインパーツを効率的に管理・更新できる便利な機能です。ボタンやカードなどのパーツをコンポーネントとして作成しておけば、色やサイズを変更したり、新しいバリエーションを...

会員限定書き出し

Figmaでは、作成したデザインを様々な形式で書き出すことができます。書き出し形式としては、PNG、JPEG、SVG、PDFなどが一般的です。 書き出し方法は、以下の手順で行います。 デザ...

会員限定共有

Figmaは、複数のユーザーが同時に同じデザインファイルを編集できるリアルタイムコラボレーション機能を提供します。これにより、デザイナー、開発者、クライアントなどがリアルタイムでフィードバックを共有し...

会員限定プロトタイプ

Figmaのプロトタイプ機能を使って、実際の動きに近いデザインをシミュレートすることができます。ここでは、フレーム間の遷移とボタンのホバーアニメーションの作り方について説明します。 フレーム間の...

会員限定ケースのWebデザイン制作に挑戦!

これまでのステップで、Figmaの使い方やデザイン作成の概要などの基礎知識を学んできました。このステップからは、デザイン制作に挑戦していきます。 「デザイン制作ってどうやるの？」と思うかもしれな...

会員限定VSCodeの基本操作

今回は、Visual Studio Codeの画面レイアウトについて説明していきます。 Visual Studio Codeの画面レイアウトは、下記の画像のように大きく5つの部分に分かれます。 ...

会員限定プロジェクトファイルの作成

今回は、Visual Studio Code内でのプロジェクタフォルダの読み込み、プロジェクトファイルを作成・編集/保存・削除について説明していきます。 プロジェクトファイルの作成 Vis...

会員限定推奨する環境設定

今回は、デザデジが推奨するVisual Studio Codeの環境設定について説明していきます。※こちらの環境設定を必ずしも行う必要はありません。 推奨する基本設定 インデント幅の変更 ...

会員限定コピーライトとは

コピーライト（Copyright）は、著作権のことです。著作権とは、ある作品を創作した者に与えられる法的権利であり、その作品を無断で他人が使用することを制限します。 Webサイトにおけるコピーラ...

会員限定基本のプロパティを覚える1

CSSのコーディングにおいて、よく使われるプロパティがあります。今回は、そんな基本のプロパティについて説明していきます。 装飾に関するプロパティ フォントに関するプロパティ フォント...

会員限定基本のプロパティを覚える2

前回の「基本のプロパティを覚える1」に続きで、今回はCSSのコーディングでよく使われるレイアウトに関するプロパティ、flexとgridについて詳しく説明していきます。 flexとgridは、di...

会員限定classとは

classとは、HTMLのタグの中に設定することができる属性の一つです。主に、タグを一つのグループにまとめ共通のクラス名を与えることができます。 classを使うことで、同じスタイルを複数の要素...

会員限定リセットCSS

リセットCSSは、ブラウザが持つデフォルトのスタイルを完全にリセットまたは初期化するためのCSSです。異なるブラウザやデバイスでの表示の違いを解決するために使われ、全ての要素が同じ基準で表示されるよう...

会員限定ボタンの作り方

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

会員限定開発モードの活用

開発モードとは Figma開発モードとは、デザインの各要素をコードに変換し、開発者がそのコードを直接使用できる機能です。具体的には、デザインプロパティ（色、フォント、間隔、サイズなど）をCSSや...

会員限定Webデザインの模写コーディングに挑戦

これまでのステップで、コーディングの基礎知識を学んできました。このステップからは、模写コーディングに挑戦していきます。 「模写コーディングってどうやるの？」と思うかもしれないので、まずは課題サイ...

会員限定headerのコーディング解説

コーディングの準備 コーディング課題一覧からコーディング課題No.001を選択し、デザインファイルの表示してください。また、Visual Studio Codeを開いてコーディングできる準備をし...

会員限定bodyのコーディング解説

このステップではコーディング課題No.001のbodyのコーディング解説を行います。 コーディング解説 課題No.001のbody部分ですが、合計5つのセクションから構成されています。この...

会員限定footerのコーディング解説

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

会員限定レスポンシブとは

レスポンシブとは「レスポンシブWEBデザイン」の略語で、異なるデバイス（PC、タブレット、スマートフォンなど）でWebサイトが適切に表示されるようにするデザイン手法のことです。 画面サイズに応じ...

会員限定メディアクエリ

メディアクエリとは、CSSの記述においてWebページのデザインを異なるデバイスや画面サイズに合わせて調整するための方法です。 簡単に言うと、メディアクエリを使うと、スマホ、タブレット、デスクトッ...

会員限定Chromeの開発モード

Chromeの開発モードとは Google Chromeにデフォルトで搭載されている開発者向けの検証ツールです。 HTMLやCSSなどからレイアウト崩れの原因の特定や、ページ改修前後の検証...

会員限定Sassとは

Sassとは Sass（サス、サース）は Syntactically Awesome Stylesheetsといいます。CSSをより効率的に記述するためのメタ言語です。メタ言語とは、他の言語（...

会員限定ターミナルについて

ターミナルとは ターミナルは、Macをコマンド（命令文）で操作するツールです。通常はアイコンやメニューで操作しますが、ターミナルでは文字を使って直接指示を出します。プログラミングやシステム設定...

会員限定Sassのインストール

Sassのインストール 今回は、Sassのインストールを行います。Sassにはいくつかの実装がありますが、その中からDart Sassをインストールします。 Dart Sassを使用する理...

会員限定Sassの書き方

「Sassとは？」のステップで、SassにはSass（インデント形式）とSCSS（波括弧形式）の2つの記述形式があると紹介しました。デザデジでは、CSSに近い記述ができるSCSS形式を採用しており、「...

会員限定ブラウザで表示

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

会員限定変数

本ステップでは、ネスト、変数、演算、ミックスインなどのSCSSの追加機能を解説します。これらの機能を活用することで、コーディングの効率化やデザインの一貫性を向上させ、より洗練されたコードを書くことがで...

会員限定@mixin / @include

@mixin/@includeについて @mixinと@includeはSCSSでコード再利用を効率化する機能です。@mixinでスタイルを定義し、@includeで適用することで、重複を減らし...

会員限定@extend

@extendとは？ @extendは、スタイルの重複を避けコードを効率的に再利用できるようにするために使用されます。簡単に言うと、あるスタイルを別のスタイルに「引き継がせる」ことができる機能で...

会員限定演算

演算とは？ 演算とは、数値やその他のデータに対して計算を行うことを指します。Sassでは、演算を使用して、数値や色を計算したり、動的に値を設定したりすることができます。これにより、スタイルシート...

会員限定jQueryの書き方

jQueryの書き方について jQueryには、決まった記述方法（基本構文）があります。この基本構文を理解することで、jQueryのコードを効果的に記述できるようになります。 jQuery...

会員限定実用的なjQueryのコーディング

今回のステップでは、実用的でよく使われる jQuery のコーディングを2つ説明します。
これらはWebサイトをコーディングする上で頻繁に使われるため、しっかりと学んでいきましょう。 ハンバー...

会員限定slick slider

この「jQueryプラグイン」のレッスンでは、実際によく利用されるjQueryプラグインについて学びます。 プラグインについて プラグインとは、特定の機能を簡単に追加できるプログラムのこと...

会員限定サーバーにWordPressをインストール

WordPressをサーバーにインストールする方法 今回は、WordPressをサーバーにインストールする方法を解説します。実際の業務でもよく利用される方法なので、しっかり理解しておきましょう。...

会員限定管理画面の使い方

今回は、WordPressの管理画面のレイアウトについて解説します。各エリアの役割やメインナビゲーションの各項目を理解し、効率よく操作できるようになりましょう。 管理画面の基本レイアウト ...

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

今回は、WordPressのフォルダ構成とオリジナルテーマの作り方について解説します。 WordPressはテーマや機能を動かすために、さまざまなファイルやフォルダで構成されています。特にテーマ...

会員限定ドメインの取得方法

このステップでは独自ドメインの取得方法について説明していきます。 独自ドメインは自分で好きな文字列を指定して利用できるドメインとなっており、世界に１つだけ...

会員限定レンタルサーバーの契約

有料レンタルサーバーの契約方法 有料レンタルサーバーの契約方法について説明していきます。※有料レンタルサーバーの契約方法についての説明はエックスサーバーで...

会員限定ドメインとサーバーを繋ぐ

これまで独自ドメインの取得とサーバーの契約について説明しましたが、それだけではWebサイトは機能しません。取得したドメインでWebサイトを運営するためにはサーバ...

会員限定サイトデータのアップロード

前回のステップでサーバーの設定を行いました。このステップでは、サイトを公開するために、サイトデータをアップロードしていきます。 サイトデータをにアップロー...

会員限定サイト公開後の運用

公開したサイトの変更方法 公開したサイトの変更方法は2つあります。どちらの方法も、サイトデータのアップロードで説明した手順を使って、変更内容を更新します。...