デザイナー,宇都宮勝晃_우츠노미야 Details
Webデザイン制作のプロセスの習得
今回の講座では、Figmaを使用した2種類のWebデザイン制作を通して、宇都宮勝晃ならではのブランドの「らしさ」と「ありたい姿」を実現するWebデザイン制作の秘訣をお教えします。

次に、デザイン企業のリブランディングプロジェクトを想定し、インタビュー設計や「らしさ」の構造化と言語化などの方向性を決定。ワイヤーフレームの検討を通して、企業サイトのデザイン方法を学びます。
トップページでは、タイプフェイスの検討からディテールの作り込みまでを、下層ページでは、トップページのデザインルールをどう展開しデザインしていくかについてお教えします。
最後に、メディアサイトのデザインを制作。企業サイト制作とは異なるコンテンツ・マネジメント・システムを考慮した、下層ページ制作のコツを身に付けます。
宇都宮勝晃ならではの、機能性とデザイン性を兼ね備えたWebデザイン制作のプロセスを、Colosoで体験してください!

講座情報
本数:20本の映像
難易度:初級・中級
無期限視聴

使用プログラム
Figma

動画情報
オンラインVOD
オーディオ:日本語

講座特典
作品数:2点
講座内容のPDF
作品2点のJPEGファイル
宇都宮勝晃のポートフォリオ
講座の例題
例題に沿って学ぶWebデザイン制作スキル
-
「らしさ」と「ありたい姿」を実現するデザインプロセス
-
機能性と美しさを兼ね備えたWebデザインを作るための切り口
-
インタビュー設計とインプットの統合からコンセプトメイキングのプロセス
-
架空デザイン企業サイト
TOPページ -
架空デザイン企業サイト
TOPページ 中央部 -
架空デザイン企業サイト
ABOUTページ 中央部
-
架空デザイン企業サイト モバイル版
ABOUTページ 中央部 -
架空メディアサイト
TOPページ -
架空メディアサイト
詳細記事テンプレートページ
宇都宮勝晃
デザイナー
こんにちは。デザイナーの宇都宮勝晃です。仏師に師事後、約10年程Webのディレクションを経験し、37歳からフリーランスのディレクターへ転身しました。翌年の38歳からデザイナーへ転向し、フリーランスのデザイナーとして約6年活動した後、Shhh inc.を共同設立し、今に至ります。
成果が明確に問われるBtoBビジネスから、子どもからシニアまで幅広く愛される商材を扱うBtoCビジネス、日本最大の発行部数である著名誌の新規メディア立ち上げや、福祉をテーマとするアクセシビリティとデザイン性を両立させるデザイン、日本の美意識に着目した繊細で美しさを求めるデザインなど、幅広い領域のデザインへ携わってきました。
どのようなデザイン対象であっても、デザイナーに求められる事とは、そのブランド「らしさ」と「ありたい姿」を知り、明確にし、それを視覚的に精度高く転換することと考えて取り組んでいます。
この講座では、私がこれまで行ってきた、そのデザインプロセスをより再現性あるかたちにして、ひとつひとつ解説していきます。講座を通じ、よりブランドらしさが際立つデザイン作りや、そのために必要な視点についての気づきと学びが皆さんにあることを願っています。


宇都宮勝晃
現) デザイナー
【受賞】
CSS DESIGN AWARD / Website of the day (2022) 受賞
CSS DESIGN AWARD / Website of the day (2021) 受賞
FWA / FWA Of The Day (2022) 受賞
FWA / FWA Of The Day (2021) 受賞
この講座のポイント
Webデザインの制作プロセスの習得と演習を通じて学べるカリキュラム
企業や商品・サービスのブランドが持つ特徴を、どのように理解し、言語化し、視覚化していけば良いかのプロセスを学べます。その学びに合わせた演習も行うことで、どのようにコンセプトを考えれば良いかの筋道が分かり、作るべきデザインの方向性がこれまでよりさらに具体的に描けるようになる講座です。

より高い精度でブランドの個性が体現できるビジュアルデザインのスキルの向上
リファレンスをどのような視点で収集し、整理すれば良いかや、ブランドの個性に合った文字やカラーの選び方を身に付けます。また、デザインの意図を理解してもらうために、何をどのようにクライアントへ伝えれば良いかについても解説していきます。

機能美のデザインへの豊富な事例を基にした理解
デザインの機能性を高めるためにデザイナーとしてできる事を、主な切り口ごとに学べます。また、機能美のデザインが持つ意義と、さらに「その先」を目指していくにあたって必要な視点を、豊富な事例と共に身に付けることができます。

講座内容
下記のような内容を
学べます。
-
デザインリサーチとインタビュー設計インプットの重要性を知り、ブランドの特徴や目標とする姿を知るために、何を聞き、何を知るべきかの視点を学びます。
-
インプットの統合法とコンセプトメイキングインプットした情報をどのように咀嚼し、ブランドの「らしさ」と「ありたい姿」を発見し、言語化すればよいかの流れを学びます。言語化されたブランドの特徴を基に、どのようにコンセプトを考えていくかの筋道を段階的にお教えします。
-
ブランドコンセプトの視覚化とデザインの方向性の共有法ブランドのコンセプトから、どのようなデザインの方向性を目指していくべきかという的を絞り、具体的に描くための過程を、4象限のマッピングを通じて学びます。それにより、デザイン着手前のクライアントとの事前共有についてもよりスムーズに、目線を合わせられるスキルを身に付けます。
-
ブランドイメージを体現するビジュアルデザインそのブランドのイメージに合った、文字やカラーの選び方を演習を通じて習得。また、デザインの意図を理解してもらうために、何をどのようにクライアントへ伝えれば良いかをお教えします。
-
機能性を高めるデザインデザインが目的に対してより機能するために、情報設計の「型」の活用や、アクセシビリティを高める意義とポイント、心理的な障壁を和らげる「ワーディング」のテコ入れ法を学びます。
-
機能性と美しさを兼ね備えたデザインを目指す視点の習得機能と美との不可分性を歴史背景と思想から知り、またブランディングへの貢献という目的設定からも再確認の上、機能美を意識したデザインを目指す視点を学びます。その上で、機能美を超えた「その先」を目指していくための、主要な視点を豊富な事例を通して解説します。
(자동 구성) 가격이 인상됩니다.
カリキュラム
カリキュラム内容の
ご紹介
SECTION 01. Prologue
01. イントロダクション
- 自己紹介
- 実績紹介
- バックグラウンド
- 背景から伝えられること
- デザインで大事にしていること
02. オリエンテーション
- 講座から期待できる学び
- 講座の概要
- よくある質問
SECTION 02. Design Process
03. ブランドの「らしさ」と「ありたい姿」を体現するデザインプロセス
- 前提(ブランディングの射程の再確認)
- デザインプロセスと対象範囲
- ディスカバリーフェーズ
- 情報設計フェーズ
- ビジュアルデザインフェーズ
SECTION 03. Case Studies
04. 事例から学ぶデザインプロセス①NUTION
- NUTIONのプロジェクト概要事例
- ディスカバリーフェーズの解説
- 情報設計フェーズの解説
- ビジュアルデザインフェーズの解説
05. 事例から学ぶデザインプロセス②ぺんてる
- ぺんてるのプロジェクト概要事例
- ディスカバリーフェーズの解説
- 情報設計フェーズの解説
- ビジュアルデザインフェーズの解説
06. 事例から学ぶデザインプロセス③Shhh inc.
- Shhh inc.のプロジェクト概要事例
- ディスカバリーフェーズの解説
- 情報設計フェーズの解説
- ビジュアルデザインフェーズの解説
SECTION 04. Design for Beauty and Functionality
07. 機能美のデザインとは
- 前提(最小限の歴史理解)
- 機能するデザインのための3つのアプローチ
- 機能し美しいWebサイトとは
- 機能美を超えた「先」への視点
SECTION 05. Web Design Practice (Corporate Site)
08. Webデザイン実習 Case1:架空デザイン企業のリブランディングプロジェクト①ディスカバリー
- オリエンテーション
- インタビュー設計とデプスインタビュー
- らしさの構造化と言語化
- コンセプトメイキング
09. Webデザイン実習 Case1:架空デザイン企業のリブランディングプロジェクト②サイト設計
- らしさの視覚化
- サイトマップの検討
- ワイヤーフレームの検討
10. Webデザイン実習 Case1:架空デザイン企業のリブランディングプロジェクト③トップページデザイン1
- 表現の具体方向性の絞り込み
- タイプフェイスの検討
- 1st viewのデザイン検討
11. Webデザイン実習 Case1:架空デザイン企業のリブランディングプロジェクト④トップページデザイン2
- 全体コンテンツのレイアウト
- 写真の反映配置
- ディテールの作り込みと全体ブラッシュアップ
12. Webデザイン実習 Case1:架空デザイン企業のリブランディングプロジェクト⑤下層ページデザイン
- アバウトページのデザイン
- SPへのデザイン展開
13. Webデザイン実習 Case1:架空デザイン企業のリブランディングプロジェクト⑥プレゼンテーション
- 全体の考え方
- レイアウト
- カラー
- タイポグラフィ
- インタラクション
- 意思決定のおけるチェックポイント
SECTION 06. Web Design Practice (Media Site)
14. Webデザイン実習 Case2:架空メディアサイトの新規立ち上げプロジェクト①ディスカバリー
- オリエンテーション
- インタビュー設計とデプスインタビュー
- らしさの構造化と言語化
- コンセプトメイキング
15. Webデザイン実習 Case2:架空メディアサイトの新規立ち上げプロジェクト②サイト設計
- らしさの視覚化
- サイトマップの検討
- ワイヤーフレームの検討
16. Webデザイン実習 Case2:架空メディアサイトの新規立ち上げプロジェクト③トップページデザイン1
- 表現の具体方向性の絞り込み
- タイプフェイスの検討
- 1st viewのデザイン検討
17. Webデザイン実習 Case2:架空メディアサイトの新規立ち上げプロジェクト④トップページデザイン2
- 全体コンテンツのレイアウト
- 写真の反映配置
- ディテールの作り込みと全体ブラッシュアップ
18. Webデザイン実習 Case2:架空メディアサイトの新規立ち上げプロジェクト⑤下層ページデザイン(詳細)
- CMSに考慮した記事詳細ページのデザイン
- 記事のパターン検証によるブラッシュアップ
19. Webデザイン実習 Case2:架空メディアサイトの新規立ち上げプロジェクト⑥プレゼンテーション
- 全体の考え方
- レイアウト
- カラー
- タイポグラフィ
- インタラクション
- 意思決定のおけるチェックポイント
SECTION 07. Epilogue
20. メッセージ&推薦図書・映像
- デザイナーの本質的な役割とは
- 本質的な2つの能力と育むためのリファレンス
- さいごに
*講座動画の公開時期や、カリキュラムのイメージ・内容などは予告なく変更になる場合がございます。予めご了承ください。
インタビュー
デザイナー
宇都宮勝晃が
お話ししたいこと

該当の分野を勉強している方が一番難しく感じている点と、この講座を通してその点をどの様に解決できるでしょうか?
デザインの基礎知識からツールの使い方、ワークフローといった、ベーシックな内容については、学習できるリソースが多くあります。しかし、それら「点」の知識は「線」として結ばれていかないと、実務上で実践することは難しく、局所的な対応で留まってしまう事もあります。本講座は、一つずつの工程に対し「なぜそれを行うのか?」、「それによってどう次の工程で活かされるのか?」を一連の流れとして学習し、演習を通じてより実践的に体験できるカリキュラムとなっています。それによりこれまで点であった知識が、線で結ばれ、より深く理解できるようになると考えています。
講師さまご自身は、勉強してきた中で難しかった部分、それを解決するためにどのような努力をされてきましたか?
デザイン会社に所属して先輩から学ぶといった経験がなく、全て独学から経験を積んできたため成長スピードに課題があり、また自身のデザインスキルが現在どの位置にいるのかの相対的な把握が難しかったことがありました。成長スピードは、尊敬する先人や自分自身の中で想定するライバルの方たちの実績に触れ続けることで、そのギャップについて把握できるようにし、自身のポジションについてはブックマークサイトに掲載される事や、海外のアワードにエントリーする事といった、客観視しやすい外部要因の機会を増やすことで、より自身の現在地と課題について把握できるようしていきました。
講師さまがお考えになる、Webデザイン分野の市場性、展望についてお話しください。
Webデザインに限ることではありませんが、AIの急速な進化によって「ある一定レベル」のクオリティを持ったアウトプットを作る事は、容易に誰でもできるようになりますし、その流れはより加速していくと思われます。ノーコードツールの進化は、より容易で代替可能な制作手段を促しますし、参入障壁が少なく、新規参入しやすい業界な事からプレイヤーも多く、既にレッドオーシャンの状態です。このような背景を考えると、Webデザインの市場は特に「デザインとは、Figmaなどのツールを使って画面の見た目を作る事」と認識してしまうと、今後より厳しい状況になってくるのではと考えています。
しかしながら、デザインを「そのブランドのビジョンや想いを明確にし、視覚化し、違いをより強固にしていくための手段」として捉えるデザイナーにとっては、変わらず必要となる存在であり続けていくはずと捉えています。さらにデザインを「現状をより好ましい方向に変えるための"活動"」と捉えるなら、企業だけでなく、より社会にとって必要となる存在であり続ける可能性すら持っていると考えています。本講座がそのような気づきと学びのきっかけになる事を願っています。
使用プログラムについて
ご案内します。
当講座は、以下のツールを使用します。
[メインツール]
– Figma

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