PR

『GSAPマスター講座』は、おかげさまで

と好評をいただいております

はじめまして！りょーすけといいます！

現在、僕は新卒フリーランスとして活動しているのですが

とあるコーディングスキルを身につけたことで

社会人スキルなし、ただの学生である平凡コーダーが

昨年12月に月収70万円に到達し

この記事を執筆している現在も

コンスタントに月収70万円を維持しています

ちなみにこのツイートをしている2022年12月は同時に

コーディング講座作成と修論を書いていたので超忙しい1ヶ月間でした

このツイート時点で次の月に振り込まれる売上30万円がほぼ確定しており

さらに、いろんな方面から

来月、さらにその次の月の案件の引き合いも来ているという引っ張りだこ状態

単価感としては1案件あたり30万円以上で

全てが継続の案件かコミュニティ内でのご相談のため

この半年、ほとんど営業せず高単価受注をしまくってきました

実際どれくらいの金額感の案件かというと

一度アニメーションを含むLP案件を納品したお相手から

すぐに継続の案件という形で

コーディングのみ、8ページの案件が33万円での受注に成功したり

クラウドソーシングで繋がった

アニメーションにこだわりを持つクライアントから

少し高めかな…?というお見積りも

アニメーションの実装を安心して任せられる人がいないという理由で

あっさりとお見積りが通ったりすることもありました。

はじめに提示された単価感が合わなくても

お打ち合わせで相手からの信頼を獲得することで交渉が通り

最初に提示された金額8万円→15万円と2倍近くの値段に上がったことも

お打ち合わせが終わった後の先方からのメッセージでは

というお言葉をいただき、爆速で納品した結果、、、

↑納品後のメッセージ

このよう形でお相手からの信頼を得られ継続の案件に繋がりました。

なんなら初稿提出の時点で次の案件の引き合いが来てたりしてました。

お見積り時点では時間単価3,500円で算出していましたが

予定よりも1週間早く納品を完了した結果、

実質、時給が5,000円になったりなども。

一度コーディングのみで30万円以上の案件を納品した経験や

時給5,000円を超えていたりすると自信に満ちあふれ

不思議なことにバンバン自分の希望通りの見積もりが通り始めるんですよね

すると疲弊することもなく案件にフルコミットでき、

次の案件のご相談に対してもフルコミット→爆速で納品→感謝される→実務の経験も積み上がり自信がつく.....と好循環が生まれます

それが続くと最終的には

案件の引き合いが来てもお断りしなければいけないくらいに仕事があふれる状態となり

単価感が合わなくならない限り営業が必要がなくなるため

自動で案件を獲得することができるようになります

月収5～15万円の低単価沼にハマっていた凡人コーダーがここまで駆け上がることができたのは

間違いなく、『GSAP』のおかげです。

皆さんに誤解しないでほしいことは、

決して僕が天才だとかそういう人間ではないということ。

GSAP習得前は

高単価な案件はもちろん経験がなく

それどころかHP制作の案件すら受注できず

簡単そうな修正案件に逃げることが多い凡人コーダーでした

そんな僕が『何者か』になるためにコツコツGSAPについて翻訳しながら調べ、

トライアンドエラーを繰り返し、

実務を意識してデモを作って発信を行い続けたことで

僕に興味を持ってもらえる人が増え

面談や打ち合わせで怖気づくこともなくなり

実装できずに苦しむ時間も消え

更には1案件あたりの単価が10万、20万、30万と上がり

1年も経たないうちに月70万円稼ぐようになったんです

時給1,000円のバイト、せいぜい稼げても月10万で満足してしまっていた1年前の自分からすると我ながら驚く成長ぶりです

そして個人で稼いでいくことへの不安がゼロになりました

これが僕が自信を持って新卒フリーランスとして独立できてる理由となっています

月収20万すら突破できない壁

繰り返しますが、僕はどこにでもいる

大した社会人スキルも突出したスキルもない、

代わりがいくらでもいるような平凡コーダーでした。

目に見えて成果が出る前は

こんな僕でも皆さんが一度は思ったことあるであろう不安や経験を一周してきました

なぜなら何者でもない小僧が大人を相手に営業して面談、

取引して仕事を獲得して個人の力で稼いでいこうとしているわけですからね。

しかも大学生の時点で

周囲にフリーランスとして生きていこうと活動している人なんて

まじで誰一人もいないため余計に不安でした

さすがにこのままではマズイと思い今の自分に何が必要か考えた結果...

『他者と比較して頭2つ抜けた、

どんな実装にも対応できるコーディングスキルを獲得する』

この答えにたどり着きました。

多くの人は成果を上げるために「デザインを学ぶ」「LINE構築を学ぶ」と別の分野に手を出してしまいがちです

ただこれらはコーディングとは違う分野であり学ぶだけで

3ヶ月とか半年という時間を浪費すると思っています

そこから更に営業して0→1達成して

成果を安定して出し続けていくには1年はかかるんじゃないでしょうか？

じゃあ手っ取り早くコーディングに特化して目立つスキルを獲得する方法は何か？それがGSAPを習得することとなります

成果が出ないのはデザインやLINE構築など多岐に渡るスキルがないからではなくコーディングに特化していないからです

僕の場合

コーダーならコーダーらしくコーディングに特化しよう。

そう決意し、必死に毎日、最低1時間はGSAPを学んだことで突出したスキルが身につきました

コーディングで結果が出たはずの期間を

別の分野の学習期間に割り当ててしまうのは非常にもったいないと思います

GSAPなかったら今頃どうなってるか分かりません

溢れかえるコーダーの中で顔も見えず埋もれてたと思います

これらの人にとって

GSAPを習得することはコスパ抜群のスキルとなっています

GSAPはSwiperなどと同じでJSライブラリであるため

実務を意識して正しい知識を本気で学べば遅くても一ヶ月以内に使いこなせるようになります

つまり1ヶ月以内にはGSAPがあなたの武器として単価をどんどん上げていったり

面談でもスキルが認められ受注に繋がったり

ひっきりなしに案件のご相談が届くようになるということです

ちなみに僕の場合は

独学でGSAPを学び始めてから3ヶ月後に初めて24万円のWordPress構築案件を獲得し3週間で納品

さらにその1ヶ月後には

いつもだったら断っていたLPのコーディング案件を受注し

今でも継続的に案件のご相談をいただけるくらいに信頼を勝ち取ることができるようになりました

実はそれくらいGSAPは即効性のあるスキルで結果が出やすいものです

GSAPの優れている点

コーディング講座の講師として

実案件のご相談を毎日のように受けていて思うのが

『jQueryや他のライブラリで長い行数かけて実装するよりも

GSAPを使って実装した方が行数も少なく修正の幅も効く実装ができるのにな～』ということです

■GSAP デモンストレーション

初学者の方こそロードマップに組み込むことで圧倒的に結果の出方に差が生じると思ってます。

■『たった1行』付け加えるだけで開発の効率が上がる例

■あの難しそうな実装も『たった一行』付け加えるだけで実現できます→詳しくは本編

↑の動画で紹介しているサイトのように

GSAPを習得することで「見た目が難しそうなサイト」の仕組みが一瞬で分かるようになります

つまり、

高単価で案件を受注できるようになり、爆速で納品ができるようになるということです

ちなみに上の動画で紹介しているサイトは「見た目が難しそう」なだけであって

実際はGSAPを使えば全く難しくはないです。

たった一行で同じ機能が作成できます

本講座を作成するにあたって

正直、この『GSAPマスター講座』

そもそも作成するかどうか、頭ちぎれるほど考えました

なぜならシンプルに競合が増えるので。

僕はこのGSAPを使うことでわりと最短ルートで結果を出してきました

ただ多くの方から

「アニメーションの実装に強くなりたいです！」

「マンツーマンの付きっきりでGSAPを教えて欲しい」

「動きのあるサイトをコーディングするのが苦手です」

などの声があったり

実際に実務でどう使うか想像できずに

何となく「JavaScriptが苦手」だと感じてしまっている人

そういった方々を多く見てきて

『とりあえずこれ見て勉強して！全て解決するから！』

と言えるものが現状なく

放っておくことは出来ないと感じたため

本講座を作成することになりました。

デザイナーと違って

コーダーってパッと見その人の実力って測ること出来ないんですが

WEBアニメーションは目に見えて

『あっ、こんな難しそうな実装もこの人できるんだなって』

なりますよね

なのにアニメーションに苦手な意識があるってかなりもったいないと思うんですよね。

目に見えて実力をアピールできる選択肢を最初から手放している感じがして

正直このWEB制作フリーランス界隈

アニメーション実装できるコーダーのポジションはがら空きです

サクッと実装ができる人、良しなにいい感じのアニメーションをつけてくれる人って制作会社からも重宝されます

ぜひGSAPを身に着けて、たくさんの人からお声がかかるような

手放したくないと思われる人材を目指しましょう！

🎓本講座の内容

合計40本以上のコーディング解説動画

■サンプル動画 2倍速カット版

実際にコードを書きながら同時に動きを見て、何をどう書くとどのような反応があるのか。

分かりやすいように解説しています。

また、実務で使うものとそうでないものについて説明しつつ

GSAPを使うメリットについても触れながらコーディング&解説しています

■GSAP使用した実装 サンプル動画 2倍速カット版

👆1～9日目のカリキュラムをこなすと理解できるようになります！

このGSAPを今まで実案件で使用してきた経験から

実務で使うことにフォーカスをあてたカリキュラムとなっています。

そのため実務でGSAPをゴリゴリ使っていくことが可能となるよう

かなり実用的かつ体系的に整えられたノウハウになっており

たった10日間、1日あたり2～3時間の学習で

過不足なく効率よく学べるように設計しました

今後コーダーとして生き残っていくための教材となっています

■1日目～3日目

・GSAPを習得する前に知っておきたい前提の知識と概要

・GSAPの優れているところを紹介、導入方法まで

・GSAP便利な拡張プラグイン

・実際に要素を動かしてGSAPの記法に慣れよう

■4日目～9日目

・実務で必須の知識、使い方ご紹介

・メニュー開閉時の動きをつけてみよう

・オープニングアニメーションを制覇

・テキストアニメーションを攻略

・ScrollTriggerを組合せて動きをつけてみよう

・ScrollTriggerを組合せて動きをつけてみよう その2

■10日目

・アドバンスコース

難易度の高い、実務でも応用が効く内容を学びます

それぞれサムネイルをつけているのでこれから何を学ぶのか一目でわかるようにしています

あの難しいと思っていた動きが簡単に作れるので

シンプルに楽しく学べるはずです

実はこのGSAPは非常に簡単に扱えるライブラリで

本当は10日間あれば基礎から応用まで一通り学習することが可能

じゃあ、なぜ学習ハードルが高く見えるのか

それは動画付きで0から100まで日本語解説されたものがないから

本講座では合計40本以上の解説動画で基礎から応用まで幅広く解説。

もちろん日本語です。

今まで海外の人の動画を見て理解するしかなかった選択肢から

僕の日本語で解説された動画を見て理解するという選択肢が増えました。

これは英語が苦手な人からすると革命的だと思います。

追加コンテンツ

本講座で全てのカリキュラムをこなすことで

見たことの無い動きを提示されてもどのように実装するか

想像がつくような応用力までも身につくようになります

つまり面談時に「これ出来る？」と聞かれても

すぐに実装方法から工数まで

どのような手段で実装していくかまでも説明できるようになります

ただ業界のトレンドは常に変化しています。

僕自身も更にGSAPを極めていくためその過程で

『これも覚えておいた方がいいだろう』というものに備えて、

さらにコンテンツを順次追加を予定しています

もちろん追加料金は発生しません。

ネタはまだまだ数え切れないほど存在してますし

自慢したい実装内容があったりするので楽しみにお待ち下さい！

※2023年5月3日 追加コンテンツ第1弾を発表しました！

■「GSAPでアコーディオンを実装」

JavaScriptに対して苦手な意識を持っている人に対してアコーディオンを題材として約1時間30分の解説動画を収録しました

ぶっちゃけ、これだけで購入金額をペイできる内容の質になってます

JavaScriptを何も見ずに1から書くことができない人にオススメです

※2023年5月15日 追加コンテンツ第2弾を発表しました！

■横スクロール中にアニメーションを発火させる方法

GSAPの優れている点にて

動画でPayPayの採用情報サイトを紹介しているのですが

その動きを再現する方法について解説しています

※2023年5月23日 追加コンテンツ第3弾を発表しました！

■アイソメトリックなイラストを動かそう！

※2023年5月30日 追加コンテンツ第4弾を発表しました！

■各レイヤーのピン留め！

※2023年6月6日 追加コンテンツ第5弾を発表しました！

■GSAPでマウスストーカーを実装

※2023年6月29日 追加コンテンツ第6弾を発表しました！

■GSAPで慣性スクロールを可能に

※2023年7月31日 追加コンテンツ第7弾を発表しました！

■斜めに移動するスライダー

※2023年10月12日 追加コンテンツ第8弾を発表しました！

■円弧にアニメーションを付与する方法

※2023年10月13日 追加コンテンツ第9弾を発表しました！

■画像が入れ替わるアニメーション

※2023年10月20日 追加コンテンツ第11弾を発表しました！

■フリップカード

※2023年10月27日 追加コンテンツ第11弾を発表しました！

■SVGとGSAPの組み合わせで効果的なアニメーション作成

※2023年11月18日 追加コンテンツ第12弾を発表しました！

■SVGとGSAPの組み合わせで効果的なアニメーション作成

※2023年12月8日 追加コンテンツ第13弾を発表しました！

■グラデーションにアニメーションを付ける方法

※2024年1月13日 追加コンテンツ第14弾を発表しました！

■タブ切り替え時にアニメーションをつける方法

🎁特典について

この時点で、どのスクールにもない内容でありボリュームも膨大なのですが

さらに、、、

あなたのコーディングスキルをもう一段加速させ

時間単価、案件獲得、継続案件率などを向上させる

豪華7大特典をご用意しました

【ブレイクスルーのきっかけ】高単価受注を実現する お見積り時の補足資料

僕はセクションや共通パーツ、作業項目ごとに

工数または時間を見積もって

時間単価をかけて算出しています。

例）2時間 × 3,000円 = 6,000円

根拠のある見積もりを意識することで案件獲得につながりやすいのですが

僕の場合、さらに補足資料を添付することを行っています。

以前、取引先に御見積表に書いた項目一つ一つに対して

「この項目ってどこのこと？何のこと？」と突っ込まれたことがありました

そこから一つ一つの項目に対して認識のズレがないよう補足資料をつけるようになりました

そのことによって、この補足資料を渡していなかった時期と比べると

案件受注率が、ぐんと伸び、信頼してお仕事を頼んでいただけるようになりました

なんと今回その補足資料を誰でも使えるように

Google Slideに変換した計23ページのテンプレートをご用意しました

地味ですが7大特典の中で一番強力な特典だと思ってます

例えば30万円の案件、この補足資料があるかないかで案件獲得が左右されるって考えたら...もう分かりますよね？

今では売上をあげるのに欠かせないツールとなってます

【駆け出し時期知らなかった】開発効率を上げるVSCode拡張機能9選

ネット上のブログ記事やTwitterではあまり語られていない

時間を短縮したり便利さを向上させる拡張機能を9つ紹介しています

また、実際どのように便利なのか一目で分かるように動画を添付しています。

お気に入りの拡張機能を見つけてコーディング時に役立ててください

僕が駆け出しの時期にもっと早く知りたかったものをご紹介しています

ちなみに、はじめに紹介している拡張機能は便利すぎるので

1日1分、1年で365分 = 6時間削減できるものだと思ってます

【まるで魔法】爆速コーディング化 独自ユーザースニペット集

このスニペット集を活用することで

コーディングスピードを青天井に伸ばし時間単価を上げることが可能です

■ユーザースニペットの使用例

NotionやCodePenにコードストックしてませんか？

コードストックしても『どこに保存したか』『これ保存してたっけ？』というのが多発すると思います。

結局探して時間を浪費するため僕はユーザースニペットを活用して頻出コードを保存しています。

編集方法から追加方法、コマンド入力まで動画付きで解説していますので安心してください

コマンド入力一発で呼び出して爆速コーダーを目指しましょう

【困ったら見て】不具合を一発で突き止める思考集

エラーや不具合が発生するときには大体パターンがあります

上手くいかない時、僕だったら何を考えるかをまとめました

この特典を参照することで「もしこうなったらこう」

のように

エラーが発生した際の対処法の数々が浮かぶようになります

エラーが発生した際の僕の思考回路だと思ってください

【1年前の自分に届けたい】コーディング中に即開けられるようにしているサイト9選

この特典を参照することであなたのコーディング速度をより早めることが可能です

皆さん、ジェネレーターや公式ドキュメント等、ブックマークから探してサイト開いてませんか？

それだと探す手間があるので、僕はすぐに開けるように

コーディング中によく使用するサイトのURL、最初の数文字を暗記しています

例えば「ama」と検索バーに入力したらamazon.co.jpが候補に出てくる感じです

このように最初の数文字とコーディング中によく使うサイトをセットでご紹介しています

【約40分でGSAPを総復習できる動画付】GSAPチートシート

「超忙しい人」や「手っ取り早く復習したい」人がササッとGSAPを総復習できるようなものになっています

これはおそらく日本中のどこ探してもないです

本家チートシートは全てが英語なので

日頃からGSAPを使用している僕が全て日本語翻訳しました。

直訳しただけでは意味が伝わりづらいので

分かりやすいようニュアンスを変えている部分が多々あります

また実務でよく使うプロパティと

そうでないものを分けているため

何を重点的に理解した方がいいのか一目で分かります

【依存関係に悩まない/JSの圧縮に悩まない】Gulp + Webpack環境構築テンプレート

この開発環境によってJavaScriptもScssと同様に分割されたファイルの状態で開発することが可能

ファイル管理のしやすさ(保守性)や開発効率が上がるため、

圧倒的に時短となります

もちろん納品フォルダーには分割されたJSファイルがひとつにまとめられて出力されます

またタイトルにも書かれているWebpackというツールを使用することで

読み込む順番などの依存関係を気にする必要がなくなり

ページごとに分岐して読み込ませる必要もなくなります

↓このように分岐して読み込ませる必要がなくなる

function enqueue_scripts(){
		if(is_front_page()){
			wp_enqueue_script('script-top.js', get_stylesheet_directory_uri() . '/assets/js/script-top.js', array(), '1.0.0', true);
		}
		if(is_archive()){
			wp_enqueue_script('script-archive.js', get_stylesheet_directory_uri() . '/assets/js/script-archive.js', array(), '1.0.0', true);
		}
		if(is_single()){
			wp_enqueue_script('script-single.js', get_stylesheet_directory_uri() . '/assets/js/script-single.js', array(), '1.0.0', true);
		}
		// etc...
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

価格について

定価は『39,800円』になります

僕が１年間かけて学んだことを公開している上にシンプルに競合が増える教材となっているので、

そもそも作って販売することすら渋ってました。

しかし、

GSAPの実装に関する質問が日々増え

講師として実装方法の相談を受けていく中で

GSAP学んで欲しいと思う気持ちが強まったため

コンテンツ作成・販売することが決定しました

1年間も苦労して月収70万円を稼げるようになった僕のノウハウを

たったの10日間で学び通せるって考えたら、かなり格安だと思います。

手っ取り早く圧倒的なスキルを身につけたいという方にとっては

コスパ抜群の講座です

Q&A

もし他にご質問ありそうでしたら

気軽にTwitterのDMからご相談ください

最後に、

WEB制作に参入するハードルが下がりコーダーがあふれかえる中、

面談等でスキルに自信が持てずお仕事に繋がらなかったり

差別化できず埋もれてしまうのは本当にもったいないと思っています

ただの凡人コーダーである僕が新卒フリーランスとして大きく自信を持って独立できたのもこのGSAPのおかげでした。

後発組の初学者の方にこそ、

このGSAPを学んで圧倒的な成果を出して欲しいと思っています

その思いで構想から完成まで約3ヶ月、、、

40本以上の解説がついている動画で

効率良く学べるよう体系的に仕上げました！

手放したくないと思われるコーダーを目指しGSAPをマスターしましょう！

内容は正直、かなり良いと思います。

『海外の動画を見て翻訳』、『英語のドキュメントを翻訳』と時間かけて理解するより

本講座を見て、コードを書いて理解する方が断然コスパが良いです。

購入のご決断をくださった方達に損はさせません。

僕自身も成長し内容もアップデートしていきますので共に頑張りましょう！

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

この続きを見るには購入する必要があります