[Course]Webクリエーター,岡田智哉_오카다토모야 Details

Figmaの活用方法
コーポレートサイトとポートフォリオサイトのデザイン制作を実践し、Figmaの機能とワークフローを習得します。デザインの基本的な操作に留まらず、実務で役立つ効率的な活用方法までを体得することで、実務レベルのデザイン環境と制作の流れに慣れることができます。

Gridレイアウトの活用
デザインの基盤となるGrid(グリッド)機能を用いてレイアウトを作成します。整合性の取れた美しいデザインを、手を動かしながら制作することで、論理的で構造的なレイアウト思考を身につけていきます。これにより、視覚的な安定感と応用力を兼ね備えたデザインを設計できます。

アニメーションの考え方
単なる動きではなく、ユーザーに心地よい体験を提供するアニメーション制作の根底にある思想について触れます。なぜ、どのようなタイミングで、どんな動きが必要なのかという実務視点の考え方を理解することで、ワンランク上の、意図を持ったアニメーション表現を実現できます。

Astroの基礎
人気の高いモダンフレームワークAstroを利用したサイト制作を行います。コンポーネント分けやディレクトリ設計など、Webサイト制作の効率と品質を高める基礎的な設計思想を学ぶことができます。最新技術の導入を通し、モダンな開発環境への理解を深めます。

アニメーションライブラリの基礎
実務で多用されるGSAP、スムーズなスクロールを実現するLenis.js、高速なページ遷移を担うBarba.jsといったライブラリを扱います。2つのサイト実装を通して、導入から組み込みまでの一連の流れを体系的に理解することができます。

様々なアニメーション実装体験
タイトル、メニュー、ページ遷移、パララックスなど、Webサイトで求められる多様なアニメーション事例について、具体的な実装を理解できます。実務に直結する内容のため、制作に取り入れられるアニメーション表現のバリエーションを大幅に増やすことができます。
※上記の画像は講座に対する理解を深めるためのイメージです。
※下記の画像は講座に対する理解を深めるためのイメージです。
- Section 01
自己紹介
1.イントロダクション- 自己紹介
2.オリエンテーション- 講座の概要について
- Section 02
コーポレートサイトデザイン
3.情報設計- コンセプト・イメージ設計 - ワイヤフレーム設計
4.デザイン制作①- トップページ制作(PC)
5.デザイン制作②- トップページ制作(レスポンシブ)
6.デザイン制作③- トップページ制作の微調整
7.アニメーションについての考え方- アニメーションについての考え方
8.アニメーション設計- アニメーション設計
- Section 03
実装環境整備
9.実装環境構築- 技術/ソフトについての概要 - Cursorの設定 - Astro導入 / 必要なプラグインなどインストール
- Section 04
コーポレートサイト実装
10.マークアップ①- マークアップとスタイリング
11.マークアップ②- レスポンシブ - 全体調整
12.アニメーション実装①- GSAPについての説明 - Lenis.js導入 - タイトル・ホバーアニメーション実装
13.アニメーション実装②- パララックスアニメーション実装
14.アニメーション実装③- モバイルメニューアニメーション実装
15.アニメーション実装④- ローディングアニメーション実装 - その他アニメーション調整など
- Section 05
ポートフォリオサイトデザイン
16.情報設計- コンセプト・イメージ設計 - ワイヤフレーム設計
17.デザイン制作①- トップページ制作(PC) - 下層ページ制作(PC)
18.デザイン制作②- トップページ制作(レスポンシブ) - 下層ページ制作(レスポンシブ)
19.デザイン制作③- デザインの微調整
20.アニメーション設計- アニメーション設計
- Section 06
ポートフォリオサイト実装
21.マークアップ①- マークアップとスタイリング
22.マークアップ②- レスポンシブ - 全体調整
23.アニメーション実装①- Archive一覧アニメーション実装
24.アニメーション実装②- Aboutページアニメーション実装
25.アニメーション実装③- ページ遷移アニメーション実装
26.アニメーション実装④- ローディング・その他アニメーション実装
- Section 07
まとめ
27.最後に- 本講座学習後の3つのアクションについて - 講師からのメッセージ
当講座は、以下のツールを使用します。
[メインツール]
- Cursor
- Figma
[プラグイン・フレームワーク]
・Astro v5.15.3
・GSAP v3.13.0
・Lenis v1.3.14
・Barba v2.10.3
※プログラムの注意事項必要に応じて作成







