出版社内容情報
Figma（フィグマ）はUIデザインやモックアップ、プロトタイプの作成に便利なデザインプラットフォームです。FigmaはWeb版とアプリ版があり、無料版と有料版があります。本書は無料で使えるWeb版のFigmaを使用して、Webサイトのモックアップとプロトタイプ作成の手順を解説します。
【目次】
Chapter0 Figmaについて知ろう
01 Figmaの特徴を確認しよう
02 アカウントを登録しよう
03 Figmaのインターフェースを確認しよう
04 画面表示とモードを切り替えよう
05 お手本ファイルをダウンロードしよう
06 お手本ファイルを読み込もう
Chapter1 ロゴを作ろう
01 新規ファイルを作ろう
02 フレームを作ろう
03 角丸四角形を描こう
04 半円を描こう
05 オブジェクトを複製＆変形しよう
06 曲線を描こう
07 塗りと線を設定しよう
08 文字を入力しよう
09 グループ化して書き出そう
Chapter2 バナーを作ろう
01 ページを追加しよう
02 バナーの背景にグラデーションを設定しよう
03 ロゴを配置しよう
04 直線を描こう
05 バナーに文字を入力しよう
06 フレームを画像として書き出そう
Chapter3 レイアウトのベースを作ろう
01 ページとフレームを作って準備しよう
02 レイアウトガイドを設定しよう
03 画像やボタンの場所を決めよう
04 テキストボックスで文字を入力しよう
Chapter4 パーツを作ってレイアウトしよう
01 色のルールを色スタイルに登録しよう
02 フォントのルールをスタイルに登録しよう
03 ボタンを作ろう
04 アイコンと大見出しを作ろう
05 ヘッダーを作ろう
06 ヘッダーのメニューが開いた状態を作ろう
07 フッターのベースを作ろう
08 お知らせエリアのベースを作ろう
09 コンテンツカードのベースを作ろう
Chapter5 トップページのデザインを完成させよう
01 コンポーネントを複製して配置しよう
02 フッターを完成させよう
03 メイン画像エリアを作ろう
04 お知らせとコンテンツカードを作ろう
05 原稿を流し込もう
06 データを調整しよう
Chapter6 下層ページとプロトタイプを作ろう
01 下層ページを作ろう
02 ボタンにバリアントを設定しよう
03 プロトタイプで画面どうしをつなごう
04 インタラクションでハンバーガーメニューの開閉を設定しよう
05 バリアントにコネクションの設定をしよう
06 完成したプロトタイプを確認／共有しよう
内容説明
Ｗｉｎｄｏｗｓ＆Ｍａｃ［対応］。一番やさしいＦｉｇｍａの入門書。
目次
０ Ｆｉｇｍａについて知ろう
１ ロゴを作ろう
２ バナーを作ろう
３ レイアウトのベースを作ろう
４ パーツを作ってレイアウトしよう
５ トップページのデザインを完成させよう
６ 下層ページとプロトタイプを作ろう
著者等紹介
浅野桜［アサノサクラ］
株式会社タガス代表・デザイナー。印刷会社、メーカーの販促・ＰＲ担当を経て（株）タガス設立。主に中小企業に向けたウェブ・グラフィックの企画制作業務に加え、教育機関や企業研修などの講師、書籍の執筆などをおこなっている（本データはこの書籍が刊行された当時に掲載されていたものです）
※書籍に掲載されている著者及び編者、訳者、監修者、イラストレーターなどの紹介情報です。
-
- 電子書籍
- 辻浦さんとチュパカブラ 3 少年チャン…
