Search Input

デザインが際立つインタラクティブなWebサイト制作

グラフィックデザイナー コ・ユンソ‌
‌
‌
‌
‌

講座詳細

‌
‌
‌

グラフィックデザイナー,コ・ユンソ_고윤서 Details

講座紹介

トレーラー
グラフィックデザイナー コ・ユンソ

デザインの魅力を一層際立たせるWebデザイン＆コーディングの入門
デザイン、開発、プログラミングと視覚芸術を結合させた幻想的な作品で注目を集める「クリエイティブなコーディング」の世界！

難しそうで、またプログラミングの経験がないからやってみようとも思わなかったですか？
Illustrator Zila Li
実務レベルの7つの例題を使って開発環境の設定からグラフィック、アニメーション、API、実験的なデザインのインタラクティブなWebサイトの構築まで学んでみます！

数多くの企業や団体のWebサイトをデザイン・開発してきたコ・ユンソのオンラインカリキュラムで、驚きのスキルとノウハウを身に付けてみてください。

Webデザイン＆コーディング用語の道しるべ

HTML / CSS / JavaScriptとは

今回の講座でHTMLはWebの構造を決めてそれに意味を与えます。CSSは実際のWebでの見た目を設定し、JavaScriptはブラウザ上のイベント処理と操作を担当します。

Visual Studio Codeとは

コードがより便利に編集できるソースコードエディタで、ユーザーがエディタのテーマやショートカットキー、設定などを変更することができます。

受講生全員に提供
コ・ユンソの講座だけの特典

  • Class Perks

    講義動画21本を期間制限なしで受講可能
  • Class Perks

    実習例題の原本ファイル(fig)を提供
  • Class Perks

    実習例題のソースコードの原本(HTML・CSS・JavaScript)を提供

グラフィックデザイナー コ・ユンソのポートフォリオ

  • Coloso Yunseo Go portfolio
  • Coloso Yunseo Go portfolio
  • Coloso Yunseo Go portfolio
  • Coloso Yunseo Go portfolio
  • Coloso Yunseo Go portfolio
  • Coloso Yunseo Go portfolio

講座の例題
インタラクティブなWebデザインと
コーディングのプロセスを学びます

coloso Yunseo Go Exercises
レスポンシブWeb基礎
coloso Yunseo Go Exercises
Web名刺（Linktree）
coloso Yunseo Go Exercises
天気によって変わるインタラクティブポスター（晴れ）
coloso Yunseo Go Exercises
天気によって変わるインタラクティブポスター（雲）
coloso Yunseo Go Exercises
天気によって変わるインタラクティブポスター（雪）
coloso Yunseo Go Exercises
天気によって変わるインタラクティブポスター（雨）
coloso Yunseo Go Exercises
ユーザーがスタンプポスターを直接作るWebペイント 01
coloso Yunseo Go Exercises
ユーザーがスタンプポスターを直接作るWebペイント 02
 
画像をクリックすると、実現されたWebサイトを確認することができます。
講師紹介

コ・ユンソ
グラフィックデザイナー

こんにちは、デザインスタジオ「YYY」代表のコ・ユンソです。

私はデザインスタジオ「Everyday Practice」でデザイナー兼開発者として勤めました。その後、グラフィックウェブ実験グループ「HHHA」で親近感のあるユーザーエクスペリエンスを提供する一方で目立つデザインとは何かについて考えてきました。

今はインタラクティブWebサイトを広めるため、より直接的なソリューションを提供する製品を様々な形で作っています。

また、開発やデザインにとどまらず、各種講演やワークショップを通じて私の経験とノウハウも伝えています。

Background Images
コ・ユンソ
グラフィックデザイナー コ・ユンソ

現) クリエイティブ デザインスタジオ「YYY」代表
現) グラフィックウェブ実験非営利グループ「HHHA」所属
元) グラフィックデザインスタジオ「Everyday Practice」のデザイナー／開発者
元) 株式会社allmytourのデザイナー／開発者



[Website]
Naver Nanum Square Neo（開発）
Cine21報道（インタラクションデザイン／開発）
収蔵庫（開発）
2021ソウル都市建築ビエンナーレ（開発）
ソウル独立映画祭（開発）
ソウルデザインフェスティバル（開発）
Seoul Artists’ Platform（開発）

[展示]
2022.11 〈Garden.local〉, BOAN1942, Seoul, Korea
2022 〈POST-IT〉, Same Gallery, Tokyo, Japan

[受賞]
Asia Design Prize 2021, 2022

[講演・インタビュー]
2022 韓国タイポグラフィ学会 T/SCHOOL 2022
2022年月刊『デザイン』- 2022年10月号表紙および「完全さに反抗する」セクション - YYYのコ・ユンソ
2022 チェ・テユンスタジオのインタラクティブコーディング講座でアーティストによるトーク
2022 It's Nice That
2022年月刊『デザイン』- 2022年4月号「デザインで埋めるA to Z、アルファベットプロジェクト」 - HHHA

Instagram
講座のポイント

この講座のポイント

実験的なグラフィックデザインを基盤としたクリエイティブコーディング入門

Webサイト作りのための骨格作りから、インタラクティブな要素のある各種サイトの制作方法まで身に付けます。Webサイトでデザインを引き立たせるためのHTML、CSS、JavaScriptの概念を学んでみます。

Coloso Yunseo Go Introduction

7つの例題で身に付けるWebデザインと開発のプロセス

クリエイティブなデザインを基にして、ユーザーの入力値に反応するインタラクティブなWebサイトを自分で設計し、実務でしか学べないワークプロセスを7つの例題を通じて段階別に学んでみます。

Coloso Yunseo Go Introduction

デジタルインタラクションへの理解と使い方

グラフィックデザインをWeb上で自由に実現できるよう、ユーザーとの対話を通じて出来上がるインタラクティブなコンテンツの作り方を学んでみます。

Coloso Yunseo Go Introduction

講座内容
下記のような内容を学べます。

  • Coloso graphic design Class Details
    Web開発の基礎およびインタラクションの種類と活用
    デザイナーのためのWeb開発のHTML・CSS・JavaScriptの基礎を学習し、Webインタラクションの種類と活用例を理解してみます。
  • Coloso graphic design Class Details
    デバイスの大きさによって変わるレスポンシブWebサイト
    様々なデバイスのユーザーに合わせたWebサイトを構築するための、CSSの単位とクエリについて説明します。また、多くのテキスト情報を持ったWebサイトを作るために必要なスクリーンタイポグラフィの知識も学びます。
  • Coloso graphic design Class Details
    デザインが目立つLinktreeの名刺と自己紹介
    Figmaでデザインソースを抽出した後、各種混合モード・アニメーション・関数を使用することで、接続するたびに変わるWebサイトを実現します。
  • Coloso graphic design Class Details
    API概念が適用された天気ポスターの例題
    天気データを通じてAPIの基本概念を学習し、取得したデータを基にWeb上でグラフィックを動的に表現します。
  • Coloso graphic design Class Details
    ユーザーがポスターを作って共有するWebサイト
    HTML Canvasについて学習し、Webペイントを作ってみます。Google Firebaseを通じてWebサイトをホスティングし、外部に共有する方法を学びます。
  • Coloso graphic design Class Details
    インタラクティブWebの可能性と効率的な開発のノウハウ
    インタラクティブWebで表現できる様々なコンテンツを詳しく確認します。これからのマインドセット・勉強の方向性・開発過程と時間を効率的に短縮させる方法を学びます。


(자동 구성) 가격이 인상됩니다.

지금이 최저가!
カリキュラム

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

SECTION 01. Orientationと開発環境の設定

01. Orientation

  1. WebでできることとインタラクティブWebとは
  2. 使用するツールとプログラミング言語の紹介

02. デザインツールとプラグインのインストール＆開発環境の設定

  1. HTML Live Viewerプラグインのインストール
  2. CSSプリプロセッサーを使うためのプラグインのインストール
  3. Node.jsとnpmのインストール
  4. VS Code環境のカスタマイズ
SECTION 02. Web開発の第一歩：HTML、CSS、JavaScript

03. レスポンシブWebサイトの構築 01：文字量の多いWebサイト

  1. デザインファイルの分析（フォントサイズ・間隔・グリッド）
  2. HTMLとは：HTMLマークアップとタグの理解
  3. CSSとは：CSSをリンクさせる
  4. CDNとは：フォントを読み込む

04. レスポンシブWebサイトの構築 02：文字量の多いWebサイト

  1. Inspectorでスタイルのプレビュ（Figmaと一緒に見る）
  2. CSSの単位の理解（px・rem・em・vw・vh）
  3. グリッドに合わせたCSSのスタイリング
  4. Media Queryでレスポンシブにする

05. Web名刺作り 01：文字量の少ないWebサイト

  1. デザインファイルの分析（フォントサイズ・間隔・グリッド）
  2. デザインプログラムでアセット（資産）をエクスポートする方法
  3. HTMLマークアップ、タグRecap
  4. サイトへの移動

06. Web名刺作り 02：文字量の少ないWebサイト

  1. HTML SVGタグの基礎
  2. CSSキーフレームアニメーション
  3. JavaScriptとは、JavaScriptの読み込み
  4. JavaScriptの変数、関数、データタイプ

07. Web名刺作り 03：文字量の少ないWebサイト

  1. JavaScript Math.random()への理解
  2. JavaScriptでDOMを操作する
SECTION 03. 天気によって変わるWebサイト

08. 天気APIで、天気によって変わるWebポスター制作 01

  1. デザインファイルの分析（フォントサイズ・間隔・グリッド）
  2. SVGベクターデザインをそのままWebサイトに適用する
  3. HTMLマークアップ 01
  4. CSSスタイリング 01

09. 天気APIで、天気によって変わるWebポスター制作 02

  1. HTMLマークアップ 02
  2. CSSスタイリング 02

10. 天気APIで、天気によって変わるWebポスター制作 03

  1. JavaScript Event Listenerの理解（１）
  2. EventによるDOMのスタイル操作

11. 天気APIで、天気によって変わるWebポスター制作 04

  1. JavaScript Event Listenerの理解（２）
  2. EventによるDOMの生成と削除

12. 天気APIで、天気によって変わるWebポスター制作 05

  1. APIへの理解とjson
  2. HTTP Request Method
  3. OpenWeath APIで天気情報の獲得

13. 天気APIで、天気によって変わるWebポスター制作 06

  1. APIによるビジュアルの実現
SECTION 04. Webペイントを作って画像を共有するWebサイト

14. Webペイントを作って画像を共有するWebサイトの構築 01

  1. デザインファイルの分析（フォントサイズ・間隔・グリッド）
  2. Firebaseのインストールと起動
  3. Firebase Hostingの設定と配布
  4. HTMLマークアップ
  5. CSSスタイリング

15. Webペイントを作って画像を共有するWebサイトの構築 02

  1. HTMLマークアップ
  2. CSSスタイリング
  3. JavaScriptの読み込み

16. Webペイントを作って画像を共有するWebサイトの構築 03

  1. JavaScript Event Listener
  2. JavaScriptとHTML Canvas

17. Webペイントを作って画像を共有するWebサイトの構築 04

  1. JavaScriptとHTML Canvas（２）
  2. HTML Canvasの画像の保存

18. Webペイントを作って画像を共有するWebサイトの構築 05

  1. Cloud Storage for Firebaseの設定
  2. Cloud Storage for Firebaseに画像のアップロード

19. Webペイントを作って画像を共有するWebサイトの構築 06

  1. Cloud Storage for Firebaseからデータの獲得
SECTION 05. Outro：デザイナーと開発者の境界で

20. Appendix

  1. コードファイルの整理と管理
  2. settings.jsonの変更で作業フォルダごとに環境の設定
  3. その他のコツ

21. 勉強の方向性

  1. 他の構造をしたインタラクティブなWebサイトの理解
  2. Web開発の学習ルートと方向性の理解

*講座動画の公開時期や、カリキュラムのイメージ・内容などは予告なく変更になる場合がございます。予めご了承ください。

インタビュー
グラフィックデザイナー コ・ユンソがお話ししたいこと

Background Images
Question.01
Webデザイン分野における自身の強みは何だと思いますか？

デザインとWeb開発を同時に進めることです。Webサイトのエコシステムを含むユーザーとのコミュニケーション方法を理解しているため、一般的なユーザーエクスペリエンスから特別感をどうやって出すかも考えます。私は2つの業務を一緒に行ってきたので、実務で各分野が求めている能力と内容が目立つインタラクションデザインに関する知識を教えることができます。
Question.02
今回の講座の差別化ポイントは何ですか？

特別なグラフィックデザインとこれを実現できるWebサイトを直接制作する実務中心の講座であることです。デジタル機器のインタラクションに対する理解と用法や、Web開発の基礎、API使用といった内容をすべて深掘りします。初めてコーディングを学ぶ方も自作のWebサイトを作り、インタラクションを研究してそれを適用する開発段階まで自ら体験できると思います。
Question.03
受講生に向けてメッセージをお願いいたします。

様々なデジタル機器が一般化するにつれ、静的なデザインから一歩飛び出したインタラクティブなWebサイトの分野がますます広がっています。今までは固定したテンプレートを基にWebを構築してきましたが、これからは個性的でユニークなWebサイトが作られています。今回の講座で自分のオリジナルデザインがユニークで魅力的な武器になるよう、一歩ずつ進めていきましょう。

使用プログラムについてご案内します。

当講座は、以下のツールを使用します。

[メインツール]
- Figma 2022 (116.4.4.)
- Visual Studio Code
- Adobe Illustrator 2023
- Node.js 18.12.1

※Figmaは以前のバージョンを使っても構いませんが、Node.jsはバージョン15以降をご使用ください。
※Adobe Typekitを使うためにAdobeライセンスが必要になりますが、今回の講座では他のフォントを埋め込んだりシステムフォントを使ったりする方法について紹介します。

Fusion360, Keyshot, adobe photoshop, adobe illustrator
おすすめの講座

おすすめの講座
この講座を見た方は

ご注意事項

 *本ページ上の情報は弊社の都合により事前の告知なく変更、終了することがございます。予めご了承ください。
*講座の返金規定はColosoの返金ポリシーに準じます。▶ 返金ポリシーはこちら
* 受講、例題使用範囲などの知的財産権、機器台数制限に関する情報はFAQ 欄でご確認ください。