アートディレクター田渕将吾 | Coloso.

トレーラー
アートディレクター
田渕将吾

実務フローに沿ってVIへの理解を深め
Webデザインの完成度を高めるノウハウ

企業ブランディングや商品プロモーションなど、
デザイナーとして20年以上にわたり活躍する
アートディレクターの田渕将吾が、
多様な例題に沿って
VI(Visual Identity)を生かした
Webデザインの秘訣をお教えします。

講座の前半では、VI開発のポイントを解説し
知識を深めていきます。
まずは、基礎調査の方法、
ブランド理解を基にした
ブランドのコンセプト開発や、
その言語化から視覚化といった
プロセスを説明した後、
田渕将吾が手掛けた過去の作品を見ながら、
VIができるまでの実際の過程を紹介します。

また、実際に田渕将吾が使用している
デザインの要素と原則を生かした事例を通して
UI、インタラクションデザインについて紹介し、
アートディレクションの手法の一つでもある
「４象限マトリクス」を用いて解説していきます。

土台となるVI開発への理解を深めた後は、
Webデザイン実習に挑戦。
ロゴのデザインから
サイトマップ・ワイヤーフレームの制作、
トップページから下層ページまで
ヒエラルキーを意識したレイアウトなど
実務のワークフローに沿った
Webデザイン制作を通して
実践にすぐ生かせる
ノウハウをお教えします。

VI開発のプロセスと、
Webデザインの制作スキルの両方を
一度に学べる講座を
Colosoで体験してください！

講座情報

本数：22本の映像
難易度：初級・中級
無期限視聴

使用プログラム

Figma
Adobe Illustrator CC以上

動画情報

オンラインVOD
オーディオ：日本語

講座特典

作品数：Webサイト１点、ロゴ１点、名刺１点
・講座内容のPDF
・例題で紹介したワイヤーフレーム／ロゴデザイン／Webデザイン／名刺デザイン
その他多数

ブランディングからWebデザインまで
トータルで手掛ける
田渕将吾のポートフォリオ

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

クリエイティブ企業サイト
TOPページ

クリエイティブ企業サイト
モバイル版 TOPページ

クリエイティブ企業サイト
WORKSページ

TOPページ中央部

モバイル版 TOPページ中央部

WORKS個別ページ

ロゴのデザイン

名刺デザインA

名刺デザインB

田渕将吾
アートディレクター

こんにちは。アートディレクター／
インタラクションデザイナーの田渕将吾です。
HALとモード学園を卒業後、
20年以上にわたり
都内でデザイナーとして活動してきました。

Webのインタラクションや、
ムービー・スチール・イラストの
アートディレクション、
そしてフロントエンドエンジニアリングまで、
ジャンルやクリエイティブの境界なく
多岐にわたり携わっており、
人とデジタルが相互に作用する
インタラクションデザインを得意としています。

この講座では、前半はデザインツールを使用せず、
対象となるブランドの基礎調査を通して
ブランディングのコンセプトを
言語化する流れを紹介し、
それを視覚化するための思考法を紹介します。
僕はこのプロセスを「VI開発」と呼んでいます。

そして後半で、Webデザインにおける
ビジュアル制作を行うための
座学とノウハウを紹介し、
最後に例題を通じてVIを生かした
Webデザインの制作スキルを説明します。

僕の講座が、皆さんのデザインを
魅力的にするためのヒントになることを
願っています。

田渕将吾

現) アートディレクター／
インタラクションデザイナー

【受賞歴】
A' Design Award & Competition、German Design Award、
The Webby Awards、Awwwards、CSS Design Awards、The FWA、
W3 Awards、グッドデザイン賞、ACC Tokyo Creativity Awards、
キッズデザイン賞、広告電通賞、新聞広告賞などを受賞。
2019年からThe FWAの審査員を務める。

【運営サービス】
Webデザインギャラリー S5-Style
ハウススタジオ SKLTN

Instagram

この講座のポイント

VI開発とWebデザインを
１度に学べるカリキュラム

今回の講座では、ブランドの理解からビジュアル開発、Web制作のスキルを、１つの講座だけで学ぶことができます。デザインワークの流れから学びたい初心者から、ブランドをしっかり理解した上でWebデザインを行い、スキルアップを目指す実務者まで、必見の講座です。

コンセプトを言語化し、
視覚化していくプロセス

デザイン思考によって言語化したコンセプトを視覚化するプロセスを知ることで、創造性を高め、納得感の高いビジュアルを生み出すためのアートディレクションや、写真やイラストのディレクション方法を学ぶことができます。

計画したコンセプトを
ビジュアル化するスキル

デザイン思考とアート思考によって計画したコンセプトをWebデザインへ取り入れていくフローを体験することで、「VIを生かしたWebデザイン」を造るための具体的なデザインワークについて理解を深めることができます。

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

VI開発のプロセス

VI開発は、企業やブランドのイメージを設計するプロセスを理解することが大切です。基礎調査、ブランド理解、コンセプト開発、コンセプトの言語化、コンセプトの視覚化、デザイン制作までの流れを解説します。
事例に沿って理解を深める実務フロー

VI開発をさらに深く理解できるよう、田渕将吾が実際に制作に携わった３つの事例を詳しく紹介。ビジネスニーズに応じたクリエイティブな解決策を提供する方法や、ビジネス戦略に合わせたVIの作成方法を知ることができます。
デザインの要素と原則

視覚的なデザインにおいて最も基本的な「要素と原則」について学びます。Webデザインを行う際に必要な要素をご紹介し、適用するべき原則について詳しく説明します。

UI/インタラクションデザイン

基礎的な要素と原則について、実践的な観点から理解を深めます。実例サイトをブラウジングしながら、デザインの要素と原則を生かしたUIデザインとインタラクションデザインについてお教えします。
ロゴやVI開発の実習

ブランドコンセプト、クリエイティブブリーフ、デザインコンセプト抽出を行い、VIを計画しロゴデザインなどへ活かしていくアートディレクションのフローを、分かりやすく解説します。
Webデザインの実習

Webサイトのワイヤーフレーム、トップページデザイン、下層ページデザイン、モバイルデザインなど、VIを生かしたWebデザインの制作スキルを、実習を通してしっかり身に付けます。

一回の購入で、期限の制限なく視聴することができます。
毎週金曜日の18時、販売価格が上がります。

もうすぐ販売価格が上がる予定です。
今すぐご購入ください！

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

Section 01. Introduction

01. オリエンテーション

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

02. イントロダクション

自己紹介
仕事紹介
得意な領域
仕事へのこだわり
デザインへのこだわり

Section 02. VI Design Process

03. VI開発のプロセス

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

Section 03. VI Case Studies

04. 事例から見るVI①

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

05. 事例から見るVI②

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

06. 事例から見るVI③

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

Section 04. Elements and Principles of Design

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

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

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

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

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

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

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

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

Section 05. Practical Training in Web Design

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

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

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

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

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

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

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を展開
名刺のデザイン

Section 06. Summary

22. 最後に

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

インタビュー
アートディレクター
田渕将吾が
お話したいこと

Question.01
該当の分野を勉強している方が一番難しく感じている点と、この講座を通してその点をどの様に解決できるでしょうか？

デザインは、美しいだけでなく、機能性やコミュニケーションの手段としても重要な役割を持ちます。可視化やユーザーエクスペリエンスの向上、課題解決など、多様な分野で必要とされます。そのため、最終的なビジュアルを完成させるには、さまざまな課題を克服する必要があります。この講座では、美しさと機能性を両立するためのワークフローを提供します。

Question.02
講師さまご自身は、勉強してきた中で難しかった部分、それを解決するためにどのような努力をされてきましたか？

Webデザインを始めた頃は独学で試行錯誤しましたが、10年のキャリアを積む中で好きな音楽や絵画、プログラミングなどを取り入れながら仕事を進めたいと思うようになりました。このアイデアが変化をもたらし、より多様な分野の経験をアートディレクションに取り入れることで、様々な仕事に携わることができるようになりました。この講座では、様々な分野でのデザイン経験から得た成功体験をベースに幅広い領域のデザインに取り組むためのプロセスや、効果的なデザイン思考を身に付けるためのヒントやテクニックをお伝えします。

Question.03
Webデザインを企画するにあたって、大切なポイントは何になりますか？

デザイナー自身が、デザインを情熱的かつ創造的に取り組むことです。今後、答えの見えない難しいプロジェクトを経験するかもしれません。そんな時に、デザイナー独自の視点を取り入れることで、競合他社との差別化を図りブランドイメージを向上させ、ビジネス成果を促進したりと、デザイナーの機転によってクリアできることがあります。このような高度な対応ができるデザイナーは市場で高い需要があり、難しくもやりがいのある仕事を得ることができると思います。

Question.04
講師さまがお考えになる、デザイン分野においての市場性、展望についてお話ください。

「デザイン」は、幅広い領域で活躍できる多様な可能性を持つ分野であると言えます。また、急速に進化するデジタル技術に伴い、デザイン分野は今後も需要が拡大すると予想されています。このため、待遇に差が生じることもありますが、どの分野でも、ビジネスやブランドに貢献できるデザイナーは重要な存在です。そのため、市場に求められるためには、デザイン思考、アート思考、デザイン業務スキルのバランスが重要だと考えられています。

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

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

[メインツール]
Figma
Adobe Illustrator CC以上

おすすめの講座
この講座を見た方は
こちらもチェック！

ご注意事項

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

Coloso. | コロソ.