グラフィックデザイナー チェ・イン_최인 Details
トレーラー
グラフィックデザイナー チェ・イン
差別化された3DのインタラクティブなWebサイトポートフォリオで3Dグラフィックデザイン&コーディング能力を同時に養えるチャンスをつかめてみてください。
受講生全員に提供
チェ・インの講座だけの特典
-
講義動画50本を期間制限なしで受講可能 -
3DモーショングラフィックスとインタラクティブなWebサイトの制作方法を学ぶ -
講義資料を提供
講義資料の詳細
-
例題のモデリング原本ファイル- Cinema 4Dファイル -
インタラクションが可能な例題のソースコードファイル- HTMLファイル
- CSSファイル
- JavaScriptファイル -
講座内容を盛り込んだPPT
グラフィックデザイナー チェ・インのポートフォリオ
V-CODEの3DWebページ動画
動画の制作
-
2021ソウル都市建築ビエンナーレ 3Dキービジュアル及びアニメーションの制作
(Directed by.Everyday Practice) -
韓国大田エネルギーステーション03:目覚めて叫ぶ 展示動画の作家
-
韓国国立中央博物館 - アジアを塗る モーショングラフィックスの担当
(Designed by.Everyday Practice) -
Trippicモーショングラフィックス ボイス、サウンドを除く全体
海外の企業が
インタラクティブな3DWebサイトに
注目する理由
ロードマップ
C4Dで始める
インタラクティブな3DWebデザイン入門
講座の例題
3つのコンセプトのインタラクティブな
3DWebサイトを制作
Step 01. 3Dグラフィックとモデリング
C4Dを使ってグラフィックデザイナーのための
初心者レベルの3Dモデリングを実習して、
Webで使えるモデリングファイルを作ってみましょう。
-
モデリング 01 -
モデリング 02 -
モデリング 03
Step 02. インタラクションの実現
Webで3Dグラフィックを動かすための
JavaScript、Three.jsの基礎を学び、
6つのインタラクティブな要素を
実現してみます。
Step 03. インタラクティブな3DWebサイト
ユーザーの入力に反応する
3つのテーマの空間を構想し、
モデリング、レンダリングなどを通じて
インタラクティブな3DWebサイトを制作してみましょう。
※この例題は、今回の講座で実際に制作する例題です。
チェ・イン
グラフィックデザイナー
こんにちは。3D、2Dモーショングラフィックスデザイナーとフロントエンド開発者として活動しているチェ・インです。
私は視覚デザインの専攻した後、グラフィックスタジオの「Everyday Practice」でモーショングラフィックスデザイナー兼フロントエンド開発者としてキャリアを積み上げてきました。
現在はV-CODEスタジオを運営して、NikeやAppleなど有数の企業・機関とモーショングラフィックスとWeb開発のプロジェクトを行っています。
他にもデザインエイジェンシー、スタジオと活発に協業を続けています。

チェ・イン
現) V-CODEスタジオ代表
元) Everyday Practiceのモーショングラフィックスデザイナーとフロントエンド開発者
[参加プロジェクト]
2022 NikeワールドカップHERO:3Dグラフィック、モーション
2021 ソウル都市建築ビエンナーレのメインポスター:3Dグラフィック、モーション
2021 Singapore Management Universityの案内キオスク端末のソフトウェア開発
この講座のポイント
実務での働き方をそのまま身に付けるハイクオリティーの3DWebデザイン
単にモーションだけが派手なWebサイトを作るのではなく、Web上でユーザーとの相互作用を実現するプロセスまで扱い、フロントエンドについての理解を深めてみましょう。
Webサイトに最適化したトレンディな3Dグラフィックの制作方法
Webで読み込めるフォーマットに設定する方法から、簡単なC4D機能で最近流行っている風船の材質とシワの質感を演出する方法など、3Dグラフィック表現の基礎、応用、深化スキルを使ってみましょう。
ポートフォリオ制作&実務に直ちに活用できる実用的なノウハウ
多くの企業でインタラクティブなWebサイトをどのように活用しているのかを確認してみます。また、3Dグラフィックとモデリング、クリエイティブコーディングを学び、自分ならではのデザインが際立つWebサイトを作って実務に活用する方法について学んでみましょう。
講座内容
下記のような内容を学べます。
-
3Dグラフィックとモデリング:C4D入門30余りの練習例題を通じてC4Dツールの使い方から基礎造形を活用したモデリングやテクスチャリング、色、照明とカメラの設定、アニメーションなどを学んでみます。 -
コーディングの基礎 01:JavaScript変数の種類や繰り返し文と条件文、Functionを活用した機能とインタラクションの追加など、JavaScriptの概念を学び、Webデザインと実現のための礎を築きましょう。 -
コーディングの基礎 02:Three.jsJavaScriptの代表的なライブラリであるThree.jsの基礎を基にカメラの画角と移動、グローバルな光源と単方向の光源などを学び、設定してみます。
-
クリエイティブコーディング:6つのミニ例題作業したモデリングを活用してスクロール、方向キー、クリックに反応するインタラクションとパーティクルを作ります。これで画面をデザインする方法、流れるテキストアニメーションの制作方法などを学んでみます。 -
インタラクティブな3DWebサイトの制作 01:デザイン前で学んだ内容を合わせて、3つのテーマのインタラクティブなWebサイトをデザインしてみます。3Dモデリング、シーンの構成、質感、ベイクを通じてWebで使う3Dデザイン作業を行ってみます。 -
インタラクティブな3DWebサイトの制作 02:パブリッシング作業した例題をホームページでどのように表示するかをシーンとして構想します。基礎HTMLとCSSを学び、簡単な修正を経た後、最後のパブリッシングまでしてみます。
- 無期限視聴
- 最安値
一回の購入で、期限の制限なく視聴することができます。
05/25 (月) 販売価格が上がります。
もうすぐ販売価格が上がる予定です。
今すぐご購入ください!
カリキュラム
カリキュラム内容のご紹介
SECTION 01. Intro
SECTION 02. 3Dグラフィックとモデリングの入門:C4D
SECTION 03. クリエイティブコーディング:JavaScript
SECTION 04. クリエイティブコーディング:Three.js
SECTION 05. クリエイティブコーディング:Three.js実習
SECTION 06. 3Dグラフィックとモデリングの深化:Redshift
SECTION 07. インタラクティブな3DWebサイト:デザイン
SECTION 08. インタラクティブな3DWebサイト:実現
SECTION 09. 今後の方向
インタビュー
グラフィックデザイナー チェ・インがお話ししたいこと
講師自身の強みは何だと思いますか?
デザインスタジオの「Everyday Practice」でモーショングラフィックスとフロントエンド開発を同時に作業することでキャリアを始めた分、二つの分野に対する研究を着実に行っています。3DグラフィックとWeb開発を融合させて考え、表現できるという点が私の大きな強みだと思います。
今回の講座の主要ポイントは何ですか?
今回の講座は2Dに限られていたインタラクティブなWebデザインを3Dで表現することはもちろん、実際に開発まで一気に経験できるカリキュラムで用意しました。特に普段、3Dやコーディングに困難を感じていたグラフィックデザイナーの方に大きく役に立つと嬉しいです。
今回の講座はどのような方にお勧めしますか?
グラフィックデザイン関連でも、Webサイトの制作とモーショングラフィックス、3Dグラフィックを求めるクライアントが非常に増えています。コーディングと3Dグラフィック、あるいは両方に興味のある方や、自分のポートフォリオサイトにインパクトを加えたいデザイナーの方にお勧めします。
使用プログラムについてご案内します。
当講座は、以下のツールを使用します。
[メインツール]
- Cinema 4D
- Redshift
- Visual Studio Code
- Node.js
- JavaScript
- Three.js
※円滑な受講のため、最新バージョンのご使用を推奨します。
※Redshift(プラグイン)、JavaScript(言語)Three.js(ライブラリ)に区分されます。
おすすめの講座
この講座を見た方は
