TECH PLAY

デザインからサイト構築まで FigmaだけでWeb制作

2,860円 (税込)

Amazon楽天

デザインからサイト構築まで FigmaだけでWeb制作

書籍情報

発売日:

著者/編集:濱野 将/馬場 快人/すがはら りさ/庄司 美雪/小泉 誠/株式会社IMAKE

出版社:日経BP

発行形態:単行本

書籍説明

内容紹介

●Webデザイナーの必須ツール「Figma」解説書の決定版! ●デザイン初学者はもちろん、デザイナー以外でも理解できる! ●最新機能「Figma Sites」や「Figma Make」の実践活用までカバー!  Figma(フィグマ)は近年、多くのデザイナーや企業に選ばれているデザインツールです。Webサイトやアプリのデザインを効率良く制作できるだけでなく、検討や改善、プレゼンなどを含む一連の作業を効果的に進めることができます。クラウドベースなので共同作業にも向いていて、Webデザインなどにおける必須のツールになりつつあります。  さらに2025年には、デザインしたWebサイトをそのまま公開する新機能「Figma Sites」を搭載し、HTMLなどのコーディングの知識がなくても、Webサイトを制作・公開できるようになりました。生成AIによるWeb制作支援機能「Figma Make」を搭載するなど、大幅な進化を遂げています。  本書は、そんなFigmaの基本的な操作方法はもちろん、Figma Sitesなどの最新機能の活用法や、「使いやすく訴求力のあるデザイン」に必要なUI/UXの考え方まで、これからのFigma 活用を体系的に学べる1冊です。  執筆は、現役のデザイン講師として活躍する著者陣。現場で培った実践的な知識をもとに、初心者にも理解しやすく体系的に解説しています。 Chapter 1 Figmaについて 01 Figma とは 02 使う準備をしよう 03 Figma の構造 04 各部の名称と説明 05 デザインに着手する前に Chapter 2 Webサイトを作りながら基本ツールを覚えよう 01 デザインを始める前の下準備 02 TOP ページのフレーム作成 03 ボタンの制作 04 ヘッダーの作成 05 ファーストビューの作成 06 NEWS セクションの作成 07 ABOUT セクションの作成 08 応用演習:残りのセクションとパーツ 09 完成まとめ 10 SPデザインの制作 11 レスポンシブについて Chapter 3 プロトタイプを設定してみよう 01 プロトタイプとは 02 ページ遷移を再現する 03 ヘッダーを固定してみよう 04 アニメーションの種類 05 ホバーアニメーションをバリアントを使い再現する 06 プロトタイプを共有する 07 Figma でのさまざまなコミュニケーション方法 Chapter 4 Figma Sitesで制作から公開設定まで 01 Figma Sitesとは? 02 Webサイトの制作 03 Webサイトのデザイン 04 Webサイトのレスポンシブ対応 05 アクセシビリティの向上 06 Figma Sitesで作成する際のポイントや便利な機能 07 Webサイトを公開する 08 まとめ Chapter 5 UI/UXについて考えてみよう 01 UI/UXとは? 02 UI/UXを考えるときに見るべきポイント 03 UI/UX視点からデザインの改善をしてみよう 04 作って終わりではなく「使われるか」を見る 05 UI/UX設計で活用できるプラグインの紹介