はじめてでも迷わない Figma のきほん 改訂版 マネするだけでスキルが身につく Web サイト・バナーデザイン入門(ハジメテデモマヨワナイフィグマノキホン カイテイバン マネスルダケデスキルガミニツクウェブサイト バナーデザインニュウモン)

Figma でおしゃれなサイトを作ろう!
Figma で Web サイトの作成から公開までを行おう! 本書はデザインツール「Figma」の操作方法を解説した「基礎編」と、Figma でバナー / Web サイトを作成する方法を解説した「実践編」で構成された書籍です。実践編では、Instagram サイズのバナー画像に加えて、ポートフォリオサイトのデザイン方法、Figma Sites を用いてサイトを実装・公開する具体的な手順を紹介しています。特典として、そのまま使える「作例ファイル」が付いてくるので、Figma を使いこなすスキルが楽しく身につきます。

デザインツール「Figma」の操作を基礎から学び、バナーと Web サイトを実際に作って公開するところまでを一冊で体験する入門書が、『はじめてでも迷わない Figma のきほん 改訂版 マネするだけでスキルが身につく Web サイト・バナーデザイン入門』 (もち 著、インプレス、2026 年 2 月刊) です。版元の紹介文によれば、本書は Figma の操作方法を解説した「基礎編」と、Figma でバナー / Web サイトを作成する方法を解説した「実践編」で構成され、実践編では Instagram サイズのバナー画像に加えて、ポートフォリオサイトのデザイン方法、Figma Sites を用いてサイトを実装・公開する具体的な手順を紹介しています。特典として、そのまま使える「作例ファイル」が付きます。書店掲載の書誌 (出版社提供) の内容説明は「Web デザインの基礎から Figma Sites での公開、AI 活用まで。作って終わりにしない、一歩先の活用法がこの 1 冊で!」と本書をうたっています。

基礎編と実践編の 2 部構成、バナーからサイト公開まで

構成は基礎編と実践編の 2 部です。基礎編は「Figma の概要を理解する」「Figma の基本操作を学ぶ」「Figma で共同作業を行う」「外部リソースを活用する」の 4 つのテーマで、ツールの理解から共同作業、外部リソースの活用までを押さえます。実践編は「バナーのデザインを作る」「サイトのデザインを作る」「サイトの構成を実装する」「サイトを Web に公開する」「制作に役立つ機能を知る」の 5 つで、単発の成果物であるバナーで手を慣らしてから、複数の要素が絡むサイトのデザインへ進み、構成の実装と公開までを一続きに体験する順序になっています。書名の「マネするだけでスキルが身につく」という言葉と、内容説明の「一緒に手を動かすだけで」という表現のとおり、作例ファイルを手元に置いて再現しながら進める使い方が想定されています。

バナーと Web サイト、デザインから公開までを一冊で追う意味

バナーと Web サイトは、同じデザインツールで作っても性格の異なる成果物です。バナーは決まった寸法の中で一枚絵として完結し、媒体ごとの寸法に合わせて文字と画像と余白を配置する練習に向いています。一方の Web サイトは、複数のページにわたって見出し・ボタン・ナビゲーションのような部品を繰り返し使い、閲覧する画面の幅によって並びが変わるため、一枚絵の延長では作れません。全体の骨格を ワイヤーフレーム で決め、部品を一か所で定義して使い回す考え方が必要になり、この考え方を組織の規模に広げたものが デザインシステム です。従来の Web 制作では、デザインツールで作った画面をコードで実装し直す工程が別にあり、そこで意図の伝達漏れや手戻りが生まれやすいことが課題でした。デザインツール側から公開までを通せる経路があれば、デザインを学び始めた段階の人でも「作ったものを公開する」経験を先に得られます。本書の実践編がサイトのデザイン、構成の実装、Web への公開と進むのは、この課題に対する学習順序として理解できます。

改訂版と 2026 年 2 月刊行時点の Figma を前提に読む注意

本書は改訂版で、国立国会図書館の書誌にも版表示「改訂版」が記録されています。ただし、改訂で何が加わったかを版元の紹介文は個別に列挙していないため、旧版との差分を確かめたい人は、目次と紹介文に実在する Figma Sites を用いた実装・公開、内容説明にある AI 活用といった項目を、旧版の目次と見比べるのが確実です。また、Figma のように更新の速いツールでは、画面や機能名が刊行後に変わることがあり、2026 年 2 月刊の本書でも手元の画面と一致しない場面はあり得ます。料金や機能の提供状況といった外部条件は本書ではなく Figma の公式情報で確かめる前提で読んでください。それでも、部品を定義して使い回す組み立て方や、バナーからサイトへと成果物の複雑さを上げていく学習順序は、画面が変わっても持ち越せる部分です。

Figma 未経験で元が取れる人、向かない人

元が取れるのは、Figma を初めて触る人、あるいは触ったことはあるが作品を完成させた経験がない人で、Instagram サイズのバナーとポートフォリオサイトという具体的な成果物を手元に残したい人です。読み終えると、Figma の基本操作と共同作業の進め方、外部リソースの活用、バナーとサイトのデザイン、サイトの構成の実装と Web への公開まで、一連の工程を自分の手で再現できるようになります。著者のもち氏は、刊行時点の著者紹介によれば株式会社 xenodata lab. CDO、株式会社 Fluxion 代表取締役で、IT 業界でのデザイナー歴は 10 年以上、Web 制作・ブランド支援・デザイン教育を展開し、Figma 書籍の執筆やウェビナー・イベント登壇でも知見を発信しているとされ、実務と教育の両面を持つ書き手です。一方、本書の題材は Web サイトとバナーなので、アプリ画面の設計やプロトタイプ制作を主目的にする人は、その領域を題材にした本を重ねる必要があります。その先の学習や、HTML/CSS のコーディング本、デザイン原則の本との組み合わせ方は、Web デザイン本の選び方 が扉になります。

デザインの勉強を「作って終わりにしない」ところまで進めたい人にとって、バナーの一枚から自分のポートフォリオサイトの公開まで伴走する本書は、学んだ操作が成果物として残る出発点になる一冊です。