UIデザイナー,原田秀司_하라다 Details
トレーラー
UIデザイナー,原田秀司
今回の講座では、小規模サイトと大規模サイト、そしてアプリケーションデザインを通して、UIデザインに必要な基礎理論から実践スキルまでを身に付けます。
そして、身に付けた基礎を実践に移していきます。Figmaを用いた小規模サイト制作から、大規模サイトのナビゲーションデザイン、スマートフォンアプリのデザインまで、それぞれの特徴に合わせた制作ノウハウを伝授します。
「使いやすさ」と「分かりやすさ」を兼ね備えたUIデザインの秘訣を、Colosoで体験してください!
お試し動画
講座の様子を少しだけ公開します!
- サービス紹介の役割
- レイアウトの工夫
受講生全員に提供
原田秀司の講座だけの特典
-
原田秀司の多様なUIデザイン制作ノウハウを含む、講座動画21講を期間制限なしで受講可能 -
講座を通して、小規模サイト2点と大規模サイト1点を完成 -
講座内容のPDFやUIデザインファイルなどの資料を提供
講義資料の詳細
-
講座内で使用するデータ- 講座内容のPDF -
Figmaファイル- FigmaのUIデザインファイル
原田秀司のポートフォリオ
講座の例題
例題を通して学ぶUIデザイン制作ノウハウ
-
小規模サイト設計_PC※制作過程のイメージです。 -
小規模サイト設計_SP※制作過程のイメージです。 -
小規模サイトの拡張※制作過程のイメージです。
-
大規模サイトの全体設計※制作過程のイメージです。 -
大規模サイト設計_PC※制作過程のイメージです。
-
大規模サイト設計_SP※制作過程のイメージです。 -
同スマホアプリの設計※制作過程のイメージです。
UIデザイナー
原田秀司
こんにちは。UIデザイナーの原田秀司です。システムインテグレータとWeb制作会社で合わせて10年ほど働いたのち、現在は独立してUIデザイナーとして働いています。
働き始めた当初は、PC向けのWebサイトの制作と開発が中心でしたが、時を経るに従って、モバイルのWebサイトや、モバイルアプリ、スマートTVといった、様々なデバイスでのUIを検討する機会にも恵まれてきました。
今回の講座では、「どうやったら使いやすいUIをデザインできるのか」といった点に焦点を当てています。また、これまで関わってきた仕事が、比較的大規模なものが多かったので、その観点での実演を交えつつ、人間の認知特性に基づいたUIデザインや、使いやすさの普遍的な考え方をお教えします。

原田秀司
UIデザイナー
【経歴】
2022年 『UIデザイン必携』 出版
2019年 『UIデザインの教科書[新版]』 出版
2013年 『UIデザインの教科書』 出版
2008年 独立 ディレクター/UIデザイナー
2007年 『Webディレクション成功の法則48』 出版
2002年 IMJ ディレクター
この講座のポイント
人間の認知特性に基づいたUIデザイン
綺麗に整列させることで認知負荷を下げることができ、また色や形に制約を設けることで、分かりやすさを助長することができます。そのような人間に本来備わっている認知特性を有効的に活用しながら、使いやすく分かりやすいUIデザインを完成させる方法をお教えします。
構造とナビゲーションを意識したサイト設計
それぞれのページが美しくデザインされていても、「分かりやすさ」が欠けていては意味がありません。そのため本講座では、分かりやすいサービスの実現を目指し、構造を意識したナビゲーションデザインの手法について学んでいきます。
「使いやすさ」の普遍的な考え方
スマートフォンとPC、Webサイトとアプリなど、環境に関係なく誰もが「使いやすい」と感じるインターフェースには、共通点があります。環境やデバイスを問わない普遍的な考え方をもとに、現在だけでなく将来においても役立つスキルを身に付けます。
講座内容
下記のような内容を学べます。
-
UIデザインの基本原則UIデザインの基本原則を理解することで、どのような環境やデバイスであっても活用することのできる、基礎的なスキルを身に付けます。 -
UIとUXの考え方UIとUXの違いについて学び、UIにできることとUXにできることをそれぞれ理解することで、状況による適切な対応力を磨きます。 -
分かりやすいUIデザイン「人間がものごとを把握しているとは、どういう状態なのか」といった、分かりやすさと分かりにくさの本質的な部分について解説します。
-
大規模サービスの構造とナビゲーション大規模サイト制作における構造の設計方法から、ナビゲーションシステムをデザインする際のコツまで、詳しく説明していきます。 -
PCとスマートフォンの並行設計サービスの設計を、PCとスマートフォンで同時に行っていきます。またその中で個別最適という観点から、ナビゲーションにおけるスマートフォン特有のポイントも解説します。 -
iOSアプリとAndroidアプリの差異と最適化現在のスマートフォンアプリは、実質的にiOSとAndroidの2種類だけで占有されています。両者の同じところと異なるところを理解したうえで、個別最適を施す場合にはどうすればよいかについて学びます。
- 無期限視聴
- 最安値
一回の購入で、期限の制限なく視聴することができます。
05/11 (月) 販売価格が上がります。
もうすぐ販売価格が上がる予定です。
今すぐご購入ください!
カリキュラム
カリキュラム内容のご紹介
SECTION 01. イントロダクション
01. 自己紹介
- 自己紹介
- 専門領域
- 考え方
- 主な実績など
02. 講座の内容
- カリキュラムの紹介
- UIデザインの理論
- UIデザインの制作1、2
- 取り扱う内容
- 想定ターゲット
- 習得できるスキル・考え方
SECTION 02. UIデザインの理論
03. Webサイト/アプリの開発プロセス
- 制作・開発の流れ
- 主な担当内容
- 管理
04. UIとUX
- UIとUXの関係
- UIとUXの定義・範囲
- UIとUXの例
05. デザインの基本原則
- 色の認知特性・組み合わせ・文化的側面
- 整列と偏重
- 情報の区分け
- 動きの認知特性・役割
06. 構造とナビゲーション
- サービスの使いやすさ
- 構造の価値
- トップ・一覧・詳細
- ナビゲーションのポイント1、2
- 差別化表現のバリエーション
- 「戻る」と「ホーム」
07. パーツと役割
- ボタンの強弱・組み合わせ
- 割り込み
- スクロールとページング
- ヘッダとフッタ
- ハンバーガーメニュー
08. わかりやすいUI
- デザインの役割・必要性
- 「分からない」とは
- インタラクションコスト
- シンプルさ・一貫性・共通概念
- 「直感的」とは
SECTION 03. UIデザインの制作1
09. 小規模サイトの設計:初期導入&PC版
- Figmaを使った小規模サイトの制作
- 初期設定とPC版のデザイン、プロトタイプでの確認
- トップページにすべてを集約
10. 小規模サイトの設計:スマートフォン版
- Figmaを使った小規模サイトの制作
- スマートフォン版のデザイン、プロトタイプでの確認
- トップページにすべてを集約
11. 小規模サイトの拡張
- Figmaを使った小規模サイトの拡張
- 各ページを分離して個別設置
SECTION 04. UIデザイン制作2
12. 全体と構造の設計
- 大規模サイトの全体と構造の設計
13. ナビゲーションのデザイン:PC版
- ナビゲーションの制作
- 現在地と差別化表現
- 一覧型、階層型、ドロップダウン型のバリエーション作成
14. ナビゲーションのデザイン:スマートフォン版
- ナビゲーションの制作
- ハンバーガーメニューと多段階層化
15. 商品一覧のデザイン
- 一覧ページの制作
- 絞り込み・並べ替え・切り替え
- 「もっと見る」と「ページ送り」の使い分け
- スマートフォン時の絞り込みの工夫
16. 商品詳細のデザイン
- 商品詳細ページの制作
- 固定エリアの工夫
- 関連情報への誘導
17. トップのデザイン
- トップページの制作
- サービス紹介の役割
- レイアウトの工夫
18. 新規登録とフォームのデザイン
- 汎用フォームの制作
- 新規登録の制作
19. カートと検索のデザイン
- ショッピングカートと購入完了までの制作
- 検索と検索結果の制作
20. スマートフォンアプリのデザイン
- スマートフォンアプリの設計
- Webサイトを流用したデザイン
- 下段タブを使用したデザイン
SECTION 05. まとめ
21. まとめ
- オススメの情報源や書籍
- 成長するための3つの観点
インタビュー
UIデザイナー
原田秀司がお話ししたいこと
使用プログラムについてご案内します。
当講座は、以下のツールを使用します。
[メインツール]
- Figma
