学習ロードマップ

デザインツール実践 — Figma・Photoshop・Blender

タイポグラフィとレイアウトの基礎から、 Figma による UI/Web デザイン、 Photoshop の画像編集、 Blender の 3DCG まで。 つくれる範囲を広げる読書順序。

見てわかる、迷わず選べるフォントの組み合わせマネするだけでセンスのいいフォント 思わずクリックしたくなる バナーデザインのきほん Canva いちばんやさしい使い方ガイド エンジニアなら知っておきたいFigmaのキホン ハンズオンで学ぶWeb開発の仕組みと機能 独学Photoshop 楽しく基本が身につくガイドブック[増補改訂版] Blender完全入門[5.x対応] : 形→質感→光→撮影まで全部できる
SCROLL TO BEGIN

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

UI/Web 3D

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

デザインツールは機能を覚える前に、 「文字組み」 と 「レイアウト」 の原則を押さえると伸びが変わります。 基礎 → UI/Web → 画像 → 3D、 と扱える表現を広げていきます。

学習ステップ

1. 基礎: フォントの組み合わせとバナーのレイアウトで、 デザインの土台をつくる。 2. 実践: Figma で UI/Web デザイン、 Photoshop で画像編集を手を動かして習得。 3. 発展: Blender で 3DCG に踏み出し、 表現の幅を立体に広げる。

デザイナーに限らず、 資料・Web・プロダクトを自分で形にしたい全職種に効きます。

ロードマップ

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

  1. 01
    ステップ 01 文字組みの基礎
    見てわかる、迷わず選べるフォントの組み合わせマネするだけでセンスのいいフォント
  2. 02
    ステップ 02 レイアウトの基礎
    思わずクリックしたくなる バナーデザインのきほん
  3. 03
    ステップ 03 まず手軽に形にする
    Canva いちばんやさしい使い方ガイド
  4. 04
    ステップ 04 Figma で UI/Web
    エンジニアなら知っておきたいFigmaのキホン ハンズオンで学ぶWeb開発の仕組みと機能
  5. 05
    ステップ 05 Photoshop で画像編集
    独学Photoshop 楽しく基本が身につくガイドブック[増補改訂版]
  6. 06
    ステップ 06 Blender で 3DCG へ
    Blender完全入門[5.x対応] : 形→質感→光→撮影まで全部できる

第 1 章

文字組みの基礎

  1. 文字組みの基礎

    フォントの組み合わせ — 迷わず選べる配色・書体の基本。

    見てわかる、迷わず選べるフォントの組み合わせマネするだけでセンスのいいフォント
    この章の 1 冊 見てわかる、迷わず選べるフォントの組み合わせマネするだけでセンスのいいフォント

    メイン・アクセント・ベースの3役割でフォントの組み合わせを体系的に選べるようにする

    この本で身につくこと
    • フォントをメイン・アクセント・ベースの3役割に割り当てて選ぶ考え方を習得できる
    • 相性のいい3書体の組み合わせパターンをそのまま実制作に転用できる
    • 膨大なフォント候補の中から目的に合うものを素早く絞り込む判断基準を身につけられる
    • フォント選びに費やす時間を削減し、デザイン作業の効率を上げられる

    想定読者: チラシ・SNS画像・スライドなどをデザインする機会があり、フォント選びに時間がかかったり毎回同じ書体を使い続けていたりする非専業デザイナー。イラストレーター・ingectar-e の他シリーズ読者にも親和性が高い。

    本の詳細を見る →
  2. レイアウトの基礎

    クリックしたくなるバナーデザインのきほんで、 構成の原則を学ぶ。

    思わずクリックしたくなる バナーデザインのきほん
    この章の 1 冊 思わずクリックしたくなる バナーデザインのきほん

    バナーデザインの基本8項目と6カテゴリの工夫を体系的に習得する

    この本で身につくこと
    • パッと見て情報が伝わるバナーを設計する8つの基本原則を説明できる
    • 用途別(セール・新商品告知など)に応じた6カテゴリのデザインアプローチを使い分けられる
    • 情報量の多いWeb上でユーザーの目を留めるためのビジュアル的工夫を実践できる
    • デザイン初心者でも再現可能なバナー制作の手順と判断基準を身につけられる

    想定読者: Web 制作に関わるデザイン初心者、またはバナー制作の基礎を体系的に整理したいノンデザイナー

    本の詳細を見る →
  3. まず手軽に形にする

    Canva で、 ツールの学習コストを抑えつつ最短でデザイン制作物を完成させる。

    Canva いちばんやさしい使い方ガイド
    この章の 1 冊 Canva いちばんやさしい使い方ガイド

    Canva の基本操作から動画・Web 制作まで無料版で習得する

    この本で身につくこと
    • Canva のアカウント作成から基本操作パネルの扱い方を一通り身につけられる
    • プレゼン資料をゼロから作成し、スライドデザインの基本的な流れを理解できる
    • SNS 向け画像のサイズ・ビジュアル設計の要点を把握できる
    • チラシ制作を通じてテキスト・画像レイアウトの実践的な操作手順を習得できる

    想定読者: Canva を触ったことがない、またはほとんど使っていないビジネスパーソン・個人クリエイター。プレゼン資料・SNS 画像・チラシを自分で作りたいが、デザインの専門知識がない人。

    本の詳細を見る →
  4. Figma で UI/Web

    エンジニアにも役立つ Figma のキホン。 Web 開発との接続を学ぶ。

    エンジニアなら知っておきたいFigmaのキホン ハンズオンで学ぶWeb開発の仕組みと機能
    この章の 1 冊 エンジニアなら知っておきたいFigmaのキホン ハンズオンで学ぶWeb開発の仕組みと機能

    WebエンジニアがFigmaを実務で使える水準まで、ハンズオン形式で習得する

    この本で身につくこと
    • Figmaの画面構成とレイヤー構造がHTMLの要素ツリーとどう対応するかを把握できる
    • オートレイアウトとCSS Flexboxの対応関係を理解し、デザインファイルのレスポンシブ設計を読み解けるようになる
    • コンポーネントとプロパティの概念を理解し、デザイナーが作成したFigmaファイルを効率よく参照できるようになる
    • プロトタイプ機能の仕組みを理解し、画面遷移の設計意図を開発側から確認できる

    想定読者: Figmaをほとんど触ったことがないWebエンジニア、またはデザイナーと協業する機会が増えてきた開発者。デザインツール全般に苦手意識があり、実装フェーズとの接続を重視する人に向く。

    本の詳細を見る →
  5. Photoshop で画像編集

    独学 Photoshop で、 画像加工・レタッチの基本を身につける。

    独学Photoshop 楽しく基本が身につくガイドブック[増補改訂版]
    この章の 1 冊 独学Photoshop 楽しく基本が身につくガイドブック[増補改訂版]

    Photoshopのレイヤー・フィルター・ツールを軸に、動画と本で楽しく基礎を身につける

    この本で身につくこと
    • レイヤーの概念と重ね順・グループ化・スマートオブジェクトの使い方を理解できる
    • レイヤーマスクとクリッピングマスクの違いを判断し、目的に応じて使い分けられる
    • 選択ツール・ブラシ・切り抜きなど主要ツールの用途と操作手順を習得できる
    • フィルターギャラリーとスマートフィルターを活用した非破壊編集のワークフローを身につける

    想定読者: Photoshopを初めて触る人、または操作はできるが理解があいまいなまま使い続けている初心者

    本の詳細を見る →
  6. Blender で 3DCG へ

    Blender 完全入門 — モデリングから質感・光・撮影まで 3D 表現に踏み出す。

    Blender完全入門[5.x対応] : 形→質感→光→撮影まで全部できる
    この章の 1 冊 Blender完全入門[5.x対応] : 形→質感→光→撮影まで全部できる

    Blender 5.

    この本で身につくこと
    • Blender 5.xのインターフェースと基本操作を実際に触りながら体系的に理解できる
    • メッシュ編集によるモデリングの基礎手順を、かんたんなアイテムから背景オブジェクトまで段階的に習得できる
    • シェーダーノードを用いて色・発光・テクスチャ貼り付けを含む質感設定を自分で組めるようになる
    • 3点照明の考え方に基づいたライティングで、被写体が際立つシーン演出ができる

    想定読者: 3DCGが完全に初めてで、Blenderで自分の作品を仕上げることを目標にしている入門者

    本の詳細を見る →