[Course]Webクリエーター,岡田智哉_오카다토모야 Details
トレーラー
ウェブクリエイター 岡田智哉
この講座では、Astro/GSAP/Lenis/Barbaといった最新技術を用いて、印象的なWebサイトを作るためのノウハウを体系的に解説。情報整理から、Grid構造の設計や、高度なアニメーション実装まで、Webサイト制作の一連のプロセスをお教えします。
次に、最新フレームワークAstroの基礎と、GSAP、Lenisなどのライブラリを導入する方法を学びます。コーポレートサイトにタイトルや、ローディング、パララックスといった高度なアニメーションへの実装法まで、動的表現の核となるスキルを習得します。
最終的に、表現力が求められるポートフォリオサイトを設計・実装し、ページ遷移アニメーション(Barba.js)など多彩なインタラクションに応用する方法を身につけます。
インタラクション設計から高度アニメーションまで、体系的にWebサイトを構築するためのノウハウを、Colosoで体験してください。
受講生全員に提供
岡田智哉の講座だけの特典
-
岡田智哉のWebサイト制作ノウハウを含む、講義動画27本を期間制限なしで受講可能 -
講座を通して2点の作品を完成 -
Figmaファイルなどの資料を提供
講義資料の詳細
-
デザイン資料- 課題デザイン Figmaファイル(2点) -
実装・補助資料- 課題実装ファイル一式(2点)
- 講義内容の一部資料
岡田智哉のポートフォリオ
講座の例題
下記のような内容を学べます。
-
ワイヤーフレーム作成 -
Gridレイアウトの活用 -
コーポレートサイトデザイン(PC)
-
コーポレートサイトデザイン(SP) -
コーポレートサイトアニメーション
-
ポートフォリオサイトデザイン(PC)
-
ポートフォリオサイトデザイン(SP) -
ポートフォリオサイトアニメーション
※上記の画像は講座に対する理解を深めるためのイメージです。
この講座のポイント
設計・デザインから実装までのプロセス
Webサイト制作を「デザイン」と「コーディング」で分けて捉えるのではなく、設計・デザイン・実装までを一連の流れとして学びます。このプロセスを学ぶことで、実務で求められる視点や、思考プロセスを身につけることができます。
Gridデザインの活用方法
デザインの骨格を形づくるグリッドの考え方を学び、情報を整理しながら美しいレイアウトを作る力を身につけます。構造的でありながら、自由な発想で応用できるデザイン思考力を養います。
アニメーションの考え方・実装方法
スクロールやマウス操作など、ユーザーの動きに反応するインタラクションを実装します。動きによって情報を整理し、印象を深める表現方法をお伝えします。














