暇 ひまネタNEWS(^o^) | スキマ時間にちょっとしたネタを提供スキマ時間に、話題のまとめを一気読み 全サイト自動巡回中
HIMA NETA ORIGINAL READER
本文だけモード Web担当者Forum IT・ガジェット 約10分で読めます

エンジニア向けFigma『エンジニアなら知っておきたいFigmaのキホン ハンズオンで学ぶWeb開発の仕組みと機能』を3名様にプレゼント

一覧へ戻る 元サイトで読む
読みやすさ この端末に設定を保存します
書体
文字
背景

広告・ランキング・関連記事を除き、配信元の安全な文字装飾だけを残しています。

エンジニア向けFigma『エンジニアなら知っておきたいFigmaのキホン ハンズオンで学ぶWeb開発の仕組みと機能』を3名様にプレゼント 読者プレゼント webtan 2026年9月11日
【申込は9/18まで】書籍『エンジニアなら知っておきたいFigmaのキホン ハンズオンで学ぶWeb開発の仕組みと機能』を3名様にプレゼントします。

著者：

梅田 弘之

価格：

2,970円（税込）

ページ数：

360ページ

出版社：

インプレス

ISBN：

978-4295024477


目次

  • 第1章　無償版でFigmaの基本を理解する
  • 第2章　デザインシステムを理解する
  • 第3章　オートレイアウトのプロパティ設定
  • 第4章　コンポーネントとインスタンスを活用する
  • 第5章　デザイントークンで標準化
  • 第6章　スタイルでテキストのデザインを統一する
  • 第7章　バリアブルとコレクションでカラーを標準化
  • 第8章　エフェクトと文字列、数値の標準化
  • 第9章　Atomic DesignでUIパーツを設計する
  • 第10章　フッターをモジュール化する
  • 第11章　ヘッダーの設計と階層管理
  • 第12章　ステートベースドデザインを理解しよう
  • 第13章　コンポーネントプロパティ
  • 第14章　コンポーネント化の判断
  • 第15章　グリッドとテーブル
  • 第16章　Figmaのその他の機能
  • 【付録Ⅰ】これだけは覚えておきたい10の操作と10のコツ
  • 【付録Ⅱ】Figmaのアイコン一覧

この本を読んで欲しい人

  • Figmaの基本操作や機能を学びたいエンジニア
  • UI設計やデザインシステムの考え方を身につけたいビジネスパーソン
  • デザインと実装の連携をスムーズにしたいWeb開発者

デザインと開発をつなぐ！ エンジニアのためのFigma入門書の決定版

現場のデザイナーとの連携に課題を感じているエンジニア必見！

本書は、Figma（フィグマ）を「業務システム開発の共通基盤」として使いこなし、スムーズな実装へとつなげるための実践ガイドです。

オートレイアウトやコンポーネントといったFigmaの中核機能を、Flexboxのような配置ルールやプログラムの部品化など、エンジニアにとってなじみのある考え方と結びつけながら体系的に解説。

変数（Variables）によるデザイントークン管理や、開発効率を高めるDev Mode、実機に近い挙動を確認できるプロトタイプ機能まで網羅しています。

無償プランで実際に「受注一覧画面」を構築するハンズオン形式なので、手を動かしながらデザインの構造を学べるのもポイント。UI設計の理解を深めたいエンジニアにおすすめの一冊です。

プレゼント応募要項

応募締切

2026年9月18日（金）23:59

当選者数

3名様

応募方法

下記応募フォームに必要事項をご記入して応募をお願いします。当選者の発表はプレゼントの発送をもって代えさせていただきます。

  • 現在 開始
  • 応募内容の確認
  • 完了
必須フィールドを示します

応募者

姓
名
メールアドレス

お勤め先

会社名
ない場合は「フリー」とお書きください
部署名
ない場合は「なし」とお書きください
役職
ない場合は「なし」とお書きください
郵便番号
ハイフンをいれてください
例：101-0051
都道府県
住所
例：千代田区神田神保町1-105
ビジネス利用の電話番号
携帯電話推奨

Web担のメールマガジン

はい
すでに購読している

「購読する」にチェックをすると、Web担の最新情報が受け取れます。メルマガについて詳しくはWeb担メルマガについてをご覧ください。

あなたのWeb担への想いをお聞かせください

あなたのWeb担への想いをお聞かせください
あなたがWeb担をどう使っているかの声などをお書きください。
ご入力された個人情報は、プライバシーポリシーの下に保護されます。
プライバシーポリシーに同意する
Leave this field blank

［個人情報の取り扱いについて］：
入力いただいたご連絡先にWeb担当者Forumのメールマガジンをお送りします。また、弊社（株式会社インプレス）より関連セミナーの開催や、資料ダウンロードなどのご案内（協賛企業のものを含む）をお送りさせていただきます。ぜひご活用いただければ幸いです。なお、ご不要の場合は、いつでも停止いただけます。詳しくはお送りいたしますメール巻末をご覧ください。

お預かりした個人情報につきましては、細心の注意をもって管理してまいります。当社の個人情報の取り扱いにつきましては、プライバシーポリシーにて公開しております。また、個人情報についてのお問い合わせは、データマーケティング推進室（Email:customer-bm@impress.co.jp）までお寄せください。

この記事をシェアしてほしいパン！

前の記事

Claude活用ガイド『できるClaude＆Claude Cowork』を3名様にプレゼント

バックナンバー

バックナンバーをもっと見る
(function(){ try{ var googletag = window.googletag || {cmd: []}; googletag.cmd.push(function() { const adUnitPath = '/49282802/ipc-webtan/pc-all/hyb101', adSizes = [[["fluid"], [728, 90]]], slotElementId = 'div-gpt-ad-1549503899339-0'; const iOr=/^https:\/\/([^.]+\.)+safeframe\.googlesyndication\.com/; googletag .pubads() .addEventListener('slotResponseReceived', function(evt) { if (evt?.slot?.getAdUnitPath() != adUnitPath) { return; } if (!evt?.slot?.getResponseInformation()) { const targetElem = document.querySelector('#'+slotElementId); if (targetElem) { targetElem.style.display = 'none'; } } }) .addEventListener('slotRenderEnded', function(evt) { if (evt?.slot?.getAdUnitPath() != adUnitPath) { return; } const postMessageWithDebounce = Drupal.debounce(function() { const viewportWidth = window.innerWidth; const wIfr = document .querySelector('#'+slotElementId) ?.querySelector('iframe') ?.contentWindow; if (!wIfr || !wIfr.postMessage) return; wIfr.postMessage( { slot: adUnitPath, type: 'banchoSetViewportInfo', data:{ viewportWidth: viewportWidth } }, '*' ); }, 250, false); postMessageWithDebounce(); window.addEventListener('resize', postMessageWithDebounce); window.addEventListener('orientationchange', postMessageWithDebounce); }); }); } catch (e) { if (drupalSettings?.bancho?.userInfo?.insider) { console.warn(e); } } })();
(function(){ var googletag = window.googletag || {cmd: []}; googletag.cmd.push(function() { googletag .pubads() .addEventListener('slotResponseReceived', function(evt) { // いろんな枠のイベントが飛んでくるので自分のだけフィルタ if (evt.slot.getAdUnitPath() != '/49282802/ipc-webtan/pc-all/hyb101') { return; } document.getElementById('div-gpt-ad-1549503899339-0')?.classList?.add('dfp-ad-loaded'); }); googletag.display('div-gpt-ad-1549503899339-0'); }); })();

業界情報やナレッジが詰まったメルマガ配信やソーシャルもよろしくです！
姉妹サイトもぜひ： ネッ担・ネッ担お悩み相談室

メルマガの登録はこちら　Web担当者に役立つ情報をサクッとゲット！
この記事のキーワード ：

元のページを確認する

必要な場合のみ、広告などを含む配信元ページをフレームで表示できます。