情報を伝えるためには、適切な言葉とビジュアルのデザインが必要となる。 そしてさらに、人を動かすためには、心に響くビジョンのデザインが求められる。 情報が氾濫し、価値観が多様化している今、正しさだけの表現では人々の行動を導くことができないのである。
この演習では「ビジョン」をキーワードにWebデザインを用いた情報発信を学ぶ。インターネットでの発信が当たり前となり、SNSが個人レベルで普及している昨今。Webメディアに求められるのは、コミュニケーションをつなぎ合わせる拠点性である。
このような社会的な前提を考慮しながら、技術の基礎を身につけると同時に、インフォグラフィックスやモーショングラフィックスによる表現を活用したWEBサイトを構築。他者や社会を意識した価値を創造しうる情報発信のデザインを学ぶ。
Web Design
HTML / CSS / WordPress
ウェブデザインの基礎的技術を学んだ上で、Wordpressを用いたポートフォリオサイトを制作する。これまで作成してきた課題や作品を、適切な説明とレイアウトを用いて発信する。
制作物
CMSを用いたポートフォリオサイト
技術
HTML・CSSの基礎／CMS・Wordpressの理解／レスポンシブなレイアウト
表現
コンセプトに基づいたデザイン／キーカラーと配色／ロキービジュアル
ツール
p5js／Illustrator／Wordpress
Infographics
Diagram / Pictogram / Chart
情報デザインの基本法則と図解の手法を学び、インフォグラフィックスを制作する。構造と因果関係を可視化することを目的として、明快な可視化と同時に、美しい表現を目指す。
制作物
インフォグラフィックス
手法
情報の分解と要約／図や矢印などを用いた図解／オリジナルのピクトグラムの作成
テーマ
ビジネスモデル・組織／サイエンス・テクノロジー／物語・歴史
ツール
Illustrator
Motion Graphics
Typography / Animation / Composite
映像制作の基本的技術を学び、タイポグラフィのアニメーションを中心としたモーショングラフィックスを作成する。コンセプトワードの世界観を時間展開を意識し、魅力的に視覚化する。
制作物
ショートムービー
技術
絵コンテ／2D・3Dアニメーション／アルゴリズム表現
表現
タイポグラフィ／コンセプトの視覚化／エモーショナルデザイン
ツール
AfterEffects / Cinema4D
1.企画と基礎技術
表現領域を俯瞰／コンセプト確定
環境構築とリサーチ
目標設定
環境の構築表現基礎：HTML/CSS/Wordpress
HTML/CSS
ネームカードの作成表現基礎：イラストレーター
ピクトグラム
高度な表現方法表現基礎：AfterEffects
操作方法／ファイル構造
アニメーションの概念リサーチまとめとコンセプト確定
ビジョンボード完成
コンセプトシート完成
