Doorkeeper

Figmaの制作フロー大解剖〜UI制作からコーディングまで

2022-05-21(土)21:00 - 23:00 JST
オンライン リンクは参加者だけに表示されます。
申し込む
当日の視聴のみ 無料
申込締切
5月21日 23:00
当日の視聴のみ(応援チケットA) 500円 前払い
申込締切
5月21日 23:00
当日の視聴のみ(応援チケットB) 1,000円 前払い
申込締切
5月21日 23:00
アーカイブ視聴(後日の視聴のみ) 2,000円 前払い
申込締切
5月21日 23:00
アーカイブ視聴(後日の視聴を含む) 2,000円 前払い
申込締切
5月21日 23:00
出演者、スタッフ 無料 受付終了
協賛企業枠 無料 受付終了

詳細

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

Figmaを使ったUIモックアップの制作からコーディングまでの一連の流れを綿貫 佳祐さんに紹介いただきます。「当日の視聴は無料」スタイルで開催します。ぜひ、ご参加ください!

Figmaの制作フロー大解剖〜UI制作からコーディングまで

日本法人が設立され、日本語版のリリースが予定されている「Figma」。ますます人気が高まっています。

Figmaにどっぷりの方がいるなか、様子見されている方もいるでしょう。

  • 実際、どこまでできるの?
  • XDでなくFigmaの理由は?
  • Figmaでデザインした後、どうやってコーディングしていくの?

本セミナーでは、Figmaを使ったUIモックアップの制作からコーディングに移っていく一連の流れまで、ふんだんにデモを盛り込みながら紹介します。

昨今デザイナーに求められる範囲が広がっており、それに対応していくにあたってのFigmaの活かし方、という観点でもお話します。

こちらのような架空のサイトを1から作る様子をお見せします。

セッション内容を真似しながら作ることで、次の観点が網羅されたモックアップをご自分でも作れるようになります。

  • 色やタイポグラフィー、グリッドのスタイルを一揃え用意する方法
  • ヘッダーやナビゲーションなど、使い回しの多いパーツの作り方
  • モバイルとデスクトップにあわせたパーツの作り分け方

出演

Qiitaを運営していることでも知られるIncrementsにてデザイン、コーディングなどを行っている綿貫さんにお話しいただきます。

綿貫 佳祐(わたぬき けいすけ)

Qiita株式会社

2017年に株式会社エイチームに入社。クレジットカード、ライフエンディング、住宅ローン、家計の節約、不動産、自動車……と各種サービスを担当。2020年よりグループ会社であるQiita株式会社にてQiitaの開発に携わっています。

聞き手

CSS Niteを運営する鷹野 雅弘が「聞き手」を務めます。

鷹野 雅弘(たかの・まさひろ)

株式会社スイッチ

グラフィックデザイン、エディトリアルデザイン、ウェブ制作の分野で、デザイン、オペレーション、設計・ディレクションなど、20年以上、第一線で手を動かし続けている。

そのノウハウをテクニカルライティングや講演に落とし込み「制作→執筆→講演」のサイクルを回す。

2015年から大阪芸術大学 客員教授。 2017年からAdobe Community EvangelistAdobe MAX US 2018に出演。

2005年にDTP制作者向けの情報サイトとしてスタートしたDTP TransitTwitternoteYouTube、オンラインセミナーなどに活動の場を広げている。

イベント概要

  • 開催日:2022年5月20日(金)21:00 - 23:00
    • 最大30分程度、延長することがあります。
  • 形式:オンライン(YouTube Live)
  • 主催:CSS Nite
  • 共催:DTP Transit
  • 参加費:
    • 無料
    • 応援チケット(綿貫さんにお渡しします)
    • 2,000円(アーカイブ視聴)

終演時間は若干の延長の可能性があります。

配信URL、お申し込みとアーカイブ公開について

YouTube Liveにてライブ配信します。

https://youtu.be/cJ0wdll8f_M

  • お申し込みされなくても参加は可能です。お申し込みされた方にはリマインダーメールやフォローアップメールをお送りします。
  • アーカイブは非公開です(アーカイブのチケットを申し込まれた方を除く)。
  • 当日参加できない方、後日ゆっくり見返したい方は「アーカイブ」のチケットを選択ください。noteから後日購入できます。

当日の進行などに関して

  • 開演の20分前くらい前(20:40くらい)からテスト配信をスタートしますので、音声などが聞こえるかチェックされてください。
  • トラブル等により配信URLを変更する可能性があります。「配信がはじまらないな…」と思ったら、YouTubeのコメント欄を参照ください。Twitterにてもお知らせします。
  • 終演時間は若干の延長の可能性があります。
  • 途中に5-10分程度の休憩をはさみます。
  • YouTube上でコメントするために、アカウントを制作しておかれることをオススメします。

ツイートなどの発信やスクショに関して

  • 配信URL、および、その他の案内事項は、カウントダウンメールにてお知らせするNotionのフォローアップページに記載しています(終了後、スライドやリンク集、セミナー内容の補足などを掲載します)。
  • ツイートされる方は「#Figmaの制作フロー大解剖」のハッシュタグを付けてください!
  • スクショ(スクリーンショット)は自由にどうぞ!(事例の部分などでNGマークがついている箇所はご遠慮ください)
  • スクショされるとき、講演者の顔が入ってもOKです。
  • ツイートされたり、ブログに掲載されてもOKです。
  • サンプルファイルや配布資料をそのまま再配布するのは、ご遠慮ください。

その他

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

オンライン椅子ヨガ

今回のCSS Niteはコモモ先生 @komomoaichi のオンライン椅子ヨガ付きです!

  • 19:45-20:00 開演まで
  • 20:55-21:05 休憩時間(前後することがあります)

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

Twitter/note/YouTubeをフォローください!

セミナー前後に関連情報をお出しすることがありますので、Twitter/note/YouTube/LINEをフォローくださいますと幸いです。

CSS Nite(シーエスエス・ナイト)は、ウェブ制作に関わる方のためのセミナーイベント。2005年10月にスタートし、2021年10月で丸16年。

これまでに、800回を超える関連イベントを通して、のべ75,000名を超える方にご参加いただいています(2021年10月現在)。

協賛

CSS Niteには次の企業をはじめ、多くの制作会社に協賛いただいています。

株式会社ヘルツ有限会社アップルップルともすた株式会社トゥーアール(to-R)株式会社Gear8Qiita株式会社

コミュニティについて

CSS Nite

CSS Nite

CSS Nite(シーエスエス・ナイト)は、ウェブ制作に関わる方のためのセミナーイベント。2005年にスタートし、2021年10月で丸16年。 仙台、大阪、岡山、札幌、甲府、神戸、福岡、長野、青森、名古屋、沖縄、福島など首都圏以外での“地方版”なども開催しています。地方版は、現地の有志などにより主催・運営されています。 これまでに、800回を超える関連イベントを通して、のべ75,000名...

メンバーになる