概要

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

想定読者

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

こんな人には向いていない

• HTML/CSSをすでに業務で書いており、中級以上の設計手法やフレームワークを求めている人
• Figmaを含むデザインツールの操作経験があり、より高度なUIデザイン理論を学びたい人
• バックエンド開発やJavaScript中心のフロントエンド開発に焦点を当てたい人

読了後にできるようになること

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

本書のキー概念(章解説)

• 第 1 章 最初に知っておきたいWebサイトの基本 — Webの仕組みを理解する導入章。完全初心者はここから読む
• 第 2 章 絶対に知っておきたいWebデザインの基本 — デザイン原則を実務視点で整理する。デザイン経験がない人にとって軸になる章
• 第 3 章 デザインツール『Figma』の基本 — Figmaの操作を初歩から解説。ツール未経験者はここで環境を整える
• 第 4 章 サイトマップとワイヤーフレームをつくろう — 設計フェーズの実習。デザイン前の情報設計に慣れる
• 第 5 章 デザインカンプをつくろう — Figmaでの実制作。デザインカンプとコーディングの橋渡しになる核心章
• 第 6 章 コーディングの始め方 — 開発環境の準備。詰まりやすいポイントを著者動画で補完
• 第 7 章 HTMLの基本をおさえよう — HTML構文の基礎。実際のカフェサイトを素材にした実践形式
• 第 8 章 CSSの基本をおさえよう — スタイル適用の基礎。デザインカンプ→コードの変換感覚を育てる
• 第 9 章 カフェサイトをコーディングしよう — 本書の総仕上げ。設計〜コーディングの全工程を通しで体験する

ハイライト

• デザインとコーディングのスキルが1冊で身につく。プロとまったく同じ制作フローを体験しながら、Webデザインの基礎から実践までをしっかり理解できるように構成しています。(本書の最大の差別化ポイントであるデザインとコーディングの一貫学習を端的に示している)
• 重要パートは著者による解説動画付き。YouTube登録者数6.8万人超の現役WebデザイナーHIROCODE.が、紙面だけでは伝わりにくい操作手順を動画でフォローする。(入門者が詰まりがちな操作系の不安を動画サポートで補う構成であることが読者判断に直結する)

編集メモ

Qiita言及数0件・累計likes 0・楽天ランキング情報なし。2025年1月刊行の入門書で、外部シグナルが集積する前の段階のため、現時点では補完的な選択肢として位置づける

読む前に押さえておきたいこと

• パソコン基本操作(ファイル操作・ブラウザ閲覧)程度で十分。プログラミング経験は不要
• Figmaは無料プランで始められるが、アカウント作成を事前に済ませておくとスムーズ

学習のコツ

• Chapter 1-2は読み飛ばしたくなるが、Chapter 5以降のデザインカンプ判断の根拠になるため、ざっとでも目を通してから進む
• Chapter 3のFigma操作は著者動画と並行して進めると環境構築の詰まりが減る
• Chapter 9のカフェサイト実制作は、手を動かしながら読むことを前提に設計されているため、サンプルデータを手元に展開してから着手する
• デザインとコーディングの両方が目的の場合、Chapter 5(デザインカンプ)→Chapter 9(コーディング)の往復を意識しながら読むと学習効果が高い