【特別授業】ウェブ制作に強くなる！「Figma」初心者に向けて、『デザインからサイト構築まで FigmaだけでWeb制作』著者・講師3人が特別セミナーを実施
KADOKAWAドワンゴ情報工科学院では、実践的授業を定期的に実施しています。
今回は、『デザインからサイト構築まで FigmaだけでWeb制作』（日経BP刊）の著者である濱野 将講師、馬場 快人講師、すがはら りさ講師を迎えた特別授業をレポートします。
受講生には、『デザインからサイト構築まで FigmaだけでWeb制作』1章をまるごと贈呈するという特典つきです。
すがはら講師「プロジェクト型の学習構成で作りながら覚えることができます。セミナーがヒントになれば嬉しいです」
馬場講師「BEKIND DESIGN グラフィック系デザインと、講師業をしております。よろしくお願いします」
濱野講師「IMAKEという制作会社を10年ほどしております。紙媒体、ウェブ媒体、動画編集も手掛けています。UI、UX、ウェブデザインをするうえでFigmaは欠かすことができないツールです。UI/UXを学べば、それだけで仕事ができるようになります」
【1. 「Figma」について】
Figma（フィグマ）は近年、多くのデザイナーや企業に選ばれているデザインツールです。Webサイトやアプリのデザインを効率良く制作できるだけでなく、検討、改善、プレゼンを含む一連の作業を効果的に進めることができます。クラウドベースなので共同作業にも向いています。さらに2025年には、デザインしたWebサイトをそのまま公開する新機能「Figma Sites」を搭載し、HTMLなどのコーディングの知識がなくても、Webサイトを制作・公開できるようになりました。
【2. デザインとは「目的を達成するための設計」】
Designare（デジナーレ）とはラテン語で、「計画を記号に表す」という意味を持ち、Designの語源とされています。
すがはら講師「目的を達成するための設計として扱われていました。デザインって、見た目をきれいにすることじゃなくて、“どう見せたいか”“どう伝えたいか”を整理することです。考えた意図を共有し検証できるツールが大事になります」
・デザインシステムの構築に優れている
・リアルタイムでの共同編集が強み
・プロトタイプの作成が可能
すがはら講師「デザイナーとエンジニアのコミュニケーションがとりやすくなります。またプロトタイプの作成が可能なので、実装後のやり直しが減ります」
今回は、オートレイアウト／制約／コンポーネントについて学びます。
【3. オートレイアウト、制約、コンポーネントを学ぶ！】
今回の授業では、Figmaの中でも特に重要な3つの機能について学びます。
【オートレイアウトとは】「要素の配置・余白・伸縮」を自動で調整するレイアウト機能。
【制約とは】親フレームに対して子要素をどう固定するかを決める設定。
図形に、左寄せ、中央寄せなどの属性を付与することによって図形の挙動や、フッターの仕様などを再現することができます。
講師の画面で「制約」の挙動を確認し、受講生も設定していきます！
【コンポーネントとは】
馬場講師「Figmaの機能を使う中で非常に重要です。コンポーネントとは、繰り返し使うパーツのひな型です。Webやアプリ制作では、同じパーツを繰り返し使う場面があります。そのため、あらかじ、めひな型（テンプレート）を用意しておくことで効率的に進めることができます」
複製されたパーツを「インスタンス」と呼びます。
馬場講師「ウェブサイトの修正が来たときに、一つひとつ修正しないといけないことが起こりますが、Figmaコンポーネント機能をつければ同じ修正が適用されます」
馬場講師「複数個インスタンスを作ったときのメインコンポーネントの見分け方は、ひしがたマークが4つついているものが目印です！また、インスタンス（複製された子どもたち）の文字を直接編集すると、メインコンポーネントとのリンクが切れてしまい、デザインの編集が反映されませんので注意してください」と、注意点も紹介されました。
【4. Figma上で作成したデザインはWebサイトとして公開可能】
濱野講師「Figma 上で作成したデザインを、そのまま Web サイトとして公開できる機能があります。 HTML や CSS の知識がなくても、リリース可能な Web サイトが作成できます。さらにサイト運用もできてしまいます」
【Figma Sitesで制作するのがオススメ】
濱野講師「LP、イベントサイト、小規模なコーポレートサイト、シンプル構造のポートフォリオサイト制作にオススメです。すべての案件をFigma Sitesに置き換えるよりも、まずはシンプルな領域・スピード重視の領域から試すのが現実的です。
多層構造型のサイト、アプリやサービスの設計は、Figma Designを活用しましょう」とアドバイス。
授業中の様子
授業中の様子
授業中の様子
【5. 授業のまとめ】
濱野講師「Figmaの機能をフル活用することで、効率的なデザイン、『オートレイアウト』による崩れにくいUI設計や柔軟なレスポンシブ対応が実現できます。
個人的には、Figmaが使えたら雇います！
皆さんのために課題もありますし、質問も受け付けます。引き続きぜひ練習してみてください」とエールを送りました。
【6. 参加した学生の感想は？】
授業中、熱心にメモを取っていたSさんは、「かっこいいサイトを簡単に作ってスピード公開するのにFigma Sitesがとても便利だとわかりました。WixやStudioに比べ、レイアウトやボックスをかなり自由にいじることができるので、自分の好きなサイトを作れそうです」と、新しい知識を吸収していました。
また特別授業終了後も、在校生メンバーは講師に直接質問をし理解を深めていました。
業界で活用されているスキルや最新動向をプロ講師に教えてもらうことで、在学中からデビューできる実践的スキルを養います。
当スクールやIT・Web業界にご興味のあるかたは、ぜひパンフレットを取り寄せて詳細をご確認ください！
【講師PROFILE】
Riifav すがはらりさ講師
UI/UXデザイナー兼デザイン講師。人の“お気に入り”を生むデザインを志し、現場と教育の両面から、ブランディングを意識したデザインづくりに取り組んでいる。
BKIND DESIGN 馬場 快人講師
「快いデザイン」をテーマに、Webデザインやグラフィックデザインを中心に活動。写真撮影や授業を行う。
株式会社IMAKE 代表取締役 濱野将
紙媒体・Webデザイン・動画編集などを行ってきた約20年の実務経験から、多角的な視点でUI/UXを考慮したディレクションや、動画教材のアドバイザーとして活動中。
