お客さまがご利用のブラウザはサポートされていないため、正常に利用できない可能性があります。 お手数ですが、こちらをご確認いただき推奨環境のブラウザをインストールしてご利用ください。

デザイナー必修 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

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

対面受講日程

開催日程はありません。開催リクエストを送ってみましょう。

価格(税込) ¥5,300
場所 六本木・赤坂

オンライン受講日程

開催日程はありません。開催リクエストを送ってみましょう。

価格(税込) ¥5,300

この講座の先生

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

松田 直樹

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

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

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

Twitter @readymadegogo 

歴史雑談録Twitter @rekishizatsudan

この講座の主催団体

クリエイターの学び舎 Bau-ya

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


■ 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 )
  • M2

    男性 40代

    この講座は「デザイナー必修 SVG 基本&アニメーション ハンズオン強化版」でした

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

  • W2

    女性 30代

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

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

  • W2

    女性 30代

    この講座は「最新のSVG事情も学べる講座」でした

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

  • W3

    女性

    この講座は「アニメーションは勉強になりました」でした

    アニメーションはCSSでしか作ったことなかったのですが、JSで作るとパターンが多くなっていいですね。一から書くのは難しいですがサンプル参考に作ってみよう思います。あっと言う間に終わりましたがハンズオンがあったので勉強になりました。

  • W3

    女性 30代

    この講座は「SVGアニメーションについて楽しく学べる講座」でした

    SVGアニメーションとは詳しく知らなかったのですが、とても細かく説明を聞くことができ短時間で分かりやすく理解することができました。
    応用できるようにしていきたいと思いました。

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

    81

    開催リクエスト受付中

    新宿・代々木
    33

    開催リクエスト受付中

    六本木・赤坂 / オンライン

    関連講座

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

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