Search Input

ブランドの「らしさ」を体現するWebデザインプロセス

デザイナー 宇都宮勝晃‌
‌
‌
‌
‌

講座詳細

‌
‌
‌

デザイナー,宇都宮勝晃_우츠노미야 Details

講座紹介
ブランドの「らしさ」を視覚化！
Webデザイン制作のプロセスの習得
アクセシビリティとデザイン性を両立させるデザインや、繊細で美しさを求めるデザインなど、幅広いジャンルのWebデザインを担当するデザイナーの宇都宮勝晃。

今回の講座では、Figmaを使用した２種類のWebデザイン制作を通して、宇都宮勝晃ならではのブランドの「らしさ」と「ありたい姿」を実現するWebデザイン制作の秘訣をお教えします。
Coloso デザイナー ブランドの「らしさ」を体現するWebデザインプロセス
まず、３つのケーススタディーを通して事例の概要やディスカバリーフェーズ、情報設計フェーズなどを解説。

次に、デザイン企業のリブランディングプロジェクトを想定し、インタビュー設計や「らしさ」の構造化と言語化などの方向性を決定。ワイヤーフレームの検討を通して、企業サイトのデザイン方法を学びます。

トップページでは、タイプフェイスの検討からディテールの作り込みまでを、下層ページでは、トップページのデザインルールをどう展開しデザインしていくかについてお教えします。

最後に、メディアサイトのデザインを制作。企業サイト制作とは異なるコンテンツ・マネジメント・システムを考慮した、下層ページ制作のコツを身に付けます。

宇都宮勝晃ならではの、機能性とデザイン性を兼ね備えたWebデザイン制作のプロセスを、Colosoで体験してください！
Coloso 講座特徴1
講座情報

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

Coloso 講座特徴2
使用プログラム

Figma

Coloso 講座特徴3
動画情報

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

Coloso 講座特徴4
講座特典

作品数：２点
講座内容のPDF
作品２点のJPEGファイル

宇都宮勝晃のポートフォリオ

  • Coloso デザイナー ブランドの「らしさ」を体現するWebデザインプロセス
  • Coloso デザイナー ブランドの「らしさ」を体現するWebデザインプロセス
  • Coloso デザイナー ブランドの「らしさ」を体現するWebデザインプロセス
  • Coloso デザイナー ブランドの「らしさ」を体現するWebデザインプロセス
  • Coloso デザイナー ブランドの「らしさ」を体現するWebデザインプロセス
  • Coloso デザイナー ブランドの「らしさ」を体現するWebデザインプロセス
  • Coloso デザイナー ブランドの「らしさ」を体現するWebデザインプロセス
  • Coloso デザイナー ブランドの「らしさ」を体現するWebデザインプロセス
  • Coloso デザイナー ブランドの「らしさ」を体現するWebデザインプロセス

講座の例題
例題に沿って学ぶWebデザイン制作スキル

  • Coloso 視覚デザイン 講座内容
    「らしさ」と「ありたい姿」を実現するデザインプロセス
  • Coloso 視覚デザイン 講座内容
    機能性と美しさを兼ね備えたWebデザインを作るための切り口
  • Coloso 視覚デザイン 講座内容
    インタビュー設計とインプットの統合からコンセプトメイキングのプロセス
  • Coloso 視覚デザイン 講座内容
    架空デザイン企業サイト
    TOPページ
  • Coloso 視覚デザイン 講座内容
    架空デザイン企業サイト
    TOPページ 中央部
  • Coloso 視覚デザイン 講座内容
    架空デザイン企業サイト
    ABOUTページ 中央部
  • Coloso 視覚デザイン 講座内容
    架空デザイン企業サイト モバイル版
    ABOUTページ 中央部
  • Coloso 視覚デザイン 講座内容
    架空メディアサイト
    TOPページ
  • Coloso 視覚デザイン 講座内容
    架空メディアサイト
    詳細記事テンプレートページ
講師紹介

宇都宮勝晃
デザイナー


こんにちは。デザイナーの宇都宮勝晃です。仏師に師事後、約10年程Webのディレクションを経験し、37歳からフリーランスのディレクターへ転身しました。翌年の38歳からデザイナーへ転向し、フリーランスのデザイナーとして約６年活動した後、Shhh inc.を共同設立し、今に至ります。

成果が明確に問われるBtoBビジネスから、子どもからシニアまで幅広く愛される商材を扱うBtoCビジネス、日本最大の発行部数である著名誌の新規メディア立ち上げや、福祉をテーマとするアクセシビリティとデザイン性を両立させるデザイン、日本の美意識に着目した繊細で美しさを求めるデザインなど、幅広い領域のデザインへ携わってきました。

どのようなデザイン対象であっても、デザイナーに求められる事とは、そのブランド「らしさ」と「ありたい姿」を知り、明確にし、それを視覚的に精度高く転換することと考えて取り組んでいます。

この講座では、私がこれまで行ってきた、そのデザインプロセスをより再現性あるかたちにして、ひとつひとつ解説していきます。講座を通じ、よりブランドらしさが際立つデザイン作りや、そのために必要な視点についての気づきと学びが皆さんにあることを願っています。

背景イメージ
Coloso デザイナー
宇都宮勝晃

現) デザイナー


【受賞】
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) 受賞

Twitter
講座のポイント

この講座のポイント

Webデザインの制作プロセスの習得と演習を通じて学べるカリキュラム

企業や商品・サービスのブランドが持つ特徴を、どのように理解し、言語化し、視覚化していけば良いかのプロセスを学べます。その学びに合わせた演習も行うことで、どのようにコンセプトを考えれば良いかの筋道が分かり、作るべきデザインの方向性がこれまでよりさらに具体的に描けるようになる講座です。

Coloso デザイナー 講座のポイント

より高い精度でブランドの個性が体現できるビジュアルデザインのスキルの向上

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

Coloso デザイナー 講座のポイント

機能美のデザインへの豊富な事例を基にした理解

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

Coloso デザイナー 講座のポイント

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

  • Coloso 視覚デザイン 講座内容
    デザインリサーチとインタビュー設計
    インプットの重要性を知り、ブランドの特徴や目標とする姿を知るために、何を聞き、何を知るべきかの視点を学びます。
  • Coloso 視覚デザイン 講座内容
    インプットの統合法とコンセプトメイキング
    インプットした情報をどのように咀嚼し、ブランドの「らしさ」と「ありたい姿」を発見し、言語化すればよいかの流れを学びます。言語化されたブランドの特徴を基に、どのようにコンセプトを考えていくかの筋道を段階的にお教えします。
  • Coloso 視覚デザイン 講座内容
    ブランドコンセプトの視覚化とデザインの方向性の共有法
    ブランドのコンセプトから、どのようなデザインの方向性を目指していくべきかという的を絞り、具体的に描くための過程を、４象限のマッピングを通じて学びます。それにより、デザイン着手前のクライアントとの事前共有についてもよりスムーズに、目線を合わせられるスキルを身に付けます。
  • Coloso 視覚デザイン 講座内容
    ブランドイメージを体現するビジュアルデザイン
    そのブランドのイメージに合った、文字やカラーの選び方を演習を通じて習得。また、デザインの意図を理解してもらうために、何をどのようにクライアントへ伝えれば良いかをお教えします。
  • Coloso 視覚デザイン 講座内容
    機能性を高めるデザイン
    デザインが目的に対してより機能するために、情報設計の「型」の活用や、アクセシビリティを高める意義とポイント、心理的な障壁を和らげる「ワーディング」のテコ入れ法を学びます。
  • Coloso 視覚デザイン 講座内容
    機能性と美しさを兼ね備えたデザインを目指す視点の習得
    機能と美との不可分性を歴史背景と思想から知り、またブランディングへの貢献という目的設定からも再確認の上、機能美を意識したデザインを目指す視点を学びます。その上で、機能美を超えた「その先」を目指していくための、主要な視点を豊富な事例を通して解説します。


(자동 구성) 가격이 인상됩니다.

지금이 최저가!
カリキュラム

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

SECTION 01. Prologue

01. イントロダクション

  1. 自己紹介
  2. 実績紹介
  3. バックグラウンド
  4. 背景から伝えられること
  5. デザインで大事にしていること

02. オリエンテーション

  1. 講座から期待できる学び
  2. 講座の概要
  3. よくある質問
SECTION 02. Design Process

03. ブランドの「らしさ」と「ありたい姿」を体現するデザインプロセス

  1. 前提（ブランディングの射程の再確認）
  2. デザインプロセスと対象範囲
  3. ディスカバリーフェーズ
  4. 情報設計フェーズ
  5. ビジュアルデザインフェーズ
SECTION 03. Case Studies

04. 事例から学ぶデザインプロセス①NUTION

  1. NUTIONのプロジェクト概要事例
  2. ディスカバリーフェーズの解説
  3. 情報設計フェーズの解説
  4. ビジュアルデザインフェーズの解説

05. 事例から学ぶデザインプロセス②ぺんてる

  1. ぺんてるのプロジェクト概要事例
  2. ディスカバリーフェーズの解説
  3. 情報設計フェーズの解説
  4. ビジュアルデザインフェーズの解説

06. 事例から学ぶデザインプロセス③Shhh inc.

  1. Shhh inc.のプロジェクト概要事例
  2. ディスカバリーフェーズの解説
  3. 情報設計フェーズの解説
  4. ビジュアルデザインフェーズの解説
SECTION 04. Design for Beauty and Functionality

07. 機能美のデザインとは

  1. 前提（最小限の歴史理解）
  2. 機能するデザインのための3つのアプローチ
  3. 機能し美しいWebサイトとは
  4. 機能美を超えた「先」への視点
SECTION 05. Web Design Practice (Corporate Site)

08. Webデザイン実習 Case1：架空デザイン企業のリブランディングプロジェクト①ディスカバリー

  1. オリエンテーション
  2. インタビュー設計とデプスインタビュー
  3. らしさの構造化と言語化
  4. コンセプトメイキング

09. Webデザイン実習 Case1：架空デザイン企業のリブランディングプロジェクト②サイト設計

  1. らしさの視覚化
  2. サイトマップの検討
  3. ワイヤーフレームの検討

10. Webデザイン実習 Case1：架空デザイン企業のリブランディングプロジェクト③トップページデザイン1

  1. 表現の具体方向性の絞り込み
  2. タイプフェイスの検討
  3. 1st viewのデザイン検討

11. Webデザイン実習 Case1：架空デザイン企業のリブランディングプロジェクト④トップページデザイン2

  1. 全体コンテンツのレイアウト
  2. 写真の反映配置
  3. ディテールの作り込みと全体ブラッシュアップ

12. Webデザイン実習 Case1：架空デザイン企業のリブランディングプロジェクト⑤下層ページデザイン

  1. アバウトページのデザイン
  2. SPへのデザイン展開

13. Webデザイン実習 Case1：架空デザイン企業のリブランディングプロジェクト⑥プレゼンテーション

  1. 全体の考え方
  2. レイアウト
  3. カラー
  4. タイポグラフィ
  5. インタラクション
  6. 意思決定のおけるチェックポイント
SECTION 06. Web Design Practice (Media Site)

14. Webデザイン実習 Case2：架空メディアサイトの新規立ち上げプロジェクト①ディスカバリー

  1. オリエンテーション
  2. インタビュー設計とデプスインタビュー
  3. らしさの構造化と言語化
  4. コンセプトメイキング

15. Webデザイン実習 Case2：架空メディアサイトの新規立ち上げプロジェクト②サイト設計

  1. らしさの視覚化
  2. サイトマップの検討
  3. ワイヤーフレームの検討

16. Webデザイン実習 Case2：架空メディアサイトの新規立ち上げプロジェクト③トップページデザイン1

  1. 表現の具体方向性の絞り込み
  2. タイプフェイスの検討
  3. 1st viewのデザイン検討

17. Webデザイン実習 Case2：架空メディアサイトの新規立ち上げプロジェクト④トップページデザイン2

  1. 全体コンテンツのレイアウト
  2. 写真の反映配置
  3. ディテールの作り込みと全体ブラッシュアップ

18. Webデザイン実習 Case2：架空メディアサイトの新規立ち上げプロジェクト⑤下層ページデザイン（詳細）

  1. CMSに考慮した記事詳細ページのデザイン
  2. 記事のパターン検証によるブラッシュアップ

19. Webデザイン実習 Case2：架空メディアサイトの新規立ち上げプロジェクト⑥プレゼンテーション

  1. 全体の考え方
  2. レイアウト
  3. カラー
  4. タイポグラフィ
  5. インタラクション
  6. 意思決定のおけるチェックポイント
SECTION 07. Epilogue

20. メッセージ＆推薦図書・映像

  1. デザイナーの本質的な役割とは
  2. 本質的な２つの能力と育むためのリファレンス
  3. さいごに

*講座動画の公開時期や、カリキュラムのイメージ・内容などは予告なく変更になる場合がございます。予めご了承ください。

インタビュー
デザイナー
宇都宮勝晃が
お話ししたいこと

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


デザインの基礎知識からツールの使い方、ワークフローといった、ベーシックな内容については、学習できるリソースが多くあります。しかし、それら「点」の知識は「線」として結ばれていかないと、実務上で実践することは難しく、局所的な対応で留まってしまう事もあります。本講座は、一つずつの工程に対し「なぜそれを行うのか？」、「それによってどう次の工程で活かされるのか？」を一連の流れとして学習し、演習を通じてより実践的に体験できるカリキュラムとなっています。それによりこれまで点であった知識が、線で結ばれ、より深く理解できるようになると考えています。
Question.02
講師さまご自身は、勉強してきた中で難しかった部分、それを解決するためにどのような努力をされてきましたか？


デザイン会社に所属して先輩から学ぶといった経験がなく、全て独学から経験を積んできたため成長スピードに課題があり、また自身のデザインスキルが現在どの位置にいるのかの相対的な把握が難しかったことがありました。成長スピードは、尊敬する先人や自分自身の中で想定するライバルの方たちの実績に触れ続けることで、そのギャップについて把握できるようにし、自身のポジションについてはブックマークサイトに掲載される事や、海外のアワードにエントリーする事といった、客観視しやすい外部要因の機会を増やすことで、より自身の現在地と課題について把握できるようしていきました。
Question.03
講師さまがお考えになる、Webデザイン分野の市場性、展望についてお話しください。


Webデザインに限ることではありませんが、AIの急速な進化によって「ある一定レベル」のクオリティを持ったアウトプットを作る事は、容易に誰でもできるようになりますし、その流れはより加速していくと思われます。ノーコードツールの進化は、より容易で代替可能な制作手段を促しますし、参入障壁が少なく、新規参入しやすい業界な事からプレイヤーも多く、既にレッドオーシャンの状態です。このような背景を考えると、Webデザインの市場は特に「デザインとは、Figmaなどのツールを使って画面の見た目を作る事」と認識してしまうと、今後より厳しい状況になってくるのではと考えています。

しかしながら、デザインを「そのブランドのビジョンや想いを明確にし、視覚化し、違いをより強固にしていくための手段」として捉えるデザイナーにとっては、変わらず必要となる存在であり続けていくはずと捉えています。さらにデザインを「現状をより好ましい方向に変えるための"活動"」と捉えるなら、企業だけでなく、より社会にとって必要となる存在であり続ける可能性すら持っていると考えています。本講座がそのような気づきと学びのきっかけになる事を願っています。

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

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

[メインツール]
– Figma

Figma
おすすめの講座

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

ご注意事項

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