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

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

紙版発売

B5判／240ページ

定価2,640円（本体2,400円＋税10%）

ISBN 978-4-297-14678-8

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

Figmaを使ったWeb/UIデザインをマスターするには，実際のWebサイトを作りながら学べるハンズオン形式が最適です。本書は，解説の通りに操作を進めることでFigmaの基本をマスターできる，初学者必携の入門書です。作例データをダウンロードし，実務に即したデザインを，実際の流れに沿って制作し，完成させることができます。オートレイアウト，コンポーネント，スタイル，バリアブルといったFigma特有の機能はもちろんのこと，最新のWebサイトに必須のハンバーガーメニュー，カルーセル，レスポンシブ対応など，現場で今すぐ活用できるスキルを詰め込みました。Figmaの最新UIにも対応した，Figma入門の決定版の登場です。

こんな方におすすめ

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

目次

  • はじめに
  • 本書の利用方法
  • 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アプリの開発業務を行う。