Doorkeeper

CSS Nite in Osaka, vol.58「デザイナーとコーダーがお届けする、今日からできるFigma & Coding」

2023-05-20(土)13:00 - 18:00 JST

中央会計セミナールーム

大阪市中央区備後町3-6-2 大雅ビル3F

申し込む

申し込み受付は終了しました

今後イベント情報を受け取る

A[先着割引] セミナーのみ(先着7名) 4,000円 前払い
B[先着割引] セミナー + 懇親会(先着7名) 5,500円 前払い
Cセミナーのみ 5,000円 前払い
Dセミナー + 懇親会 6,500円 前払い
E【アーカイブ参加】当日参加できない方用 : 開催後に動画で視聴 4,000円 前払い
出演者・運営スタッフ 無料

詳細

当日参加できない方は、「アーカイブ参加」にお申し込みいただければ、後日アーカイブ(録画)を視聴いただけます。

CSS Nite in Osaka, vol.58は、リアル会場での開催となります。


  • 当日は入室時の検温とアルコール消毒をしていただき、発熱してる方には、全額返金対応をさせていただきます

  • 講師、司会者など出演者は、ライブ要素的な観点からマスクなしで行います

  • 参加者の方のマスクの着用は、各個人の判断におまかせします

デザイナーとコーダーがお届けする、
今日からできるFigma & Coding

Figmaは、2022年7月に待望の日本語版がリリースされ、2022年9月には Adobe社が買収する意向を発表するなど、今最も注目を集めているデザインツールです。

今回のCSS Nite in Osakaでは、Figmaでのデザインカンプとプロトタイプ作成からその後のコーディングまでの流れを、セミハンズオンでじっくりと学びます。

※参加者の方も手を動かしながら学習するセミハンズオン形式としていますが、「一緒に操作はせず、聞くだけ」「後でアーカイブでじっくりやってみる」という参加方法も歓迎です!

FigmaでレスポンシブWebデザイン

コラボレーションインターフェイスデザインツールであるFigmaには、Webデザインを効率良く行うための機能が多数搭載されています。

コーダーが「よしなに」実装してくれることを期待したり甘えたりせず、プロジェクトメンバーがしっかりと実装のイメージがつかめるような、適切なデザインデータを作成しましょう。

Figmaでのデザイン作業を通して、次の内容を学習します。

  • 制約やオートレイアウトを活用したレスポンシブWebデザイン制作
  • コンポーネントやアセットを活用した、編集に強いデザイン
  • Figmaでのプロトタイプ作成
  • 画像の書き出しなどの、コーダーへの引き継ぎ方法

「Figmaを使うのは初めて」でも大丈夫ですが、Adobe XDやPhotoshop、Illustratorなど他のデザインツールを触ったことがあることを前提に進めます。

講師はFigmaのデスクトップアプリ版を使用しますが、Figmaのブラウザ版を使っていただいてもかまいません。

Figmaから効率よくコーディング

適切にデザインされたFigmaデータからは、今までグラフィックデザインツールで表現できなかった中間サイズの挙動などやインタラクションなどを読み取ることができます。

今回のハンズオンではFigmaデータに込められたデザイナーの意図を汲み取り、効率的に実装するためのコーディングを学びます。

実際のデザインデータからのコーディングで、次の内容を学習します。

  • レスポンシブデザインを前提としたコーディング
  • モダンブラウザから対応したCSSプロパティ
  • ブラウザ上でのパフォーマンスを意識した実装
  • Figmaデータの効率的な読み取り方

HTML・CSSの基本的な書き方については解説しません。 HTML・CSSがそれなりに書けることを前提に進めます。

講師はVisual Studio Codeを使用しますが、お好きなコードエディタを使っていただいてもかまいません。

こんな方におすすめ

  • Figmaの基本操作を学びたい方
  • FigmaでのWebデザインを学びたい方
  • Figmaのデザインカンプを元にコーディングする方法を学びたい方
  • デザインとコーディングを勉強中、またはお仕事で必要な方
  • レスポンシブWebデザイン、レスポンシブコーディングを学びたい方

持ち帰れるもの

  • FigmaのTips
  • コーディングのTips
  • デザイナーとコーダーの連携方法
  • 今後のレベルアップの足掛かり

扱わないこと

  • 「Webデザインって何?HTML&CSSって何?」といった基礎知識
  • Figmaのビジネスプランやエンタープライズプランなど、上位プランでしか使えない機能
  • FigmaとVisual Studio Codeのインストール方法(一緒に作業したい方は、予めインストールしてきてください)

持ち物

  • Figmaのデスクトップアプリ、Visual Studio CodeがインストールされたPC
  • PCの充電ケーブルと延長ケーブル
  • 筆記用具等
「一緒に操作はせず聞くだけでいい」という方は、PCがなくてもご参加いただけます。

出演

松下 絵梨(まつした・えり)

松下絵梨

株式会社ロクナナ

大阪出身大阪在住のWeb/UIデザイナー。東京理科大学理工学部卒業。

通信機器メーカーで開発・サポート業務に従事したのち、デザイン・広報秘書業務に転身。2010年からフリーランスとして独立し、DTP/Web/アプリデザイン、ディレクションを行なっている。

講師業や「Adobe XD ユーザーグループ大阪」、「CSS Nite in Osaka」の運営、セミナー登壇・企業研修にも力を入れている。 2020年に『Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル』(翔泳社)を上梓。2023年から株式会社ロクナナに所属。

長谷川 喜洋(はせがわ・よしひろ)

星のソムリエ

フロントエンドエンジニア

株式会社How to Use CTO/株式会社ステラクリエイト CEO/総合webサービス タダフラ 代表/デジタルハリウッドSTUDIO大阪・京都芸術デザイン専門学校 講師/星のソムリエ®

大阪生まれ大阪育ち。 パチンコ店の店長からEC業界へ。そののち、知財を扱うスタートアップでシステム開発・Webサイト制作・アプリ開発を担当。フリーランスとしてWeb制作も行う。
EC時代に天体望遠鏡を販売していた経験から、星空事業を主とした法人を2020年6月に設立。

イベント概要

イベント名 CSS Nite in Osaka, vol.58「デザイナーとコーダーがお届けする、今日からできるFigma & Coding」
日時 2023年5月20日(土)13:00-18:00(開場12:30)
(終演時間は変更の可能性アリ)
会場 中央会計セミナールーム
会場定員 40名(アーカイブ参加は定員なし)
出演 松下 絵梨(まつした・えり)
長谷川 喜洋(はせがわ・よしひろ)
司会進行 松下 絵梨
形式 セミハンズオン
Twitter

CSS Nite in Osaka 公式Twitter

ハッシュタグは #cssniteです。

タイムテーブル

時間 イベント 出演者
12:30 開場・受付開始
13:00 オープニング
13:10 FigmaでレスポンシブWebデザイン 松下 絵梨
15:10 休憩・転換
15:30 Figmaから効率よくコーディング 長谷川 喜洋
17:30 休憩・転換
17:40 アフタートーク・エンディング 松下 絵梨・長谷川 喜洋
18:00 終了

懇親会(別途実費)は、同会場にて、18:10〜19:30頃を予定しています。

後日の視聴

「アーカイブ参加」でお申し込みされた方、当日参加できなかった方、および改めて見返したい方には、開催後に発行するフォローアップメールにてアーカイブ動画の視聴URLをお知らせします。

  • 動画の視聴期限は開催から3週間を予定。

領収書

領収書はDoorkeeperから発行できます。

その他

  • 開催前に「カウントダウンメール」、開催後に「フォローアップメール」をお送りします。こちらを必ずご一読ください。
  • 本セミナーのタイトルや内容は調整されることがあります。

お問い合わせ

コミュニティについて

CSS Nite in Osaka

CSS Nite in Osaka

CSS Nite(シーエスエス・ナイト)は、Web制作に関わる方のためのセミナーイベント。 大阪版の「CSS Nite in Osaka」は、2018年4月から、ツキアカリが運営しています。

メンバーになる