実務で使えるFigma Sitesのコツを伝授！デザインからサイト構築までFigmaだけでWeb制作

2025/12/23(火)21:00 〜 23:00 開催
ブックマーク
#Figma, #ノーコード/ローコード, #CSS

イベント内容

『デザインからサイト構築まで FigmaだけでWeb制作』の著者の3人にFigma Sitesの基本から実務で使える公開手順までを解説いただきます。

「リアルタイム視聴は無料」スタイルで開催しますが、アーカイブチケット購入やサブスク登録でサポートくださいますと助かります！

実務で使えるFigma Sitesのコツを伝授！デザインからサイト構築までFigmaだけでWeb制作

Figma Sitesの制作のコツや注意点に加え、Figma Sitesだけでは再現できない細かいインタラクションはFigma Makeを使って構築し、「デザインからWeb公開まで」の流れをデモンストレーションを交えて実施！

「コーディングが苦手だけど、Figmaでデザインも公開も完結させたい！」
「ノーコード時代のWeb制作を実践的に学びたい！」

そんな方におすすめの内容です。

新しいノーコード時代のWeb制作に興味がある方は是非ご参加ください。

Figmaの基本操作ができる方

  • Figmaの基本操作ができる方
  • Figma Sitesを触ったことがない or 触りはじめた方
  • ノーコードツールに興味がある方

『デザインからサイト構築まで FigmaだけでWeb制作』

本書は、Figmaの基本操作からWebサイト制作、そしてUI/UXの思考法までを 一冊で学べる実践型の書籍です。
執筆者が全員講師陣のため、デザインの作り方だけでなく、「なぜその配置にするのか？」「どのように意図を伝えるのか？」といった設計思考まで解説しています。

また、本書の最大の特徴は、Figma Sitesの解説本であること。
ノーコードでWebサイトを公開できるFigma Sitesを使いながら、デザインから公開までの流れをワーク形式で学べる構成となっています。

また、実務で役立つUI/UXの基礎、改善のポイント、デザインを伝えるためのプロトタイピングなど、現場のデザイナーがもう1段ステップアップできるようなノウハウも収録。
Figmaを「使える」だけで終わらせず、「活かせる」スキルへとつなげることを目指しています。

読者特典として、Figma Sitesで使えるポートフォリオテンプレートもダウンロード可能。
初心者の学習用としても、2冊目のFigma本としても最適な内容となっています。

濱野 将

株式会社IMAKE CEO

Adobe Community Experts

デザイナーとして紙媒体・Webデザイン・動画編集などを行ってきた約20年の実績経験から、多角的な視点でUI/UXを考慮したディレクションや、動画教材のアドバイザーとして活動中。

また、大学や専門学校の講師やスクール講師、オンライン学習コンテンツのコース開設もしており、これまでの受講者は延べ15,000人を超える。

特に講義・研修・Eラーニングなどにおける、カリキュラム構成を作るのが得意。

ワークショップ・ディスカッション・プレゼンテーションを組み込んだ学習定着率を向上させる仕組みを取り入れ、短期間で効率の良いシナリオを作るのを得意としており、受講者に対して満足度の高い講義を提供している。

小泉 誠

株式会社IMAKE COO

Studio FireColorの屋号でフリーランス歴12年。業界歴20年。Web制作会社、SEO関連会社、システム開発会社などを経て独立。

Webデザイナー、UI/UXデザイナー、フロントエンド、SEO、マーケティング、システム開発、動画制作、社内のIT化のコンサルティングなどなど。

現在は「本人も職種がわからない…」といった感じで、ゼネラリスト道を邁進中。

基本的にモノづくり好きで調理師免許を持ち、飲食店経営の経歴もあり。

近年は自分で勉強会を主催したり、Web技術の講師などにも従事。

現在は株式会社IMAKEにも役員として参画し、組織デザインに取り組んでいる。

庄司 美雪

合同会社いろは 代表

1992年2月8日生まれ。宮城県仙台市の文系大学を卒業後、東京でインフラエンジニアとして就職。

その後、Web広告業界で営業や広告運用を経験し、広告に関わる中でWebメディア制作に関心を持ち、フロントエンドエンジニア兼Webデザイナーに転身。

フリーランスを4年経て法人化し、現在はWebサイト・Webアプリ制作に限らず、コーディングメンターやコーチング、ライターなどWebに関わる様々な仕事を広く手がける。

聞き手、MC（進行）

鷹野 雅弘（CeeBeeDee/CSS Nite/DTP Transit）が“聞き手”を担当し、リアルタイムでチャットでの質問などを拾っていきます。

鷹野 雅弘（たかの・まさひろ）

株式会社スイッチ

グラフィックデザイン、エディトリアルデザイン、ウェブ制作の分野で、デザイン、オペレーション、設計・ディレクションなど、25年以上、第一線で手を動かし続けている。そのノウハウをテクニカルライティングや講演に落とし込み、「制作→執筆→講演」のサイクルを回す。

2015年から大阪芸術大学 客員教授。2017年からAdobe Community Evangelist。CSS NiteやDTP Transitのオンラインセミナーのオーガナイザーとして企画・制作・配信なども担当。

著書に『10倍ラクするIllustrator仕事術』（改訂第3版）ほか多数

イベント概要

YouTube Liveでライブ配信します。

お申し込みと参加費

  • リアルタイムの視聴は無料です。
  • 参加にはお申し込みが必要です。受け付けは終演時刻まで。

フォローアップ（アーカイブ）

有料チケットには次が含まれます。これを「フォローアップ」と呼んでいます。

  • アーカイブ動画
  • スライド
  • リンク集や補足
  • サンプルファイルなど（プログラムにより）

フォローアップ（アーカイブ）は、アーカイブ購入／サブスクの方限定のコンテンツです。

  • アーカイブ動画の視聴期限はありません。ずっと見られます。
  • 法人およびフリーランスで事業決済される方は「法人向け」をお求めください。

フォローアップ（アーカイブ）の購入

次の3つの方法があります。いずれかを選択なさってください。

  • 終演時刻まで：Doorkeeper
  • 終演時刻以降：STORES
  • サブスクを登録する

Doorkeeperの場合、終演時刻にメールをお送りしています。メールの送信元は、info@doorkeeper.jp です。 メールに依存しないSTORESやサブスクであれば、メール関連のトラブルから開放されます。

購入方法種別フォローアップの受け取り備考
個人個人、
フリーランス		法人
Doorkeeper
（単品）		2,200円
（終演時刻まで）		5,500円11,000円

終演時刻にメールを送信（info@doorkeeper.jpから送信されます）

「当日の視聴のみ」のチケットを申し込まれた方は、いったん、キャンセルして「アーカイブ視聴付き」のチケットを申し込んでください。
STORES
（単品）		3,300円5,500円11,000円購入するとダウンロードできるテキストファイルに、アーカイブ動画や特典を掲載予定のページへのリンクがあります（アーカイブ動画や特典の掲載はイベント終了後）ユーザー登録してから申し込むと、［マイページ］の［購入履歴］から、後からダウンロードできます。
サブスク3ヶ月：35ドル［メンバー限定］セクションの［フォローアップ（アーカイブ）］から本イベントのNotionにアクセスしてください。法人は別途（詳細）
年パス：130ドル

領収書

個人向けのチケットは領収書発行していません。
インボイス対応の領収書は、次のチケットのみ対応します。

  • 個人／フリーランス（スライド、アーカイブ視聴付き） ※経費として
  • 法人（スライド、アーカイブ視聴付き）

NotionからPDFをダウンロードしてご利用ください。

購入方法区分参加費領収書入手方法
Doorkeeper
（単品）		個人2,200円
発行（インボイス非対応）Doorkeeper
個人／フリーランス5,500円インボイス対応の
領収書を発行		Notion
法人11,000円
STORES
（単品）		個人3,300円非対応-
個人／フリーランス5,500円インボイス対応の
領収書を発行		Notion
法人11,000円
  • 「法人（スライド、アーカイブ視聴付き） 」のチケットを購入いただいている場合のみ、記名入りの領収書に対応いたします。フォームからご連絡ください。

配信に関してのあれこれ

各URLは、YouTubeの概要欄にも掲載しています。

  • チャットやスタンプ、ツイートなど「参加型」でお楽しみください！
  • 「音声のバランスが悪い」など、何かお困りの場合、コメントなどで教えてください！

配信URL

YouTube Liveで配信します。

https://youtube.com/live/8r0x8_L49Bw?feature=share

X（Twitter）にて同時配信も行っていますが、YouTube Liveにてコメントも含めてお楽しみください。

配信トラブルでURLが変更になることがあります。その場合、次のようにお知らせします。

YouTube関連

  • YouTubeチャットを活用ください！　スパム回避のため、YouTubeチャンネル登録者のみがコメント可能にしていますので、事前にチャンネル登録をお願いします。
  • スーパーチャット（スパチャ＝投げ銭）を利用できます。少額でも大歓迎です！　いただいた全額を講演者にお渡しします。
  • 質問がある場合、YouTubeチャットで冒頭に★または【質問】を付けてコメントください。すべては拾いきれません。「〜は〜という意味です」「自分の現場ではこうやっている」など、視聴される方からのサポート的なコメントを歓迎します！　一緒に場を作ってくださいますと嬉しいです!!

リアクションや質問

  • スクショ付きのツイート歓迎です。ぜひ、ハッシュタグ（#FigmaだけでWeb制作）を付けてください。ただし、事例の部分などでNGマークがついている箇所、講演者からNGの指示のある箇所はご遠慮ください。
  • 終了後、ぜひアンケートにお答えください！　「フィードバックはギフト」。話してくださった方の成長の材料になり、また、イベントの改善につながります。

その他

  • 120分のプログラムでは、60分前後のキリのいいタイミングで休憩（5-10分）をはさみます。
  • サンプルファイルや配布資料、アーカイブ動画のURLをSNSなどで再配布するのは禁止です。
  • 開演の30分前くらい前からテスト配信をスタートします。音声などが聞こえるかなど、チェックなさってください。
  • スマホやタブレットで視聴される方もいると思いますが、PCでの視聴を前提としています。なるべくPCでご覧ください！
  • ご覧いただく回線状況によっては、YouTubeの動画が止まってしまったり、音声が途切れてしまうことがあります。その場合には、ブラウザーを再読み込みしたり、OSを再起動してみてください。同時配信しているX（Twitter）の方が安定してることがあります。
  • 分単位で細かく練られたカリキュラムではなく、少し緩めに進行します。コメントを拾って脱線することもあります。言い換えると学習だけをされたい方には向いていません。
  • 若干の延長など、ぴったり進行しないことがあります。

配信準備は念入りに行っていますが、本番になると予期せぬトラブルが生じるのがライブ配信です。それも含めて楽しんでください。

サブスク

CSS Nite、DTP Transitのオンラインセミナーのアーカイブをリーズナブルに、また、管理しやすく利用いただけるように「サブスク」（定額サービス）をご用意しています（Circleというサービスを利用しています）。

年間で60回近く開催されますので、1本あたり400円を切る計算です。

アーカイブ動画だけでなく、スライドのダウンロードも可能ですので、ざっと内容を把握しておきたい場合にも適しています。また、自分のペースで手元のスライドPDFを見ながらの視聴が可能です。

サブスクの登録方法

次の手順でお申し込みください。

  1. Circleでユーザー登録（自動返信メールを確認して完了です）
  2. Stripeで決済

オンライン椅子ヨガ

本イベントはコモモ先生 @komomoaichi のオンライン椅子ヨガ付きです！

  • 開演前
  • 休憩時間（適宜）

一緒に「ちょっとメンテ」しましょう。
https://chotto-maint.com/online-yoga

協力企業のご紹介

本イベントには、下記の企業の協賛、協力をいただいています。

また、多くの制作会社に協賛いただいています。

通年で協賛を募集しています。検討くださいますと幸いです。

お問い合わせ

問い合わせはDoorkeeperのフォームからお送りください。

注意事項

※ こちらのイベント情報は、外部サイトから取得した情報を掲載しています。
※ 掲載タイミングや更新頻度によっては、情報提供元ページの内容と差異が発生しますので予めご了承ください。
※ 最新情報の確認や参加申込手続き、イベントに関するお問い合わせ等は情報提供元ページにてお願いします。
情報提供元ページ（Doorkeeper）へ

新規会員登録

このイベントに申し込むには会員登録が必要です。
アカウント登録済みの方はログインしてください。

※ ソーシャルアカウントで登録するとログインが簡単に行えます。

※ 連携したソーシャルアカウントは、会員登録完了後にいつでも変更できます。

関連するイベント