Figma(フィグマ)とは

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

Figmaの会員登録と初期設定

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

Figmaのホーム画面の見方

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

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

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

Sassとは

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

Sassのインストール

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

Sassの書き方

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

ブラウザで表示

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