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

書籍の概要

この本の概要

かならず作れる！
ハンズオン形式で学べる
Figmaの入門教科書です。

Figmaを使ったWeb/UIデザインをマスターするには，実際のWebサイトを作りながら学べるハンズオン形式が最適です。本書は，解説の通りに操作を進めることでFigmaの基本をマスターできる，初学者必携の入門書です。解説に使用している作例データは画像を含めてダウンロードできるので，

①実務に即したデザインを
②実際の流れに沿って制作し
③完成させることができます！

オートレイアウト，コンポーネント，スタイル，バリアブルといったFigma特有の機能はもちろんのこと，最新のWebサイトに必須のハンバーガーメニュー，カルーセル，レスポンシブ対応など，現場で今すぐ活用できるスキルをこれ1冊に詰め込みました。Figmaの最新UIにも対応した，Figma入門の決定版です。

●本書の内容
LESSON 1　Figmaの概要とレッスンの準備
LESSON 2　スマートフォンのWebデザイン
LESSON 3　スクロールするスマートフォン画面
LESSON 4　ページ遷移するカード型ページ
LESSON 5　ハンバーガーメニューとカルーセル
LESSON 6　レスポンシブなWebデザイン
LESSON 7　インタラクティブなUIパーツ

●本書で学べる内容
レイアウトグリッド／オートレイアウト／コンポーネント／インスタンス／プロトタイプ／スタイル／バリアブル／バリアント／オーバーレイ／ハンバーガーメニュー／カルーセル／レスポンシブ／ナビゲーション／検索用ウィンドウ／アニメーション／チェックボックス／ファイル共有　など

こんな方におすすめ

  • Webデザイナーを目指す学生・社会人
  • 制作会社に入ったばかりの新人Webデザイナー

本書のサンプル

本書の一部ページを，PDFで確認することができます。

目次

  • はじめに
  • 本書の利用方法
  • LESSON用のサンプルファイル
  • 本書のLESSONで作成する内容

LESSON 1　Figmaの概要とレッスンの準備

  • 01　FigmaとUI/UXデザイン
  • 02　ソフトウェアの準備

LESSON 2　スマートフォンのWebデザイン

  • 01　スマートフォン画面の作成
  • 02　画像とテキストの基本操作
  • 03　アイコンの作成

LESSON 3　スクロールするスマートフォン画面

  • 01　オートレイアウトの基本操作
  • 02　コンポーネントの基本操作
  • 03　iOSコンポーネントの利用
  • 04　プロトタイプの基本操作

LESSON 4　ページ遷移するカード型ページ

  • 01　スタイルの作成
  • 02　バリアブルの作成
  • 03　ページ遷移の作成
  • 04　オーバーレイの作成

LESSON 5　ハンバーガーメニューとカルーセル

  • 01　ハンバーガーメニュー
  • 02　カルーセルの作成
  • 03　アプリでプレビュー再生
  • 04　Figmaファイルの共有

LESSON 6　レスポンシブなWebデザイン

  • 01　レスポンシブなフレームの拡大
  • 02　プロパティによるデザイン変更

LESSON 7　インタラクティブなUIパーツ

  • 01　検索用ウィンドウの作成
  • 02　検索操作アニメーションの作成
  • 03　チェックボックスの作成
  • 04　ドラッグで閉じるウィンドウ
  • Google　フォント
  • カラーコード
  • ショートカットキー一覧

著者プロフィール

古尾谷眞人（ふるおやまさと）

出版社，印刷会社，広告制作会社にて，DTP制作，Web制作，システム開発に従事。DTP/Web関連の書籍を多数執筆。2019年と2022年，一般財団法人海外産業人材育成協会（AOTS）の専門家として，ベトナムでDTP制作のインフラ構築，Webアプリの開発業務を行う。