デザイナー必修 SVG 基本&アニメーション ハンズオン強化版

対面 オンライン

SVGの第一人者 松田直樹氏が解説する、デザイナーが知っておくべきSVGの基礎から作成・実装、フィルターやアニメーションまで学ぶ実践講座。

こんなことを学びます

日本全国や海外在住の方がご参加可能な、オンライン講座に対応しています。

受講お申し込みのすべての方が、講座開催後1週間、お好きなときに開催当日の収録動画をご視聴して復習いただけます。

--

【従来の内容からハンズオンの時間を拡張した、3時間のロングバージョンです】

今や、グラフィックフォーマットしてその使用が常識となった、SVG(スケーラブル・ベクター・グラフィックス)。
その魅力はベクター形式ゆえの美しさや再編集のしやすさにとどまらず、さまざまな表現や効果、アニメーションなど、多彩な機能や可能性にもあると言えます。

Scalable Vector Graphics - ウィキペディア < https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics >

この講座では、SVGの第一人者として著名な株式会社まぼろしの松田直樹氏を招き、その基礎知識から作成や実装方法までをハイブリッド・ハンズオンで徹底解説。
SVGの基本と可能性を実践的に学びます。

SGVのベーシックとスペシャルを、しっかりと目撃してください。


Keywords:
SVG, ウェブデザイン, Scalable Vector Graphics, アニメーション, viewBox, フィルター, Illustrator, XD


● この講座で学べること
○ viewBox,座標,表示サイズの概念
○ Adobe IllusratorやAdobe XDからの書き出し方法
○ SVG書き出し後のコードの見方
○ SVGフィルター効果
○ SVGのアニメーション(TweenMax)
○ SVGの最適化・軽量化

● この講座で得られること
○ SVGの基礎知識
○ SVGの応用知識
○ SVGの基礎的作成能力
○ SVGの応用的作成能力
○ マイクロインタラクションをデザイナー側で設計できる可能性
※ 学習教材や資料がある場合は、お持ち帰りいただけます。
※ 講座内で利用するデモなどのサンプルファイルがある場合は、ダウンロード可能です。
※ 各種受講証明書への署名・発行に対応します。

● この講座の特徴
○ ハンズオン講座ながら、手ぶらの聴講のみでもご参加可能なハイブリッド・ハンズオン形式です。
○ 実践的な知識や方法を、要点をまとめて、わかりやすく解説します。
○ 操作の解説は、デモンストレーションで実演して解説します。
○ 講義後に、質疑応答の時間を設けます。

● 協賛企業・ブランド
株式会社まぼろし < https://maboroshi.biz >

#bauya60
続きを読む

開催日程がありません

開催予定エリア六本木・赤坂

価格(税込)¥5,300

現在は開催リクエストを受け付けていません
受けたい
89人が受けたい登録しています

対面受講日程

開催日程はありません。

対面受講料に含まれるもの

参加費に教材費などはすべて含まれています。
参加費の他に一切費用はかかりません。
※ 参加費の領収書は、ストリートアカデミーから発行・印刷することができます。
  https://support.street-academy.com/hc/ja/articles/201345225

オンライン受講日程

開催日程はありません。

オンライン受講料に含まれるもの

参加費に教材費などはすべて含まれています。
参加費の他に一切費用はかかりません。
※ オンラインで講座に参加いただく場合の通信費などは、参加者さまのご負担になります。
※ 参加費の領収書は、ストリートアカデミーから発行・印刷することができます。
  https://support.street-academy.com/hc/ja/articles/201345225

この講座の先生

松田  直樹のプロフィール写真
デザイナー,株式会社まぼろし 取締役CCO
松田 直樹
ゲーム業界にて企画開発に従事した後、ウェブ業界に転身。 ウェブサービス・アプリ、管理画面等の情報・構造設計、UI設計を得意として数多くのデザインを手がける。SVGが好き。 

主な著書に『これからのWebサイト設計の新しい教科書』(共著),『Web制作者のためのIllustrator&ベクターデータの教科書』(共著),『Webサイト、これからどうなるの? キーワードから探るWeb制作の未来像』(共著)などがある。 

また、ライフワークとして日本史の歴史系メディア運営やライティング活動も行っている。
歴史上の英傑たちを「近所のおもろいオッ...
+続きを読む

この講座の主催団体

  • 4,960人
  • 177回
クリエーターの学び舎 Bau-ya®

■ Bau-ya®にある『知識講座』『技術講座』『ワークショップ講座』の3つのスタイル

『知識講座』は、ふんだんな資料や図解で解説する座学形式。
業界人として必須の教養や情報を学べます。
スライドや資料などを見ながら、じっくり学ぶスタイル。
提示されるスライドや資料はダウンロードして、何度でも復習いただけます。

『技術講座』は、ふんだんに実演デモを駆使するセミハンズオン形式...
+続きを読む

主催団体に質問する 主催団体ページを見る

当日の流れとタイムスケジュール

■ 開場時間
開演15分前から

■ 所要時間
約2.5-3時間程度(途中参加、途中退出も可能です)

■ 講座の流れ(予定)
1. オープニング(BAU-YAおよび講座について説明,登壇者紹介など 約5分)
2. ハンズオン講義(約65-80分)
3. 休憩(約5分)
4. ハンズオン講義(約65-80分)
5. 質疑応答(約5分)
6. エンディング(約5分)
※ 講義時間や時間割は、変更する可能性があります。
※ 予定よりも早く終了、または長引く可能性があります。
続きを読む

こんな方を対象としています

□ ウェブやアプリの制作関連職の方

□ ウェブデザインやUI/UXデザインの学習者の方
※ HTML / CSSを理解しているとなおよし
※ JavaScriptを、jQueryの搭載程度できる程度に理解しているとなおよし
続きを読む

受講する際は以下をお読み下さい

■ ご持参いただくもの

□ Adobe Illusrator CC以降やAdobe XD、またはFigmaなど、SVG生成が可能なグラフィックソフト
□ Visual Studio Code,Atom,Adobe Brackets,Adobe Dreamweaverなど、ご自身が使い慣れたソースコードエディタ
□ 上記のソフトウェアがインストールされ稼働しているコンピューター
※ 聴講のみのご参加も可能です。
※ OSは問いません。
※ コンピュータの動作やソフトウェアなどの動作不良に関するサポートは行いません。
□ 電源を使われる方は、電源タップをご持参ください。
□ メモを取るための筆記用具やデバイスはご持参ください。

■ その他

□ 講義中の録音などの一切の収録行為を禁じています。

□ 講座内で配布する資料やファイルなどの一切の再配布を禁じています。

□ お名刺をお持ちでしたら、講座終了後に、登壇者や主宰者とご交換ください。
続きを読む
※ストアカでは講座に適用される保険を用意しています。詳しくはストアカ補償制度をご覧ください。

レビュー25

  • 楽しかった( 9 )
  • 勉強になった( 21 )
  • 受ける価値あり( 13 )
  • この講座は「デザイナー必修 SVG 基本&アニメーション ハンズオン強化版」でした
    男性 40代

    SVGの基本だけでなく、SVGを使ったアニメーションも教えていただけてよかった。

  • この講座は「SVGの雰囲気がよくわかる講座でした」でした
    女性 30代

    この講座で、SVGアニメーションができるようになる!というよりは、なるために必要の基礎知識から一通りの流れを教えてもらえる講座でした。
    用意されているのものを使ってハンズオンをしたため、一人で初めから作成となったときや、教えてもらったサイトの使い方などで、手間取りそうだなと思いました。
    なので星4にしましたが、講座は大変満足の行くものでした。

  • この講座は「最新のSVG事情も学べる講座」でした
    女性 30代

    SVGアニメーションは動きの調整などがめんどくさいイメージを持っていましたが、方法次第なことを知ることができたのが大きかったです。
    1人で学ぶと躓くようなところを丁寧に分かりやすく教えていただき、参加して良かったです!

  • Webデザインのおすすめの先生Webデザインの先生を探す

    Webデザインの関連カテゴリーから講座を探す

    先生のスキルから探す

    関連エリアから探す