いきなりなにを言い出すんだ…

って感じだと思いますが、

これは、本当は興味があるのに

「なんか難しそう…」

「習得に時間がかかりそう…」

「JavaScriptが苦手だから…」

という理由で

Webアニメーションの習得を

諦めてしまう方を見た時の私の気持ちです。

私が猟師になるまで

Q. 見出しが間違ってますよね？

合ってます。このまま読んでください。

まず、この世には

Webアニメーションに関する「勘違い」

が蔓延しています。

たとえば、

「Webアニメーションの習得には長い時間がかかる」

「WebアニメーションにはJavaScriptの深い理解が必要」

皆さんも一度は思ったことがあるはず。

アニメーションが武器になる前の、過去の私も全く同じことを思ってました。

でもこれは「全くの勘違い」です。

その証拠として、

まず下記の2つのアニメーションを見てください。

これ実は、全部CSSのみで書いてます。

JavaScriptを一切書いてません。

タネも仕掛けもない、ただのCSSなので

今あなたが持ってる知識に、ほんのちょこっとプラスするだけで

たったの1日も掛からず実装が可能になります。

こんな動きもCSSだけで実装可能です↓

「あれ、JavaScriptを書かなくてもいいなら、ちょっとハードル下がるかも…」

そんな気持ちになってきませんか？

実は、皆さんが思っている以上に、

Webアニメーションと言うのはとてもハードルの低い、

それでいてコーディングの楽しさが倍増する、

お花畑のような領域なんです…🌸

もちろん

「ハードルが低い」「創造的で楽しい」

だけがメリットではありません。

大きなメリットの1つが、、

みんなが「難しい」という勘違いでアニメーションを避けるから、

めちゃめちゃ希少価値が高いということです。

実際に、私がアニメーションを武器として戦うようになってから、

1件あたりのコーディングの単価感がどれくらいなったのかというと、

（ちょうどまとめたポストがありました）

※おおよそ17ページのコーポレートサイトコーディング費用

アニメーションが沢山ついたTOPページだと

それ単体の構築で¥150,000~になることも多いです。

これは、たまたまの外れ値ではありません。

私の周りに

アニメーションを得意とするコーダーさんが1人いますが、

その方もほぼ同じ単価感で仕事をされています。

ちなみに、フリーランスとして独立した当初の私は、

ーーーーーーーーーーーーーーーーーーーーー

WordPress 6ページ：¥40,000（税込）

制作期間：3週間！！

ーーーーーーーーーーーーーーーーーーーーー

という、「生活費＞＞＞＞＞＞収入」な状況で、

赤字ドバドバさせながら生きていました。

「とにかく案件数をこなさなければ…！！」

そんな感覚で働いていたと思います。

それに比べると今は

1件あたりの単価がアニメーションがきっかけで大きく上がって、

月1〜2件のお仕事をすれば十分な収入になります。

いざ仕事以外のことに時間を使えるようになった私は

何をしはじめたのかいうと、、

.

.

.

.

.

.

「おま、、一体何者やねん、、」

って声がたくさん聞こえてきましたので、

簡単に自己紹介させてください！

改めまして「ひろむ」と申します！

全くの異業種からWebの業界にフリーランスとして飛び込み、

2025年12月現在、コーディング歴3年8ヶ月くらいになったところです。

最近こどもがうまれて、

何かとてんやわんやしながらこれを書いています。

コーダーの片手間で猟師になってしまうくらい、「外が好き」です🌳

仕事は主に制作会社さんからの受託でコーディングを請け負っていますが、

そのほかに

フリーランスや制作会社のコーダーさんのアニメーションのご相談に乗ったり、、
アニメーション専門のコミュニティをやってみたり、、

最近は光栄なことに、著名なデザイナー様とご一緒させていただき、

自身のクリエイティブを存分に発揮する機会もいただいたりしました。

これを聞くと

「もともとアニメーションが得意だったの？」

と思われるかもしれませんが、

そもそもWebサイトとは全く関係のない異業種からの転身ですし、

特別な肩書きがあるわけでも、

天才的なセンスがあるわけでもありません。

ただ一つ言えるのは、

Webアニメーションだけは、ずっと触り続けてきたということ。

「どうすればもっと実務に活かせるか」

「どうすれば楽しく、長く続けられるか」

「どうすれば上手いこと楽に実装できるか」

そのことばかり考えて、コーディングを続けてきました。

紛れもなく、Webアニメーションを愛しているコーダーです。

そんなことを言っているといつのまにか、

アニメーションに苦手意識がある方々から

沢山のご相談が集まるようになったんですが、

そこで1つの真実に気が付きました。

みんなわざわざ「難しい実装方法を選択してる」

実際は「難しい方法を選択している」というより、

それ以外の簡単な方法を知らなかったから、難しい方法を選ぶしかなかった。

が正しいですね。

その証拠に

普段私がアニメーションの実装相談に乗っていると、

「そんなシンプルな方法あったんだ…」

と言われることがほとんどです。

「必要以上に難しい実装方法」を選んでしまうと、

実装で詰まる

苦手意識・恐怖心が生まれる

そしてアニメーションを実務で避けるようになる。

アニメーションの楽しさや、

アニメーションの適正な単価感を知らないまま…。

いつのまにか「コーディング全体に対する自信」も失い

少しずつコーディングから離れていってしまったり、

仕事に「熱」が乗らなくなってしまう、

故にお客さんが離れていく。

という状況に陥りがちです。

もっとシンプルで簡単なアニメーションの方法があるにも関わらず、

「難しい方法」を選択してしまった結果、辛い経験をして、

「かっこよく動かせるようになりたい！」という当初の気持ちを忘れてしまう。。

「シンプルで簡単な実装方法」を知っていて、

アニメーションの楽しさを日々味わっている私からすると、

ついこう思ってしまうわけです。

そして問題はそれだけでなく、

苦労を超えて「アニメーションがそこそこできる」というコーダーの方々も

とある悩みを抱えてることがわかりました。

アニメーションがある程度できるのに…

苦手意識があるわけでもなく、

しっかり必要な知識は身につけた。

それでも、アニメーションが収入がつながった実感がない。

どうしてなのか？

理由はシンプルでした。

「使う機会がない」

習得しても、

「アニメーションをつけてください！」

と言われなければ、

もちろん費用を請求することはできませんし、

結果収入にも繋がりません。

せっかく案件対応の合間を縫って、

膨大な時間をかけて習得したアニメーションが

全然結果に繋がってこない。

「結局まだ実力が足りないんだよな…」

そう思ってしまいがちですが、

ストレートに言うと原因は別にあります。

「実力が足りないこと」ではなく、

この考え方が抜け落ちていた。

たったそれだけのことです。

シンプルな実装方法を知らないのであれば、「知るだけ」

使う機会がないなら、「その機会を作るだけ」

やることはいたってシンプルなんです。

「いやそんな簡単にまとめられても、具体的にどうすればいいのよ…」

そう思うのもわかります。

そこで皆さんにお伝えしたいのが、

「アニメーション提案」という戦略

です。

ひとことで言うと、

「アニメーションの指示がなくても、自分から提案する」

というとても分かりやすい戦略です。

シンプルながらも、

この戦略には大きく分けて4つのメリットがあります。

自分で実装内容を決められるから「シンプルな実装方法」を選択する余地が生まれる
本来仕様にない動きが付くと、先方がとびきり喜んでくれて継続率UPが見込める
アニメーションが豊富な実績ができやすく、営業で有利になる
リッチな動きを実装した実績や経験があると、高単価案件の相談が来やすい

アニメーション提案には
皆さんが置かれている状況を一変させる威力があります。

ただ、どんなにこの戦略にメリットがあるとはいえ、

そもそも「シンプルな実装方法を知る」ことが難しい

「アニメーションを提案しようと思っても、何をどうすればいいかわからない」

この2つの壁がどうしても立ちはだかるのです。

ただ、この壁さえ超えてしまえば

アニメーションの楽しさを知ることも

低単価からの脱出も

叶えられる状態になる。

私は常々

「アニメーションの楽しさを知って欲しい」

という思いで発信活動をしています。

その裏で、

アニメーションに苦しめられてトラウマのようになったり…

せっかく貴重な時間を費やして身につけても、うまく活用できなかったり…

こんな方々も沢山見て、

私自身も沢山やるせない思いをした結果、

いつしか、

「私がなんとかしてみせる」

と思い立ちました。

その結果生まれたのが、

本講座です。

アニメーションの短期間スキル習得から、

実際に収入に繋げていくフローまでを網羅した

唯一無二の内容と自信を持って言えます。

それでは本講座の内容の紹介に入っていきます。

（大変お待たせしました！！）

本講座の内容

3日間Webアニメーション基礎講義

実際にアニメーション要件が多い高単価案件や、

アニメーション提案を行う上で必要になる

「ベースの考え方と実装」を、

まずは「3日間想定※」で身につけていただく講義です！

※「3日間で基礎を1通り習得できる想定」という意味で、
受講期間に制限があるわけではありません。
ご自身のペースで、何度でも視聴いただけます。

講義は、以下3つの軸で構成されています。

◼️ CSSアニメーション / SVGアニメーション講義

CSSアニメーションの「手軽さ」や「楽しさ」をまず知っていただくとともに、

実務でも有効かつ簡単なアニメーションの手法を身につけます…！

そのあとのSVGアニメーションでは

いままで動かせなかった繊細でおしゃれなあしらいなどを

アニメーションさせる術を学びます。

動かせる対象が増えると、一気に表現力が広がります！！

◼️GSAP講義

JavaScriptが得意でなくても扱える、

実務向けアニメーションライブラリです！

基礎講義では

デザイナーさんからご提供いただいた

実案件さながらのサイトデザイン2つを用いて

アニメーションの演習をしていきます。

基礎と言いつつ、かなりリッチなアニメーションを習得するので、

実務で120％通用する知識が身に付きます！

基礎講義で実装する動きの例↓（このアニメーション、実は講座の題材でした！）

Webアニメーション提案実践編

アニメーション提案の具体的な流れを実践形式で辿り、

基礎講義で身につけた内容をより洗練された知識へ昇華させます。

こちらもデザイナー様からご提供いただいたデザイン5つを用いて

実案件に近い環境で進めていきます！（後日追加のものもあります）

実践編はかなりボリューミーですが、

お好きな題材から着手いただき、

全て完了する頃には間違いなく

Webアニメーション提案を武器として

強烈な差別化が図れるようになる内容です。

現時点でも基礎編実践編合わせて40本の動画解説付きです。

題材のアニメーションは下記のポストでご紹介しているので、

ぜひご覧ください！

特典について

特典は全部で3つになります！

1つ目

実は1つ目については

もともとは別商品として販売する予定だったものです。

その名も

XD用自動コーディングアシストツール「XD code」

XDデザイン用の、AIによる自動コーディングをアシストするプラグインです。

このプラグインのすごさは、下記の動画を見ていただければご理解いただけると思います。

XDカンプのデザインを

「複数ページ同時で」コーディングしている様子↓

※当プラグインはAIと組み合わせることによって真価を発揮するため、

利用には月3,000円程度の「Cursorエディタ（有料プラン）」が推奨です

（AIエージェントが使えればClaude等でも大丈夫です）

いままでXDカンプはFigmaと違い、

AIによる自動コーディングの手法がなかったんですが、

このプラグインを開発したことで劇的に状況が改善しました…。

XDcodeは私自身がXDカンプからのコーディングをするときに使っていますが、

「歯磨きしている間に6ページの流し込みが終わってた」

みたいなことも実際起こりました。

かなりクオリティに自信のありますので、

ぜひお受け取りください！

冗談抜きでこのプラグインだけでも

講座代が回収できてしまうくらいの内容だと思ってます。

そして2つ目は、

Figma MCP スターターセット

Figma MCPというのは、とても簡単にいうと、

Figma上の情報を、CursorなどのAIエージェントが受け取れるようになり、

Figmaカンプからのコーディングを半自動化することも夢ではない優れモノです…！

MCPを使いこなすには、

実務を通してひたすらAIとのやりとりを重ねて、改善を繰り返す…

という結構地道で、時間のかかる工程が必要なんですが、、

「Figma MCP 聞いたことはあるけど、使ったことないな…」

そんな方でも

一瞬で活用レベルを「中上級者レベル」に上げることができる

のが本特典です。

私が2025年の8月から、

累計100ページ以上のコーディングを通して改善してきた内容が

詰まっています。

ざっと、自動化できることはこんな感じ▼

使いこなすの難しそう…

と思われるかもしれませんが、

「ドラッグ＆ドロップ」ができれば活用できるようにしました。

（めちゃくちゃハードル低い…！）

こちらの特典でコーディングを効率化して

余った時間をアニメーションの提案に充てる、

という動き方がとてもおすすめです！

AIコーディング特化の指示出しツール「スマコレ」

※¥3,980（税込）で個別販売もしているので、気になる方は下記ページから詳細をご確認ください。
https://sumakore.org/

ブラウザ上でピン刺し、そのままAIへの指示を書き込めるツールです

AIを使ったコーディングをしていると、

デザインとの差異を1つ1つ指示出しする場面が絶対出てくるんですが…

「〇〇箇所のこのボタン、赤色にして」

（AIが修正中…待ち時間…）

「〇〇のセクション、文字がデザインと違うので確認して」

（AIが修正中…待ち時間…）

「〇〇ページのタイトル、太さが違う！！」

（AIが修正中…待ち時間…）

これを何回もやり取りするの、すんごくめんどくさいいいい！！！

待ち時間も積もりに積もってとんでも無く長い！！

この手間をなんとかしたくて開発したツールが「スマコレ」です。

ブラウザ上で書き込んだ指示内容をマークダウン形式でコピー

↓

そのままAIへ渡すだけ

という形で、10個以上の指示出しも楽々できて、

今まで細かい調整のやり取りに費やした時間が丸っと空きます。

実際にスマコレでAIに指示出しした様子↓

15個くらいの修正作業をまとめて進めてくれてます。

（この間、私はコーヒー休憩…☕️）

XDcodeやFigma MCPとの相性が抜群のツールなので、

ぜひ合わせてご活用ください！

価格について

「29,800円」とさせていただきます！

シンプルでリッチなアニメーションの実装方法

「アニメーションを戦略的に」使うという提案の考え方

私の3年と8ヶ月のコーディングで培ったすべての知見を

「最短距離で活用していただく」

という内容になっています！

ただし、無理におすすめはしません。

今はまだ他に集中すべきことがある
もう少し自分で工夫してやってみたい

そういう状況ももちろんあると思います。

ただ、

「アニメーション、やっぱり面白そうだな」

「ちゃんと仕事につなげたいな」

そう感じているなら、

この講座の内容はきっと協力な武器になります。

Q&A

Q. 初心者でも大丈夫ですか？

HTML / CSSの基礎（タグの意味が分かる・簡単なレイアウトが組める）程度があれば問題ありません。

一方で、まったくの未経験の方だと詰まりやすい部分もあるので、

基礎を一通り触ってからの受講をおすすめしています。

Q. どれくらいの時間が必要ですか？

「Webアニメーション基礎講義」の内容は3日間での習得を想定しています。

基礎講義の内容だけでも、差別化ができるレベルに達しますが、

さらに実践的な経験を積みたい方向けの「実践編」もあります。

そちらは進め方にもよりますが、5日間〜1週間程度で完了する内容です。

Q. どんな人に向いていますか？

アニメーションに興味はあるけど、難しそうで手を出せていない
コーディングに楽しさが感じられない
JavaScriptが得意ではないが、サイトをもう一段レベルアップさせたい
営業で武器になる「誰がみてもわかりやすい強み」がほしい
アニメーションの実装で苦労したことがあり、トラウマになっている
こういった方にお勧めできる内容です。

Q. 講座が向いていない人はいますか？

正直に言うと、

アニメーションにまったく興味がない
今の収入状況などに十分満足している
JavaScriptが思いっきり書けるようになりたい

という方には、あまり向いていないかもしれません。

特にJavaScriptに関しては

「アニメーションにはJavaScriptの知識が必要」

という今までの概念を壊すような内容の講座になっているため、

基本的にGSAPを使う以外でJavaScriptの内容はほぼ出てきません。

JavaScriptを学びたい方はJavaScript専門の講座を受講されることをおすすめいたします。

最後に

ここまで読んでいただき、ほんとうにありがとうございます。

アニメーションをやりたいと思ってるけど、

なんだかハードルが高そうで、習得に時間がかかりそうで、今は諦めるか…

アニメーションやってみたはいいけど、

ここからどう動けばしっかり活用できるのか分からない…。

そんな方々にこの講座を手に取っていただき、

あなたの価値を世界へ知らしめる

きっかけとなれば幸いです！

皆さんと一緒に

私自身も、この講座もさらに進化していく所存ですので、

ここから一緒に頑張っていきましょう！

それでは、講座本編に入っていきます！