2025/05/16(金)21:00 〜 22:00

CSS関数や変数とFigmaを連携！コーダーをダメにするFigmaデザインデータ

オンライン

CSS, Figma, Meetup

イベント内容

本イベントは終了しています。「アーカイブ動画を見たい方」「スライドをダウンロードしたい方」はSTORESからお求めください。

月額：1,650円で2023年と2024年以降に開催の104本のアーカイブが見放題になるサブスクも用意しています。

FigmaのデザインデータとCSS関数を組み合わせることでコーディング工数を削減できるデザインデータの作り方についてせきゆおうさんに解説いただきます。

2025年1月に開催した#朝までマークアップ 2（CSS編）で好評だったセッションの拡大版です。

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

CSS関数や変数とFigmaを連携！コーダーをダメにするデザインデータの作り方／せきゆおう

Figmaの開発モードを活用するだけでもコーディングの工数は削減できますが、効率化をさらに進めてみませんか？
ローカルバリアブルの数値をCSS変数と統一し、「あるCSS関数」を取り入れることで、Figmaの開発モードで出力されるスタイルがより実用的に仕上がります。また、メディアクエリの数も減らせるので、コーディング工数もさらに削減でき、より運用しやすいコードを実現できます。FigmaのデザインデータとCSS関数を組み合わせ、多くのスタイルをコピペで効率的に構築できる「コーダーをダメにするFigmaデザインデータの作り方」をご紹介します！

せきゆおう

三重県出身。名古屋造形芸術大学短期大学部で建築を専攻するも、当時熱中していたオンラインゲームのギルドのHP制作を機に、Web制作者としての道を志す。

その後、複数のWeb制作会社を経験した後、2020年にフリーランスとして独立。受注から納品まで一貫して担当するジェネラリストタイプ。

独立した際にTwitterをスタートし、同年4月には石油王アカウントを開設。現在のフォロワー数は2.3万人に達する。2020年にWebクリエイター向けのオンラインコミュニティ「クリエイターズ・シナジーカフェ」の共同運営を開始。

2022年にはKADOKAWAドワンゴ情報工科学院で半年間、コーディングの初級講師を務めた。

2023年にColosoで「ゼロから学ぶ実践的なコーディング＆スキルアップ講座」をリリース。Voicyにて「アブラジオ」というラジオ番組も放送している。

𝕏（Twitter）：@wurst_design

聞き手、MC（進行）

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

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

株式会社スイッチ

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

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

10年ぶりの全面改定となる『10倍ラクするIllustrator仕事術』（改訂第3版）を2024年10月に出版。

Twitter：@swwwitch

イベント概要

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

開催日：2025年5月16日（金） 21:00 - 23:00
形式：オンライン（YouTube Live）
MC：鷹野雅弘（スイッチ）
主催：CeeBeeDee
共催：CSS Nite、DTP Transit
協賛（制作会社）：ウェブライダー、LINICA、エンタミナ、コンセント、サービシンク、ビットエー、ヘルツ、アップルップル、CODE54、HAMWORKS、S-FACTORY、necco、FLAT、ONiWA ほか
協賛：文賢（ブンケン）、一般社団法人ウェブコンサルタント・ウェブアドバイザー協会、JILLA（日本イラストレーション協会）

お申し込みと参加費

当日の視聴は無料です。
参加にはお申し込みが必要です。受け付けは終演時刻まで。

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

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

アーカイブ動画の視聴期限はありません。ずっと見られます。

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

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

アーカイブ動画の視聴期限はありません。ずっと見られます。

購入方法	個人	法人	受け取り	備考
金額
終演まで	その後
Doorkeeper （単品）	2,200円	-	11,000円	終演時刻にメールを送信（info@doorkeeper.jpから送信されます）	「当日の視聴のみ」のチケットを申し込まれた方は、いったん、キャンセルして「アーカイブ視聴付き」のチケットを申し込んでください。
STORES （単品）	2,200円	3,300円	11,000円	購入するとダウンロードできるテキストファイルに、アーカイブ動画や特典を掲載予定のページへのリンクがあります（アーカイブ動画や特典の掲載はイベント終了後）	ユーザー登録してから申し込むと、［マイページ］の［購入履歴］から、後からダウンロードできます。
サブスク	1,650円（月額）	詳細	［メンバー限定］セクションの［フォローアップ（アーカイブ）］から本イベントのNotionにアクセスしてください。	法人は別途

配信に関してのあれこれ

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

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

配信URL

YouTube Liveで配信します。

https://youtube.com/live/lvnm0zeCZyU?feature=share

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

YouTube関連

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

リアクションや質問

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

その他

「UDトーク」にて文字情報を提供しますので、別のブラウザーなどでご覧ください。タイムラグや精度についてはご容赦ください。
サンプルファイルや配布資料、アーカイブ動画のURLをSNSなどで再配布するのは禁止です。
開演の30分前くらい前からテスト配信をスタートします。音声などが聞こえるかチェックなさってください。
スマホやタブレットで視聴される方もいると思いますが、PCでの視聴を前提としています。なるべくPCでご覧ください！
ご覧いただく回線状況によっては、YouTubeの動画が止まってしまったり、音声が途切れてしまうことがあります。その場合には、ブラウザーを再読み込みしたり、OSを再起動してみてください。

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

領収書

インボイス対応の領収書が必要な方は、アーカイブ購入者向けのNotionからPDFをダウンロードしてご利用ください。

「アーカイブ視聴（会社として申し込み、社内で共有）」のチケットを購入いただいている場合のみ、個別対応いたします。

所轄税務署、インボイス制度電話相談センターなどに相談し、次のようにすることにしました。

インボイス対応の領収書発行について

オンライン椅子ヨガ

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

開演前
休憩時間（適宜）

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

方向性

いわゆる「オンラインセミナー」や「ウェビナー」というより「オンラインイベント」的なニュアンスです。
あえて「教えることを生業にしていない方」を（多めに）ブッキングしています。“聞き手”を立てることによってフォローしながら進めますが、それでも説明が足りなかったり、うまく時間配分をコントロールできないことがあります。
「オンラインで画面に向かって一人で喋る」のは場数を多く踏まない限り、苦行です。そこで聞き手を立て、うなづきや相づちを入れています。「うなづきがうるさい、不要」と思う方もいると思いますが、ご容赦ください！（録画の講座ではなく、オンラインイベントなのです）
「当日の視聴は無料」ということは謝礼もしかるべき金額ですし、日々の仕事の中から準備の時間を捻出されています。少し寛大なムードで受け取ってくださいますと幸いです。
分単位で細かく練られたカリキュラムではなく、少し緩めに進行します。コメントを拾って脱線することもあります。言い換えると学習だけをされたい方には向いていません。
若干の延長など、ぴったり進行しないことがあります。