池田さん［株式会社ICS］（業界研究2019）

ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

トライデントコンピュータ専門学校 Webデザイン学科の最新情報を紹介しています。学生へのインタビュー記事から学生作品の解説、Webデザイン・マークアップ・プログラミングの授業風景、プロジェクト発表会、名古屋のWeb制作会社情報、イベント参加レポートやWeb制作の技術解説などWeb制作に関連する記事を掲載しています。トライデントコンピュータ専門学校は、いま話題の名古屋駅からユニモール地下街を歩いて3分です。

<< 1年生進級制作発表会

三瓶さん［株式会社メンバーズ UX MILK 編集長］（業界研究2019） >>

2020.01.24 [金] 池田さん［株式会社ICS］（業界研究2019）

最終更新:2020.12.09学校生活業界研究授業

1月も半ばになるとお正月気分も少なくなり、学生も授業や課題に大忙しです。
後期の授業も終盤となってきました。

今年度、最後の業界研究授業は、フロントエンドの情報メディア「ICS MEDIA」の運営のほか、数々のクリエイティブ性の高いコンテンツ開発をしているインタラクティブプロダクション株式会社ICSの池田泰延さんにお越しいただき「フロントエンドの動向と必要なもの」というテーマで話をしていただきました。

ICSとは

ICSは東京都港区に本社を持つ、デジタルコンテンツの企画・デザイン・制作を行っているインタラクティブプロダクションです。Web開発のほか、テクニカルメディア「ICS MEDIA」では、スタッフの皆さんが順番に記事を執筆されています。

また、各セミナーでの登壇や執筆活動など、池田さんを始めスタッフの皆さんも情報発信をされており、フロントエンドの勉強をしていれば、必ずと言っていいほど、その発信には触れていると思います。

フロントエンドの開発では、Webサイトの他にもブラウザ上で3DCG（WebGL）を取り入れた仕事や、Web技術を利用したスマホアプリ、映像やゲームなど他の分野のクリエイターと協働した有名なゲームのブラウザゲームなど、実際の案件を例に、高いフロントエンド技術を使い、魅力的なお仕事を紹介されました。

マイクロインタラクションについて

ものづくりへの思いとして、見るに足りない瞬間を喜びの瞬間に変えるため、フロントエンドのマイクロインタラクションの重要性について話をしていだきました。

マイクロインタラクションとは、ユーザビリティやUXを向上するために設計されたユーザーアクションに対する細かくも、適切なフィードバックのことを言います。

Dribbble - icons microinteractions [gif] by Tony Pinkevych |...

マイクロインタラクションは、Web制作に関わる「ディレクター」「デザイナー」「エンジニア」がそれぞれ関わることが理想です。
ディレクターは、インタラクションの目的やビジョンを明確に示し、参考となるモーションなどをデザイナーに伝えます。
デザイナーは、Adobe XDやAfter Effectsなどのツールを利用して、動きのイメージを創造しながらグラフィックを作成し、エンジニアに要望や指示を明確に伝えます。モーションサンプルの他、絵コンテでもその役割は果たせます。
エンジニアは、デザインデータからモーションを実装します。

最近では、JavaScriptよりもCSSでモーションを設定することが多くなりました。CSSでのモーションの付け方など、実際にコードなどを見せて解説していただきました。

また、最近ではAdobe XDの自動アニメーション機能で簡単にモーションが表現できるほか、After Effectsを使った表現などもできます。

現在は、様々な人がWebを利用しています。
池田さんは制作する時は、UIの動きだけでなく、アクセシビリティにも考慮した実装されています。
冒頭で紹介していただいた、3DCGのコンテンツにもキーボードで操作、Voice Overなどで文字の読み上げができるように実装されていました。

Web制作に必要なこと

最後に学生に対して必要なこととして、「ウェブ技術の習得（HTML+CSS、JavaScript、デザイン系ソフトの習得［XD, Sketch, Figma］やモーション系ソフト［After Effects］」の他に、ものごとを注意深く観察することの重要性、観察することで新たな知識につながるということを話していただきました。