デザインの学校
デザインの学校
これからはじめるFigmaの本
- 浅野桜，ロクナナワークショップ 著
- 定価
- 2,420円（本体2,200円＋税10%）
- 発売日
- 2025.9.30
- 判型
- A4変形
- 頁数
- 160ページ
- ISBN
- 978-4-297-15029-7 978-4-297-15030-3
概要
Figma（フィグマ）はUIデザインやモックアップ、プロトタイプの作成に便利なデザインプラットフォームです。FigmaはWeb版とアプリ版があり、無料版と有料版があります。本書は無料で使えるWeb版のFigmaを使用して、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 完成したプロトタイプを確認／共有しよう
プロフィール
浅野桜
株式会社タガス代表・デザイナー。印刷会社、メーカーの販促・PR 担当を経て（株）タガス設立。主に中小企業に向けたウェブ・グラフィックの企画制作業務に加え、教育機関や企業研修などの講師、書籍の執筆などをおこなっている。
asano@tagas.co.jp
【主な著書】
『Illustrator＆Photoshop 基本がしっかりわかる授業 作って学ぶデザイン』（SBクリエイティブ）
『イラレの5分ドリル』『フォトショの5分ドリル（翔泳社）企画・共著
『スマートWebデザイン 脱・自己流のデザイン＆データ作成術』（MdN）共著
『はじめるデザイン —知識、センス、経験なしでもプロの考え方&テクニックが身に付く』（技術評論社）
【講師・講演】
洗足学園音楽大学 メディアアーツコース 非常勤講師
東京デザインプレックス研究所 ウェブクリエイティブコース 講師
ヒューマンアカデミー 講師（Photoshop,Illustrator,UIデザイン）
ロクナナワークショップ
Web制作の学校「ロクナナワークショップ銀座」では、企業や学校、各種団体での出張講座やオンライン講座など、さまざまな学びをご提供しています。
【対応講座】
●AI活用・SNS運用口座
●映像制作講座（Adobe Premiere Pro・Adobe After Effects）
●Web・IT・プログラミング講座
●デザイン講座（Figma・Adobe photoshop・Adobe Illustratorなど）
そのほか、幅広く対応可能です。
●個人やグループでの貸し切り受講
●各種イベントへの講師派遣
また、eラーニングコンテンツの開発や、教科書・副読本の指定、書籍・記事の執筆や監修などもお気軽にお問い合わせください。
【お問い合わせ】
株式会社ロクナナ・ロクナナワークショップ銀座
東京都中央区銀座6-12-13 大東銀座ビル GINZA SCRATCH
E-mail：workshop@67.org
https://www.rokunana.co.jp/