学習ロードマップ

UX/UIデザイン 入門ロードマップ

デザインツール Figma の基礎から、手を動かす実践、Web・UIデザイン、HTML/CSSとの実装連携、UXの原則までを読む順序で並べた UX/UI デザインの入門ロードマップ。

デザインの学校 これからはじめるFigmaの本 作って学ぶFigma入門[完全版] ステップ・バイ・ステップで身につくWeb/UIデザインの基本 これからはじめるFigma Web・UIデザイン入門 ゼロからはじめてプロになる HTML/CSS&伝わるWebデザイン UXデザインの法則 第2版 : 最高のプロダクトとサービスを支える心理学
SCROLL TO BEGIN

このロードマップが扱うもの

UX/UI使 Figma WebUIHTML/CSS UX 使

このロードマップの全体像

UX/UIデザインは、ツールの操作・画面づくり・使いやすさの原則を順に身につけるのが近道です。まず Figma の基礎と実践で手を動かし、Web・UIデザインの作法、HTML/CSSとの連携を学び、最後に UX の原則で「なぜ使いやすいか」を理解する構成です。

ロードマップ

5 つのステップで読み進める

  1. 01
    ステップ 01 Figma の基礎をつかむ
    デザインの学校 これからはじめるFigmaの本
  2. 02
    ステップ 02 作って学ぶ Figma 入門
    作って学ぶFigma入門[完全版] ステップ・バイ・ステップで身につくWeb/UIデザインの基本
  3. 03
    ステップ 03 Web・UIデザインへ広げる
    これからはじめるFigma Web・UIデザイン入門
  4. 04
    ステップ 04 Web制作の実装とつなぐ
    ゼロからはじめてプロになる HTML/CSS&伝わるWebデザイン
  5. 05
    ステップ 05 UXの原則で仕上げる
    UXデザインの法則 第2版 : 最高のプロダクトとサービスを支える心理学

第 1 章

Figma の基礎をつかむ

  1. Figma の基礎をつかむ

    デザインツール Figma の基礎をはじめから学ぶ。

    デザインの学校 これからはじめるFigmaの本
    この章の 1 冊 デザインの学校 これからはじめるFigmaの本

    Web版Figmaでモックアップとプロトタイプを一から完成させる

    この本で身につくこと
    • Figmaの無料Web版でアカウント作成からインターフェース操作まで迷わず始められる
    • ロゴ・バナー・ページレイアウトを段階的に作り上げ、一連のデザイン制作フローを体得できる
    • 色スタイルとフォントスタイルをルールとして登録し、デザインの一貫性を保つ方法を習得できる
    • コンポーネント化とバリアントを活用してボタンの状態変化を効率的に管理できる

    想定読者: Figmaをまったく触ったことがない非デザイナー職(エンジニア・ディレクター等)や、デザイン学習を始めたい学生

    本の詳細を見る →
  2. 作って学ぶ Figma 入門

    手を動かしながら Figma の実践的な使い方を身につける。

    作って学ぶFigma入門[完全版] ステップ・バイ・ステップで身につくWeb/UIデザインの基本
    この章の 1 冊 作って学ぶFigma入門[完全版] ステップ・バイ・ステップで身につくWeb/UIデザインの基本

    Figmaを使ったWeb/UIデザインをハンズオン形式で一通り習得する

    この本で身につくこと
    • オートレイアウト・コンポーネント・スタイル・バリアブルといったFigma固有の機能を実際のファイル操作を通じて理解できる
    • スマートフォン画面からレスポンシブなデスクトップ画面まで、実務で使われる制作フローを一通り体験できる
    • ハンバーガーメニューやカルーセルなど、現場で頻出するUIパターンをFigmaで実装する方法を習得できる
    • プロトタイプ機能を使ったページ遷移・オーバーレイ・アニメーションの設定ができるようになる

    想定読者: Webデザイナーを目指す学生・社会人、および制作会社に入ったばかりの新人デザイナー。Figmaをはじめて触る段階から、レスポンシブ対応やインタラクティブUIまで一貫して学びたい人。

    本の詳細を見る →
  3. Web・UIデザインへ広げる

    Figma で Web・UI デザインの作法を学ぶ。

    これからはじめるFigma Web・UIデザイン入門
    この章の 1 冊 これからはじめるFigma Web・UIデザイン入門

    Figmaをハンズオンで学びWebデザイン制作の流れを身につける

    この本で身につくこと
    • Figmaのアカウント作成から基本インターフェイス・ファイル構成まで一通り設定できる
    • コンポーネント・オートレイアウト・スタイルを使ってデザインシステムの土台を作れる
    • ポートフォリオサイトを題材にフレーム・色スタイル・テキストスタイル・ボタンを段階的に構築できる
    • コーポレートサイト・ECサイト・レシピアプリの3種類の作例からジャンル別のデザイン制作の流れを把握できる

    想定読者: Figmaをこれから使い始めるデザイナー志望者・非デザイナー職のWebプロジェクト参加者。日本語UIに対応した2022年9月版の解説を求める人。

    本の詳細を見る →
  4. Web制作の実装とつなぐ

    HTML/CSS と伝わる Web デザインの実装連携を学ぶ。

    ゼロからはじめてプロになる HTML/CSS&伝わるWebデザイン
    この章の 1 冊 ゼロからはじめてプロになる HTML/CSS&伝わるWebデザイン

    FigmaでデザインしHTMLとCSSでコーディングするプロの制作フローを体験する

    この本で身につくこと
    • Webデザインの基本原則(タイポグラフィ・配色・レイアウト)を実務視点で把握する
    • Figmaでサイトマップとワイヤーフレームからデザインカンプを作成できる
    • デザインカンプをHTMLとCSSに変換するコーディングの基本工程を実践できる
    • プロが実際に行う制作フロー(設計→デザイン→コーディング)を一貫して体験する

    想定読者: Webデザインに興味を持つ完全初心者、またはWeb制作職を目指す学生・社会人

    本の詳細を見る →
  5. UXの原則で仕上げる

    UXの心理法則で「なぜ使いやすいか」を理解し仕上げる。

    UXデザインの法則 第2版 : 最高のプロダクトとサービスを支える心理学
    この章の 1 冊 UXデザインの法則 第2版 : 最高のプロダクトとサービスを支える心理学

    心理学的法則10種をUX設計の実務判断基準として活かす

    この本で身につくこと
    • ヤコブの法則・フィッツの法則など10の心理学的原則をUIの具体的な設計判断に対応付けられる
    • ミラーの法則の正しい解釈(7±2は誤解であり真価はチャンク化にある)を理解し、情報設計の精度を上げられる
    • ピーク・エンドの法則を用いてユーザー体験の印象的な場面と終端を意識的に設計できる
    • 心理学的原則を根拠としてデザイン判断をチームやステークホルダーに論理的に説明できる

    想定読者: UIデザイナー・UXデザイナー・フロントエンドエンジニアで、デザイン判断に心理学的根拠を持たせたいと考えている実務者

    本の詳細を見る →

この道で読む 5 冊(購入)

読む順に並べています。まずは1冊目から始めましょう。

まず読む1冊
デザインの学校 これからはじめるFigmaの本
デザインの学校 これからはじめるFigmaの本

デザインツール Figma の基礎をはじめから学ぶ。

続けて読む

まず読む1冊 デザインの学校 これからはじめるFigmaの本 見る →