Shelfy
作って学ぶFigma入門［完全版］ ステップ・バイ・ステップで身につくWeb/UIデザインの基本 - MAIN
初心者デザイン副業

【要約・書評】『作って学ぶFigma入門［完全版］ ステップ・バイ・ステップで身につくWeb/UIデザインの基本』の評判・おすすめポイント

古尾谷 眞人|||0ページ

★★★★☆4.5
(4件)
¥2,640Amazonで購入楽天ブックスKindle版

■ この本を一言で言うと

Figmaの基本操作からオートレイアウト・プロトタイプまで手を動かして一気に学べる——「ツールの使い方」で止まらず、実務レベルのUIデザインを最短距離で身につけたい人のための入門書

■ この本の概要

Figmaをゼロから実務レベルまで引き上げるハンズオン入門書です。2024年のUI刷新に完全対応した「完全版」として書き下ろされており、作例データをダウンロードして本の通りに手を動かせば、同じデザインが手元で完成します。読むだけで終わらない構成が、独学でありがちな「本と画面が違う」問題を最小限に抑えてくれます。 中盤ではオートレイアウト、コンポーネント、スタイル、バリアブルといったFigmaの核心機能を段階的に導入していきます。どれも実務では避けて通れないのに、初心者がもっともつまずきやすい領域です。本書は一つひとつの概念をレッスンの流れに乗せて解説するため、気がつけば「なるほど、こう使うのか」と腑に落ちるタイミングが訪れます。 実践パートではハンバーガーメニューの開閉、カルーセルのスワイプ、レスポンシブ対応など、現場で頻出するUIパターンを一つずつ組み立てていきます。スマートフォン画面を起点に進むため、モバイルファーストの設計感覚が自然と染み込みます。プロトタイプ機能まで一気通貫で体験でき、自分のデザインが「動く」瞬間を入門段階で味わえるのは大きな強みです。 一点注意しておきたいのは、本書はあくまでFigmaの操作習得にフォーカスした本であり、配色理論やタイポグラフィといったデザインの原則は扱っていないということ。「なぜこのレイアウトなのか」「なぜこの配色なのか」まで踏み込みたい人は、デザイン理論の専門書と組み合わせて読むのがおすすめです。ツール習得の最初の一冊としては、現時点で最も手堅い選択肢のひとつです。

■ Figma歴3年の自分が「最初にこれ読みたかった」と思った本

普段Figmaでバリバリ仕事してるんですけど、ここ半年くらいで「Figma何から始めればいいですか？」って聞かれる回数が明らかに増えました。自分は公式ドキュメントとYouTubeで独学したクチなので、体系的な入門書って実は読んだことがなくて。で、後輩に何か薦めようと思ってこの本を手に取ったんですが、正直「自分がFigma始めた3年前にこれがあったらな」って素直に思いました。 まず構成がうまい。理論を延々と語るんじゃなくて、最初からFigmaを触らせにくるんですよ。作例データもダウンロードできるから、本の通りにやれば同じものが出来上がる。独学って「手順通りにやったのに結果が違う」で心が折れるパターンが本当に多いんですけど、この本はそこのケアがしっかりしてます。スクショも2024年の最新UIに対応してるので、「あれ、画面が本と違う」みたいなストレスもない。地味だけど、これめちゃくちゃ大事。 個人的にいちばん刺さったのはオートレイアウトとコンポーネントの章です。この2つってFigmaの心臓部なのに、最初は本当に意味がわからない。自分なんか最初の半年はオートレイアウト使わずに全部手動で配置してて、今思い返すとゾッとするような非効率な作業をしてました。本書はこのあたりを段階的に積み上げてくれるので、初心者でも「ああ、こういう仕組みなのか」って自然に理解が進むと思います。 プロトタイプのパートに入ったあたりから一気にテンションが上がるはず。ハンバーガーメニューが開閉したり、カルーセルがスワイプで動いたり、自分の作ったものが画面上で「動く」瞬間って純粋にアガるんですよね。この感覚を入門書の段階で体験できるのはかなりでかいと思ってて、モチベーションの維持にも直結します。 ただ、気になる点もいくつかあって。基本的にスマホサイトのデザインが軸になってるので、PC向けのWebサイトとか管理画面のダッシュボードみたいなものを想定してると「ちょっと違うな」ってなるかもしれない。あと、これはタイトルからも明らかなんですけど、デザインの原則——配色の理由とか余白の取り方の理論とか——にはほぼ触れてないです。あくまでFigmaというツールの使い方を覚える本なので、デザインそのものを学びたい人は別の本と併読したほうがいい。 240ページっていうボリュームもちょうどいい。500ページ超の分厚い本って、買った瞬間は「やるぞ」って思うんだけど、結局3分の1くらいで積んじゃうじゃないですか。この本なら週末を2回使えば一通り終わります。Figmaの全機能をカバーする網羅本ではなく、実務で使うコア機能を最短ルートで身につける本っていう割り切りが潔くて好きです。 後輩には「まずこれ1冊やりきって」って渡しました。Figmaに触れたことがない人の最初の1冊としては、今のところベストに近い選択肢だと思います。逆に、もうFigmaをそこそこ使えてる人にとっては既知の内容が多いので、そこだけ注意です。

— ao / フリーランスデザイナー / 20代 / UIデザイナー。figma職人。

■ この本で学べること

✓

ハンズオン形式で手を動かしながら学べる

作例データをダウンロードして本の手順に沿って操作すれば同じ成果物が完成する構成です。「読んで終わり」にならず、実際にFigmaを触りながらスキルを積み上げられます。

✓

オートレイアウト・コンポーネントを段階的に理解できる

実務で不可欠なオートレイアウト、コンポーネント、スタイル、バリアブルを、レッスンの流れに沿って少しずつ導入。初心者がつまずきやすい概念を無理なく吸収できる構成です。

✓

2024年のUI変更に完全対応

Figmaは頻繁にインターフェースが変わるツールですが、2024年の最新UIに合わせた「完全版」として刊行されています。画面と本の内容がずれるストレスを最小限に抑えられます。

✓

プロトタイプ機能まで一気通貫で体験できる

静的なデザイン制作にとどまらず、ハンバーガーメニューの開閉やカルーセルのスワイプといったインタラクション付きプロトタイプまで一冊で完結。デザインが「動く」楽しさを入門段階で味わえます。

✓

モバイルファーストのデザイン感覚が身につく

スマートフォン画面を起点にデザインを進めるため、レスポンシブ対応やモバイルファーストの設計思想が自然と身につきます。現在のWeb制作で主流となっているアプローチを最初から実践できます。

■ 本の目次

  1. 1LESSON 1 Figmaの概要とレッスンの準備
  2. 2LESSON 2 スマートフォンのWebデザイン
  3. 3LESSON 3 スクロールするスマートフォン画面
  4. 4LESSON 4 レスポンシブ対応のWebデザイン
  5. 5LESSON 5 コンポーネントとスタイルの活用
  6. 6LESSON 6 オートレイアウトの実践
  7. 7LESSON 7 バリアブルとデザインシステム
  8. 8LESSON 8 プロトタイプの作成
  9. 9LESSON 9 共同編集と開発者向け機能

■ 良い点・気になる点

良い点

  • ○ハンズオン形式で挫折しにくく、作例データもダウンロードできる
  • ○オートレイアウトやコンポーネントなど実務必須の機能を段階的に学べる
  • ○2024年のUI変更に対応しており、画面と本の内容が一致する
  • ○240ページとコンパクトで、短期間で一通り学習を終えられる
  • ○プロトタイプ機能まで体験でき、デザインの完成形をイメージしやすい

気になる点

  • △スマホサイト中心の構成で、PCサイトやダッシュボードUIの解説は手薄
  • △Webデザインの理論（配色・タイポグラフィなど）は扱っていない
  • △すでにFigmaをある程度使いこなしている人には物足りない
  • △Figmaの全機能を網羅する本ではなく、基本操作にフォーカスしている

■ みんなの評判・口コミ

a
ao

フリーランスデザイナー

★★★★★5.0

Figmaの入門書としてはかなり完成度が高い。自分は普段から仕事でFigmaを使ってるけど、独学で覚えたぶん基礎に抜けがあるなと感じてて。この本で改めてオートレイアウトの基本を整理できたのが大きかった。社内で新しくデザインチームに入ったメンバーにも1冊渡しておいた。最初の一冊としてはこれ以上ないと思う。

m
miku

Webマーケター

★★★★☆4.5

Reactを勉強中で、デザインツールも使えるようになりたくて購入しました。手を動かしながら進められる形式が自分には合っていて、プロトタイプを作るあたりから楽しくなって一気に読了。コンポーネントの考え方がReactと共通する部分が多くて、すんなり頭に入りました。エンジニア目線でもFigmaの設計思想を理解するのに良い一冊です。

け
けんじ

Web担当者

★★★☆☆3.5

会社でWeb担当を任されることになり、Figmaを使う必要が出てきたので購入しました。基本操作は一通り学べるので入門としては申し分ないです。ただ、スマホサイトのデザインが中心なので、自分が担当しているコーポレートサイトにはそのまま応用しづらい場面もありました。PCサイトやもう少し複雑なレイアウトにも踏み込んでくれたら星4つだったかなと思います。

y
yui

フロントエンドエンジニア

★★★★☆4.0

フロントエンドエンジニアとしてデザイナーとの連携を円滑にしたくて読みました。フレーム、オートレイアウト、コンポーネントといったFigmaの構造がCSSのFlexboxやコンポーネント設計とどう対応するのか、感覚的につかめたのが一番の収穫です。デベロッパーモードの解説がもう少し厚いと嬉しかったけど、デザイナーの作業工程を理解するという目的には十分でした。

■ 著者について

■ こんな人におすすめ

✓

Figma初心者

Figmaを触ったことがない、またはアカウントを作っただけで放置している人。ゼロから手を動かして基本操作を身につけたい方に最適です。

✓

デザインツールを乗り換えたい人

PhotoshopやXD、Sketchなど他ツールからFigmaに移行したい人。Figma特有のオートレイアウトやコンポーネントの考え方を効率よくキャッチアップできます。

✓

ノンデザイナーのエンジニア・マーケター

デザイナーとの協業でFigmaの基本を知っておきたいエンジニアや、LPのワイヤーフレームを自分で作りたいマーケターにも役立ちます。

✓

短期間でFigmaを習得したい人

240ページのコンパクトな構成で、週末2回ほどで一通り学習できます。分厚い本を積んでしまいがちな人にもおすすめ。

■ よくある質問

Q. 『作って学ぶFigma入門』はプログラミングの知識がなくても読めますか？▼
A. はい、プログラミングの知識は一切不要です。『作って学ぶFigma入門［完全版］』はFigmaの操作方法に特化しており、デザインやコーディングの経験がなくても問題なく学習を進められます。
Q. 『作って学ぶFigma入門』はFigmaの無料プランでも学習できますか？▼
A. はい、『作って学ぶFigma入門［完全版］』の内容はFigmaの無料プランで実践できます。有料プラン限定の機能に依存する内容はほぼないため、コストをかけずに学習を始められます。
Q. 『作って学ぶFigma入門』はPC向けWebデザインも学べますか？▼
A. 『作って学ぶFigma入門［完全版］』はスマートフォン画面のデザインが中心ですが、レスポンシブ対応のレッスンも含まれています。PC向けサイトやダッシュボードUIを本格的に学びたい場合は、別の書籍と組み合わせるのがおすすめです。
Q. 『作って学ぶFigma入門』の「完全版」は以前の版と何が違いますか？▼
A. 2024年のFigma UI変更に対応した改訂版です。『作って学ぶFigma入門［完全版］』ではスクリーンショットや操作手順がすべて最新のインターフェースに合わせて更新されており、本と実際の画面が一致します。
Q. 『作って学ぶFigma入門』はどのくらいの期間で読み終わりますか？▼
A. 240ページのコンパクトな構成なので、集中して取り組めば週末2回（合計10〜15時間程度）で一通り終えられます。通勤時間に読んで週末にハンズオンを進めるスタイルもおすすめです。
Q. 『作って学ぶFigma入門』を読めばWebデザイナーになれますか？▼
A. 『作って学ぶFigma入門［完全版］』はFigmaの操作習得に特化した本で、配色やタイポグラフィなどデザイン理論は扱っていません。Webデザイナーを目指す場合は、デザイン理論の書籍も併せて学習することをおすすめします。
Q. 『作って学ぶFigma入門』の作例データはどこからダウンロードできますか？▼
A. 作例データは書籍内に記載されたURLからダウンロードできます。Figmaファイルとして提供されるため、自分のアカウントにコピーしてそのまま学習に使えます。

UIデザインガイドライン集

実務で使えるUIデザインのガイドラインを無料でダウンロード

※ 登録いただいたメールアドレスは資料送付にのみ使用します