Coloso. | コロソ.

Search Input

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

Webクリエイター岡田智哉
  • 受講可能


講座詳細

  • 受講可能
  • 初級~中級
  • 全27講 12時間 27分
  • 日本語
  • -
  • 講義資料有り



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

講座内容
下記のような内容を学べます。
<p>Figmaの活用方法</p>

Figmaの活用方法

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

<p>Gridレイアウトの活用</p>

Gridレイアウトの活用

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

<p>アニメーションの考え方</p>

アニメーションの考え方

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

<p>Astroの基礎</p>

Astroの基礎

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

<p>アニメーションライブラリの基礎</p>

アニメーションライブラリの基礎

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

<p>様々なアニメーション実装体験</p>

様々なアニメーション実装体験

タイトル、メニュー、ページ遷移、パララックスなど、Webサイトで求められる多様なアニメーション事例について、具体的な実装を理解できます。実務に直結する内容のため、制作に取り入れられるアニメーション表現のバリエーションを大幅に増やすことができます。

※上記の画像は講座に対する理解を深めるためのイメージです。

カリキュラム
カリキュラム内容のご紹介

※下記の画像は講座に対する理解を深めるためのイメージです。

  • Section 01
    自己紹介
    curriculum_webcreator_okadatomoya_jp01.webp
    • 1.イントロダクション- 自己紹介

    • 2.オリエンテーション- 講座の概要について

  • Section 02
    コーポレートサイトデザイン
    curriculum_webcreator_okadatomoya_jp02.webp
    • 3.情報設計- コンセプト・イメージ設計 - ワイヤフレーム設計

    • 4.デザイン制作①- トップページ制作(PC)

    • 5.デザイン制作②- トップページ制作(レスポンシブ)

    • 6.デザイン制作③- トップページ制作の微調整

    • 7.アニメーションについての考え方- アニメーションについての考え方

    • 8.アニメーション設計- アニメーション設計

  • Section 03
    実装環境整備
    curriculum_webcreator_okadatomoya_jp03.webp
    • 9.実装環境構築- 技術/ソフトについての概要 - Cursorの設定 - Astro導入 / 必要なプラグインなどインストール

  • Section 04
    コーポレートサイト実装
    curriculum_webcreator_okadatomoya_jp04.webp
    • 10.マークアップ①- マークアップとスタイリング

    • 11.マークアップ②- レスポンシブ - 全体調整

    • 12.アニメーション実装①- GSAPについての説明 - Lenis.js導入 - タイトル・ホバーアニメーション実装

    • 13.アニメーション実装②- パララックスアニメーション実装

    • 14.アニメーション実装③- モバイルメニューアニメーション実装

    • 15.アニメーション実装④- ローディングアニメーション実装 - その他アニメーション調整など

  • Section 05
    ポートフォリオサイトデザイン
    curriculum_webcreator_okadatomoya_jp05.webp
    • 16.情報設計- コンセプト・イメージ設計 - ワイヤフレーム設計

    • 17.デザイン制作①- トップページ制作(PC) - 下層ページ制作(PC)

    • 18.デザイン制作②- トップページ制作(レスポンシブ) - 下層ページ制作(レスポンシブ)

    • 19.デザイン制作③- デザインの微調整

    • 20.アニメーション設計- アニメーション設計

  • Section 06
    ポートフォリオサイト実装
    curriculum_webcreator_okadatomoya_jp06.webp
    • 21.マークアップ①- マークアップとスタイリング

    • 22.マークアップ②- レスポンシブ - 全体調整

    • 23.アニメーション実装①- Archive一覧アニメーション実装

    • 24.アニメーション実装②- Aboutページアニメーション実装

    • 25.アニメーション実装③- ページ遷移アニメーション実装

    • 26.アニメーション実装④- ローディング・その他アニメーション実装

  • Section 07
    まとめ
    curriculum_webcreator_okadatomoya_jp07.webp
    • 27.最後に- 本講座学習後の3つのアクションについて - 講師からのメッセージ

講座に必要な準備物

当講座は、以下のツールを使用します。
[メインツール]
- Cursor
- Figma

[プラグイン・フレームワーク]
・Astro v5.15.3
・GSAP v3.13.0
・Lenis v1.3.14
・Barba v2.10.3

※プログラムの注意事項必要に応じて作成

program-webcreator-okadatomoya-1.webp
program-webcreator-okadatomoya-2.webp
おすすめ

ご注意事項

* 詳細ページ内の一部画像は講座に対する理解を深めるためのイメージです。 * 本商品はVOD動画形式の講座を提供するオンライン講座です。(アセット商品は除く) * 割引は状況により事前の告知なく終了、延長されることがございます。 * 事前予約講座の場合、講義映像は公開日程に応じて順次製作および公開され、1次映像公開日が受講開始日となります。 * 決済が完了されますと、マイ講義室を通じてご受講いただけます。 総学習期間: – 最初の10日間は正常受講期間(有料受講期間と同様)で、無料受講期間は11日から以降無制限であり、有料受講期間と無料受講期間とも同様にご視聴いただけます。 – 受講開始日: 受講開始日は決済日から期間が算定され、決済を完了するとマイ講義室からご受講いただけます。(事前予約講座は1次映像公開日が受講開始日となります) – 弊社の都合で受講開始が遅れた場合は、その日程分の受講開始日が延期されます。
*受講、例題使用範囲などの知的財産権、機器台数制限に関する情報は▶FAQ 欄でご確認ください。 *講座動画の公開時期や、カリキュラムのイメージ・内容などは予告なく変更になる場合がございます。予めご了承ください。
*本ページ上の情報は弊社の都合により事前の告知なく変更、終了することがございます。予めご了承ください。 *講座の返金規定はColosoの返金ポリシーに準じます。 ▶ 返金ポリシーはこちら
- アセット商品の転売、再配布、盗用、譲渡等は厳しく禁じられています。 - アセット商品から抽出されたイメージやアセット商品を修正および再加工したイメージの譲渡や配布、販売は厳しく禁じられています。 - 購入と同時にご利用可能なアセット商品は購入後、ダウンロード有無に関わらずキャンセル不可となります。 - 事前予約アセット商品は、アセット公開前まではキャンセル可能となります。 - アセット商品は決済完了後、「マイ講義室」→「受講する」→「講義資料」でご確認いただけます。