クラス紹介

ユーザーの操作に合わせて動くアニメーションやデザインを実装することは、開発者にとって必要な作業ですか？そうじゃない！デザイナーでもこのクラスで私と一緒にコーディングを学べばそれができます。

私はNaverでインタラクティブデザイナーとして7年以上働いており、主にコーディングを使用してUIアニメーションとプロトタイプを作成しています。もちろん、私が最初にコーディングを始めたときも苦労しました。このクラスでは、デザイナーとしてコーディングを学んでいる間に経験した試行錯誤と、その過程で培った上級インタラクティブデザイナーのコーディングノウハウを紹介します。

私たちデザイナーは、視覚的な結果を見ながら作業するのが一般的ですよね？コーディングを通じて完成した結果を確認できるように、多くの例を用意しました。

コーディングについて何も知らないデザイナーでも、私のレッスンを段階的に進めていけば、美しい動きのアニメーションが作れます！

コース効果

• コーディングについて何も知らない初心者でも、インタラクションの例を作成できます。
• JavaScript コーディングを使用してインタラクションとアニメーションを作成する方法を学びましょう。
• インタラクティブデザインを実装する際に発生する問題の種類とその解決方法について学ぶことができます。

推奨ターゲット

• コーディングによって実装されたインタラクションやアニメーションを通じてスキルを向上させたいデザイナー
• 実装デザイナー（インタラクティブデザイナー）としてキャリアをスタートさせたい方
• 独自のデザインや動きを適用したいデザイナー
• インタラクティブデザインで自分の競争力を発揮したいデザイナー

プレコースメモ

• このクラスは、Visual Studio 英語版のコードエディターを使用して行われます。
• Mac OS とウィンドウ OS の両方を使用できます。

このクラスを特別なものにしている理由は2つあります。

❶ 12年目のインタラクティブデザイナーが教えてくれた

JavaScript シンタックスとコーディング

私はコーディングを通じてインタラクションやアニメーションを作成していますが、「デザイナー」でもあります。私が最初にコーディングを学んだときも、難しかったので非常に難しい経験をしました。だからこそ、コーディングを始めたばかりの多くのデザイナーの手助けをしたいと思っています。

このクラスでは、コーディングについて何も知らない人でもインタラクティブデザインを始められるように、基本的なJavaスクリプト文法を教えます。さらに、さまざまな例に従ってインタラクションをデザインする方法を学び、その過程で直面するすべての問題を解決する方法、さらにはアニメーションの詳細を改善する方法を学ぶことができます。

▲ 第6章スライディングポップアップアニメーションの練習例

▲ 第7章円を描くインタラクションの練習例

❷ コードを打つとすぐに確認できます

楽しいインタラクションの例

私たちは開発を専門とする開発者ではありません。そのため、難しい開発言語や開発構造を最初から知る必要はありません。デザイナーはビジュアル出力に精通しているので、そのような例を中心にクラスを編成しました。

コードを書いたらすぐにブラウザで視覚的に確認できるサンプルを使って楽しいインタラクションを作成して、コーディングを学びましょう。マウスの動きやクリックなど、ユーザーの行動によって見た目が異なるインタラクティブなアニメーションを、自分の手で作成できるようになりました。

▲ 第8章ドラッグ・レクト・インタラクションの練習例

▲第9章スローボールインタラクション練習例