デザイナー必修 SVG 基本&アニメーション

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

こんなことを学びます

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

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

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

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

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

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

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

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

#bauya31
続きを読む

日程・開催時間を選ぶ

開催リクエスト受付中

開催予定エリア

銀座・大手町

価格(税込)

¥3,800

受けたい
72人が受けたい登録しています

この講座の先生

松田  直樹のプロフィール写真
デザイナー,株式会社まぼろし 取締役CCO

松田 直樹

ゲーム業界にて企画開発に従事した後、ウェブ業界に転身。 ウェブサービス・アプリ、管理画面等の情報・構造設計、UI設計を得意として数多くのデザインを手がける。SVGが好き。 

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

また、ライフワークとして日本史の歴史系メディア運営やライティング活動も行っている。
歴史上の英傑たちを「近所のおもろいオッサン」的に見るブログ「歴史雑談録」を運営中。公式Twitterはフォロワー数35,000を超える。 

Twitter @readymadegogo 

歴史雑談録Twitter @rekishizatsudan

この講座の主催団体

  • 859人
  • 37回

BAU-YA

プロとプロを目指すクリエイターの学び舎、BAU-YA(バウ舎)。
アートやデザイン、ITやウェブなどの、トップクリエイターや著名講師による『いま、伝えたいこと』を、そのまま講座にして催します。


■ BAU-YAにある『技術系講座』と『知識系講座』の2つのスタイル

『技術系講座』は、ふんだんに実演デモを駆使するハイブリッド・ハンズオン講座。

制作の現場で必須のテクニックを学べます。

一緒に実習しながらでも、または聴講のみでも、どちらでも参加できるスタイル。
使用する学習サンプルは、受講後でもダウンロードして何度でも練習いただけます。

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


■ BAU-YAが招聘する実力派講師陣

クリエイティブ業界の最前線で活躍している、経験豊富なク... もっと見る >>

主催団体に質問する 教室ページをみる
  • 当日の流れとタイムスケジュール

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

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

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

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

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

    参加費に場所代は含まれています。
    参加費の他に、一切費用はかかりません。
    ※ 領収書はストリートアカデミーから発行・印刷することができます。 < https://support.street-academy.com/hc/ja/articles/201345225 >
  • 受講する際は以下をお読み下さい

    ■ ご持参いただくもの

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

    ■ その他

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

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

    □ お名刺をお持ちでしたら、講座終了後に、登壇者や主宰者とご交換ください。

レビュー

  • 18
  • 楽しかった!( 7 )
  • 勉強になった!( 15 )
  • 行く価値あり!( 9 )
  • W2

    女性 30代

    この講座は「理解が深まった」でした

    仕事で使えそうなので、タイミング良く開催されたので参加しました!
    セミナーでも言ってましたか、本で良いものがなかったので参加したのですが、実際のサンプルをいじりながら聞けたので、なんとなくできそうな気持ちになれました(笑)
    あとは実践でどんどん使って、表現の幅を広げれたら良いなと思います!

  • M3

    男性

    この講座は「SVGやりたい欲が高まる」でした

    知らないとハマりやすい、viewBoxの理解が深まりました。
    また、ハンズオンでは、Tween Maxを使って、SVGアニメーションを体験でき、SVGやりたい欲が高まりました。

  • M1

    その他 50代

    この講座は「楽しく学べる講座」でした

    まったくの初心者ですが、概要の説明と、ハンズオンの具体的な教材でわかりやすく楽しく学べました。

  • W2

    女性

    この講座は「もっと知りたくなる講座」でした

    初学者向けで第一歩として受ける講座にはぴったりでした。
    あっという間の2時間で、ハンズオンの時間がもっと欲しいなと感じました。
    もしまた続編講座があれば、是非受けさせて頂きたいです!
    これから教えて頂いたことを参考に自分でも色々試してみたいと思います。
    有意義な時間をありがとうございました。

  • W1

    女性 30代

    この講座は「SVGについて驚きと納得が同時にできる講座」でした

    これまでBAU-YAで受けた講座の中でも特に内容がすばらしかったです。SVGは静止画しか取り扱ったことが無く、ブラウザで動作するアニメーションをどうやって作っているのかがわかり色々と目から鱗でした。JavaScriptで動かすので、ムーブメントそのものにライブラリが存在するんですね、凄いです。イラストレーターからのワークフローもスムーズに行える仕組みがSVGの特性上あって、ぜひもっと勉強して今後の仕事に取り入れてみたいと思いました。ありがとうございました!
    もっと松田さんのお話を聞きたいので、続編希望します。

  • この主催団体の他の講座

    relation

    関連講座

    watching

    この講座を見た人は、こんな講座も見ています

    お探しの講座が見つかりませんでしたか?