事例を基にVI開発への理解を深め、ワークフローに沿った例題を通して、Webデザインのスキルを身に付けます

Section 01. Introduction

01. オリエンテーション

1. 講座の概要
2. 学習で期待できること
3. スコープ
4. 各セクションについて
5. FAQ

02. イントロダクション

1. 自己紹介
2. 仕事紹介
3. 得意な領域
4. 仕事へのこだわり
5. デザインへのこだわり

受講メモ

講座と講師の方の説明。
日本の方なのでわかりやすく、内容も素晴らしく、また面白かったです。

ご自身のポートフォリオの解説がとても参考になりました。

Section 02. VI Design Process

03. VI開発のプロセス

1. 基礎調査
2. ブランドの理解
3. コンセプトの言語化
4. クリエイティブブリーフ
5. コンセプトの視覚化
6. デザイン制作

Section 02. VI Design Process

受講メモ

なぜVIを用いた制作を行うのか、講師の方の経験や事例を含めて解説してくださいました。

Section 03. VI Case Studies

04. 事例から見るVI①

1. 「クラウド歯科」
2. 実際の事例を題材にVIができるまでのプロセスを紹介

05. 事例から見るVI②

1. 「gradation, Inc.」
2. 実際の事例を題材にVIができるまでのプロセスを紹介

06. 事例から見るVI③

1. 「ZEY」
2. 実際の事例を題材にVIができるまでのプロセスを紹介

受講メモ

講師の方の制作されたサイトなどをもとに、そのプロセスや、アイデア・試行錯誤された様子を丁寧に解説していただきました。

イラストレーターさんの選別から、依頼、指示の内容や手法まで紹介していただいて、とても参考になりました。

「ZEY」は、デジタルクリエイター専門のアサインプラットフォームで、企業がプラットフォーム上に掲載されているクリエイターに対してオファーを送ることができるサービスです。

06. 事例から見るVI③では、サイトの立ち上げの際のコンセプトや市場環境、顧客像から、ブランドのナラティブまで紹介されていました。

「ZEY」は、以前から知っていたのですが、こちらの講義をみたあとだと、習った内容をこう実現しているのかというのが伝わって面白かったです。

Section 04. Elements and Principles of Design

07. デザインの要素と原則

1. Elements of Design（デザインの要素）
2. Principles of Design（デザインの原則）

08. 実例から見るUIデザイン

1. デザインの要素と原則を生かしたWebサイトを紹介

09. 実例から見るインタラクションデザイン

1. デザインの要素と原則を生かしたWebサイトを紹介

10. アートディレクションの手法

1. 4象限マトリクス（ポジショニングマップ）

受講メモ

線や色などのデザインの要素から、黄金比率などの法則の解説。

それらを活用した実例の紹介と解説など、とても充実した回でした。

事例がとにかく豊富で、解説もとにかく詳しく、こんなデザインがしたい、サイトを作りたいとワクワクしました。
ここまでリッチなサイト制作はなかなかできないのですが、自社サイトなどで試してみたいです。

Section 05. Practical Training in Web Design

11. Webデザイン実習VIを考える

1. 架空のクリエイティブ企業のブランディング
2. ブランドコンセプトの確認
3. ナラティブの確認
4. クリエイティブブリーフの確認
5. ビジュアルアイデアの検討

12. Webデザイン実習ロゴデザイン

1. ロゴのデザイン
2. ロゴのタイプフェイスの検討
3. ロゴのプロトタイピング

13. Webデザイン実習 ワイヤーフレーム

1. サイトマップ・ワイヤーフレームの制作
2. マーケティングファネルの活用

14. Webデザイン実習 トップページデザイン①

• コンテンツのレイアウト
• ヒエラルキーを意識したゾーニング

15. Webデザイン実習 トップページデザイン②

• VIの展開
• 写真の配置
• 動画の配置
• UIデザインの作り込み

16. Webデザイン実習 トップページデザイン③

 

• デザインデータの仕上げ
• Hoverアクションのデザイン
• フォントのLocal styles化
• 要素のComponent化

17. Webデザイン実習 トップページデザイン B案

• デザインB案のプロトタイピング
• 配色
• タイプフェイス
• インターフェイス

18. Webデザイン実習 下層ページデザイン①

• WORKS一覧ページのデザイン
• ヒエラルキーを意識したゾーニング
• レイアウトのプロトタイピング

19. Webデザイン実習 下層ページデザイン②

• WORKS事例紹介ページのデザイン
• ヒエラルキーを意識したゾーニング
• CMSを意識したコンテンツプランニング

20. Webデザイン実習 モバイルデザイン

• その他のプロダクトへVIを展開
• モバイルページのデザイン

21. デザイン実習 名刺デザイン

その他のプロダクトへVIを展開 名刺のデザイン

受講メモ

架空の依頼をもとにクライアントさんと架空のやり取りをしてコンセプトを磨いていく工程や、ナラティブの構築まで、ここまで話してもらえるのか！と驚くほど教えて頂きました。
ロゴのデザインやプロトタイプの制作も、脳内覗かせていただきつつ、デザインの工程が拝見出来ました。
たまに作業に集中されて無音になるのもいいです。
画面ではすごいことがおきています。

私は、Canvaを利用していないので、Adobe DX を使用したのですが、ソフトの使い方でなくデザインの考え方やコンセプトを丁寧に案内して下さる講義だったので問題なく受講できました。

Section 05. Practical Training in Web Design　は、全11工程と本当に豪華で勉強になりました。

Section 06. Summary

22. 最後に

• 必要な素養
• デザインの源泉
• おわりに

受講メモ

あ