- HTML/CSSを一通り学習したけど、案件を受けられるレベルなのか不安な方
- シンプルなサイトはコーディングできるようになったが、もっとスキルアップしたい！スキルアップが必要だ！と思っている方
- コーディング案件を受注するようになったが、複雑なデザインやアニメーションの指示があったら対応できるか不安に思っている方
「スキルアップ」という部分に役立つ教材なので、まだHTML/CSSを勉強し始めたところです・・・という方は、基本的なところを一通り学習してから読んでくださいね！
コーディングのスキルをもっと上げたい！スキルアップに役立つ教材をご紹介
私はスクールで体系的にコーディングを学習したわけではありません。コーディングを独学で学習後、クラウドソーシングで小さな案件を受けていましたが、「これでいいのかなぁ。」「もっといろいろできるようになりたい。」と悩む日々。追加で必要な知識やスキルをさまざまな本やWebサービスなどの教材で補ってきました。
もちろん購入した教材にもあたりはずれがありました。買ったものの開いていない本もあります（笑）
実際に購入したコーディング関連のBrain教材の中で、現在でもとても役に立っている教材を3つご紹介したいと思います。
スキルアップに役立つオススメ教材（1）「実務で使った2年分のコーディング&WordPressメモまとめ集」
じゅんぺいさんが2年間の実務で使ったコードやWordPressのTipsをまてめてくださった、もりだくさんのBrain教材です。HTMLだけでなく、動きのあるJS関連コードもたくさん収録されています。WordPressのTipsもあるので、オリジナルテーマ作成でつまずきがちな方にもとってもおすすめ。幅広くいろんなメモがまとまっているので、持っていて損はなしです。
- アコーディオン、モーダル、スライダー、、、いつも調べながらドキドキコーディングしている方
- WordPressのオリジナルテーマ作成が不安な方
＼情報もりだくさん！！／
私も、「あれ？これってどうコーディングするんだろう？」「こんな動き、コーディングしたことないなぁ。」というときには、今でも参考にさせていただいています。
スキルアップに役立つオススメ教材（2）「【パパッと効率化！】コーディング効率化講座 ~CSS設計編~」
案件をこなすうちに、スニペット集を作ってコーディング速度を上げたいなと思ってきます。スニペットを公開されている方も多いのですが、ゆうきさん教材のすごいところは、CSS設計を意識した作りになっているというところ。なんとすべてのコードが、BEMとFLOCSSの両方の記法で書かれているのです！（ゆうきさん優しすぎでしょ。。。）
私は普段、指定がない限り、FLOCSSでコーディングしています。ネット上で探してきたコードを参考にしようとコピーしてきても、なかなかFLOCSSで書かれているものがないので、修正が必要な事が多いです。でもこちらのスニペットはFLOCSS記法で書かれているコードも用意されているので、修正少なく活用できます！CSS設計を理解してパーツを意識してコーディングしていれば、ほんとそのまま使えます。
- よく使うパーツのスニペット集を作ろうと思っていた方
- BEM、FLOCSSを勉強中の方
＼おすすめスニペット！！／
スキルアップに役立つオススメ教材（3）「【たった”10日間”でWEBアニメーション実装スキル習得】GSAPマスター講座」
動きがあるサイト、苦手だなぁと思っている方も多いはず。そんな方はGSAP、学習しましょう！動きのあるサイトが直感的に作成できます。
GSAP（GreenSock Animation Platform）は、ウェブアプリケーションやウェブサイトでアニメーションを作成するためのJavaScriptライブラリです。
- 高性能なアニメーションエンジン：
GSAPは、高度なパフォーマンスを提供するアニメーションエンジンを備えています。ハードウェアアクセラレーションを活用し、スムーズなアニメーションを実現します。 - シンプルで柔軟な構文：
GSAPは直感的で理解しやすい構文を提供しており、初心者から上級者まで幅広いユーザーに適しています。TweenMax、TimelineMaxなどのモジュールを使用することで、複雑なアニメーションも簡単に作成できます。 - 豊富なアニメーション機能：
GSAPは、基本的なプロパティの変更から、複雑なユーザーインタラクション、SVGアニメーション、3D変換など、多岐にわたるアニメーション機能を提供しています。
スクロールにあわせて動かすスクロールアニメーションだったり、複数のアニメーションを連続的に動かしたりがわかりやすく実装できます。もちろん、JavaScriptだけう〜〜〜んと悩みながら実装していたことが、GSAPを利用することで視覚的にもわかりやすく実装することができます！
私はこれでアニメーションの苦手意識がなくなりました！そして、これまでだったら「そんなの無理〜」とお断りしていたようなアニメーションでもサクサク実装できるようになりました。アニメーションの実装もまとめて引き受けることができると、単価も上がります！！！
そしてそれを可能にさせてくれた教材がこちらです！この教材に出会うまでも、GSAPでの実装をネットで調べつつ、少しずつ案件にも取り入れてきていましたが、こちらの教材が体系的にまとまっていて、効率よく学習できます。また、サンプルもたくさんあるので、いろいろ案件に取り入れることができます。
- いつもアニメーションは別のエンジニアに依頼しているという方
- GSAP、気になってるけどどう学習しようか悩んでいる方
- いろいろ動くスタイリッシュなサイトを作りたい方
- アニメーションまでできるようになって単価を上げたい方
＼GSAPの学習に悩んでいる方には、本当にオススメです！！！／
まとめ
このページでは、スニペット集やGSAPの教材をご紹介させていただきました。みなさんの苦手分野や、身につけたいスキル、伸ばしたい分野をしっかりと考えて、スキルアップを目指しましょう！！