体系的に学べるインタラクティブなWebサイト制作
講座詳細

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

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

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

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

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

様々なアニメーション実装体験
タイトル、メニュー、ページ遷移、パララックスなど、Webサイトで求められる多様なアニメーション事例について、具体的な実装を理解できます。実務に直結する内容のため、制作に取り入れられるアニメーション表現のバリエーションを大幅に増やすことができます。
※上記の画像は講座に対する理解を深めるためのイメージです。
1.イントロダクション- 自己紹介
2.オリエンテーション- 講座の概要について
3.情報設計- コンセプト・イメージ設計 - ワイヤフレーム設計
4.デザイン制作①- トップページ制作(PC)
5.デザイン制作②- トップページ制作(レスポンシブ)
6.デザイン制作③- トップページ制作の微調整
7.アニメーションについての考え方- アニメーションについての考え方
8.アニメーション設計- アニメーション設計
9.実装環境構築- 技術/ソフトについての概要 - Cursorの設定 - Astro導入 / 必要なプラグインなどインストール
10.マークアップ①- マークアップとスタイリング
11.マークアップ②- レスポンシブ - 全体調整
12.アニメーション実装①- GSAPについての説明 - タイトル・ホバーアニメーション実装
13.アニメーション実装②- ローディングアニメーション実装
14.アニメーション実装③- モバイルメニューアニメーション実装
15.アニメーション実装④- パララックスアニメーション実装 - その他アニメーション調整など
16.情報設計- コンセプト・イメージ設計 - ワイヤフレーム設計
17.デザイン制作①- トップページ制作(PC) - 下層ページ制作(PC)
18.デザイン制作②- トップページ制作(レスポンシブ) - 下層ページ制作(レスポンシブ)
19.デザイン制作③- デザインの微調整
20.アニメーション設計- アニメーション設計
21.マークアップ①- マークアップとスタイリング
22.マークアップ②- レスポンシブ - 全体調整
23.アニメーション実装①- Archive一覧アニメーション実装
24.アニメーション実装②- Aboutページアニメーション実装
25.アニメーション実装③- ページ遷移アニメーション実装
26.アニメーション実装④- ローディング・その他アニメーション実装
27.最後に- 本講座学習後の3つのアクションについて - 講師からのメッセージ
当講座は、以下のツールを使用します。
[メインツール]
- Cursor
- Figma
[プラグイン・フレームワーク]
・Astro v5.15.3
・GSAP v3.13.0
・Lenis v1.3.14
・Barba v2.10.3
※プログラムの注意事項必要に応じて作成
こんにちは、Webクリエイターの岡田智哉です。2020年からデザイン制作とフロントエンド実装を担当し、特にアニメーションを用いた表現を得意としています。私はこれまで、Awwwards、The FWA、CSS Design Awardsなどで計16回以上の受賞を重ねてきました。
この講座は、私が実際の案件で使用している技術や、デザインと実装を一貫して行う考え方を中心にお伝えします。受講生の方の「どのくらいできるようになればいいのか」という悩みを解消し、実務レベルの流れや思考を体験できるようサポートします。ぜひ、つくる楽しさを感じながら学んでいただきたいです。
webデザインを勉強するきっかけを教えてください。
優れたWebサイトを紹介するギャラリーサイトで、アニメーションを印象的に使ったサイトに出会ったことが最初のきっかけでした。「Webサイトでここまで表現できるのか」と感動したのを今でも覚えています。その経験から、さまざまなサイトを見て Webデザインをもっと深く知りたいと思うようになりました。
講師さまご自身は、勉強してきた中で難しかった部分、それを解決するためにどのような努力をされてきましたか?
学習を始めた当時、私の周りには相談できる人がいませんでした。そのため、「何が正解なのか」がわからない状態で学び続けることが最も難しかったと思います。その状況を少しでも改善するために、数多くのデザインやコードを見て共通点を探すよう努めていました。多くの事例に共通している要素は、正解に近い考え方だと捉え、そうしたポイントを一つずつ参考にしていきました。
Webデザインをするにあたって、大切なポイントは何になりますか?
まずは「近接・整列・反復・対比」の4原則を意識して制作することが重要です。ユーザーが情報を正しく受け取れるよう、見やすいデザインにすることは欠かせません。そのうえで、作品の「らしさ」を表現できる要素やレイアウトを取り入れることで、全体のクオリティがさらに向上すると考えています。
受講生に向けてメッセージをお願いいたします。
私は、Webサイトで多彩な表現ができることに魅力を感じ、この仕事を始めました。おそらく、私と同じように「表現の面白さ」に惹かれて学び始めた方も多いのではないでしょうか。しかし、覚えることが多く、思うように進まず悩む瞬間もあると思います。本講座では、そうした悩みを少しでも解消できるよう、設計・デザインから実装まで一貫して学べる内容を用意しています。難しい部分もあるかもしれませんが、「つくる楽しさ」を感じながら取り組んでいただければ嬉しいです。
【経歴】 2020年からデザイン制作・フロントエンド実装を担当。コーポレートサイト・ブランドサイトなど数多くの案件に参画。Awwwards,The FWA,CSS DesignAwardsの受賞多数。 【受賞歴】 Awwwards : Site of the Day 2回 The FWA : FWA of the Day 10回 CSS Design Awards : Site of the Day 4回
【経歴】 2020年からデザイン制作・フロントエンド実装を担当。コーポレートサイト・ブランドサイトなど数多くの案件に参画。Awwwards,The FWA,CSS DesignAwardsの受賞多数。 【受賞歴】 Awwwards : Site of the Day 2回 The FWA : FWA of the Day 10回 CSS Design Awards : Site of the Day 4回