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

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

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

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

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

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

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

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

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

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

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

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

会員限定コンポーネント

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

会員限定書き出し

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

会員限定共有

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

会員限定プロトタイプ

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

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

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

会員限定VSCodeの基本操作

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

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

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

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

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

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

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

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

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

会員限定classとは

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

会員限定リセットCSS

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

会員限定ボタンの作り方

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

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

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

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

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

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

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

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

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

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

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

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

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

会員限定メディアクエリ

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

会員限定Chromeの開発モード

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

会員限定変数

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

会員限定@mixin / @include

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

会員限定@extend

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

会員限定演算

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

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

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

会員限定slick slider

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

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

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

会員限定テンプレートファイルの分割

今回は、前回のステップで作成したオリジナルテーマをさらに整理して使いやすくする方法を解説します。 WordPressでは、ヘッダーやフッターなどの共通パーツをテンプレートファイルとして分...

会員限定固定ページ (page.php)

固定ページとは 固定ページとは、更新頻度が低く、内容が固定されたページを作る機能のことです。主に、下層ページなどの静的なコンテンツを表示するのに適しています。 使用例： ...

会員限定固定ページの作り方

今回は、カスタムテンプレートを使って特定のデザインや機能を持った固定ページを作成する方法について解説します。この方法を使えば、今まで学習してきたHTMLとCSSでコーディングができるので、普段通りの感...

会員限定投稿タイプ

投稿タイプとは 投稿タイプは、コンテンツ（記事）の作成・編集・公開を行うための機能で、主にブログやお知らせなど、時系列で新しいコンテンツを発信する際に利用されます。 作成し...

会員限定投稿一覧の作り方

今回は、WordPressで「投稿一覧ページ」を作る方法について解説します。この方法を使えば、WordPressの管理画面から投稿した記事をサイト上で一覧表示できるようになります。 投稿...

会員限定投稿詳細の作り方

今回は、WordPressで「投稿の詳細ページ」を作成する方法を解説します。この方法を使えば、投稿詳細ページを表示するためのテンプレートファイル（single.php）ひとつで、複数の投稿記事を自動的...

会員限定カテゴリーとタグ

今回は、WordPressで「カテゴリー」と「タグ」を設定・表示する方法を解説します。この方法を使えば、投稿記事にカテゴリーやタグを付けられるようになり、また分類ごとに記事を絞り込んで表示することがで...

会員限定検索機能

今回は、WordPressの検索機能について解説します。この方法を使えば、WordPressを使用したサイト上でキーワード検索が可能となり記事や固定ページを検索することができるようになります。 ...

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

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

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

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

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

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

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

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

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

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