8/24(Sat)

今日の生放送

これからのモバイルサイト UIデザイン基礎

これからのモバイルサイト UIデザイン基礎 -1回目-

第1回:2016年7月8日公開

60min

これからのモバイルサイト UIデザイン基礎 -1回目-

おためし受講する(5分)

コース概要

Web制作現場では、市場のニーズや制作ワークフローの変化から、Webデザイナーの役割が少しずつ変わってきています。

従来では、ディレクターの作ったワイヤーフレームを元にPhotoshopでサイトデザインをするのがデザイナーの役割でした。
しかし、現在ではサービスやプロダクト全体のユーザー体験(UX)の価値を上げるためにより良いユーザーインターフェース(UI)を設計するには、デザイン作業の前後の工程にも参加し、情報を深く理解するスキルが求められています。

全3回の授業で、モバイルサイトデザインにスポットを当てて、UIデザインの基礎授業を講義と実技を交えながら進めていきます。対象者は、Webデザインを勉強している初心者の方、またはモバイルUIデザインを基礎から学びたい方です。

こんな人にオススメ

Webデザインを勉強している初心者の方、スマホUIデザインを基礎から学びたい方

担当の先生

パーソナリティ

  • 江川 みどり

    江川 みどり

    スクー放送部

参加したい受講生 : 1779

カテゴリー

タグ

おかえり、デザインの学び場へ「The Designers Lounge」
月額980円で、4,600本以上の授業が見放題

授業リスト

これからのモバイルサイト UIデザイン基礎 -1回目-

2016年7月8日公開

60min.

Web制作現場では、市場のニーズや制作ワークフローの変化から、Webデザイナーの役割が少しずつ変わってきています。従来では、ディレクターの作ったワイヤーフレームを元にPhotoshopでサイトデザインをするのがデザイナーの役割でした。しかし、現在ではサービスやプロダクト全体のユーザー体験(UX)の価値を上げるためにより良いユーザーインターフェース(UI)を設計するには、デザイン作業の前後の工程にも参加し、情報を深く理解するスキルが求められています。

全3回の授業で、モバイルサイトデザインにスポットを当てて、UIデザインの基礎授業を講義と実技を交えながら進めていきます。対象者は、Webデザインを勉強している初心者の方、またはモバイルUIデザインを基礎から学びたい方です。

1限目
モバイルサイト制作のワークフローと情報設計を学ぶ

※PhotoshopやIllustratorなどのデザインツールの具体的な使い方はこの授業で行いませんので、別の授業と併せてご覧ください。

自分で印刷して使えるプロトタイプPDF

 

 

  • 自己紹介
  • 01:29
  • 授業ターゲットの紹介
  • 00:49
  • 授業の目標
  • 00:35
  • 今回の授業内容
  • 01:18
  • 先生からの質問:UIデザインとは何か説明出来ますか?
  • 02:40
  • UIとは?
  • 01:12
  • UXとは?
  • 02:04
  • PCとモバイルUIの違い
  • 05:55
  • Webサイト制作ワークフローについて学ぼう
  • 05:46
  • 本日の授業で触れるワークフロー
  • 03:40
  • 情報設計について学ぼう
  • 00:15
  • コンセプトとは
  • 01:27
  • ペルソナとは
  • 05:32
  • 5W1Hで考えて見よう
  • 00:58
  • サイトマップについて学ぼう
  • 03:42
  • ペーパープロトタイプについて学ぼう
  • 07:27
  • デザインコンセプト
  • 05:41
  • デザインのインプット方法に付いて例を見てみよう
  • 03:40
  • まとめ
  • 02:45
  • 次回授業の予告
  • 00:27
  • Q,最近、『UIデザイン(デザイナー)』と『webデザイン(デザイナー)』が混在してきてる気がしますが、使い分けられている理由はあるのでしょうか?同意語に感じるのですが、、
  • 01:45
  • Q,プロトタイプを社内だけでなくクライアントさんにも見せて共有するといいとのお話がありましたが、紙では直感的にリンクなどの動きを伝えづらいと思うのですが、いい方法はありますか?
  • 01:30
  • Q,プロトタイプは紙媒体で作成するんですね。プロトタイプを作るようなソフトがありますが、先生は使用されてますか?使用されているようでしたら、どんなソフトを使用してますか?
  • 01:23
  • お知らせ

スライド資料

これからのモバイルサイト UIデザイン基礎 -2回目-

2016年7月21日公開

60min.

Web制作現場では、市場のニーズや制作ワークフローの変化から、Webデザイナーの役割が少しずつ変わってきています。従来では、ディレクターの作ったワイヤーフレームを元にPhotoshopでサイトデザインをするのがデザイナーの役割でした。しかし、現在ではサービスやプロダクト全体のユーザー体験(UX)の価値を上げるためにより良いユーザーインターフェース(UI)を設計するには、デザイン作業の前後の工程にも参加し、情報を深く理解するスキルが求められています。

全3回の授業で、モバイルサイトデザインにスポットを当てて、UIデザインの基礎授業を講義と実技を交えながら進めていきます。対象者は、Webデザインを勉強している初心者の方、またはモバイルUIデザインを基礎から学びたい方です。

2限目
コンセプトやターゲットを元に模型となるプロトタイプを作成する

※PhotoshopやIllustratorなどのデザインツールの具体的な使い方はこの授業で行いませんので、別の授業と併せてご覧ください。

  • 自己紹介
  • 01:04
  • 授業ターゲットの紹介
  • 00:23
  • 授業の目標
  • 00:27
  • 今回の授業内容
  • 00:40
  • 質問:どちらがスマホ?
  • 02:14
  • スマホとPCのアクセス比率
  • 00:55
  • 日本と世界のモバイルOS比率
  • 02:54
  • スマホの画面サイズとタップ領域
  • 00:23
  • 画面サイズ
  • 01:34
  • タップ領域
  • 01:49
  • モバイルに最適化されたWebサイトの例3つ
  • 00:21
  • 情報を隠す
  • 02:26
  • 情報の優先順位を変える
  • 03:05
  • デザインを最適化する
  • 06:48
  • プロトタイプとメリット
  • 00:31
  • プロトタイプとは
  • 00:29
  • プロトタイプの種類
  • 01:17
  • プロトタイプを作るメリット
  • 01:39
  • プロトタイプに必要なもの
  • 00:31
  • プロトタイピングツール
  • 05:45
  • プロトタイプを見てみる
  • 04:11
  • 画面遷移とアニメーション
  • 00:53
  • トランジション
  • 06:15
  • アニメーション
  • 02:32
  • イージング
  • 02:27
  • まとめ
  • 03:37
  • Q:心理学などのお話が出ましたが、先生は今追求したいと思っていることは何ですか?
  • 01:20
  • Q:特にスマホなど、デザインごとに表示されるフォントが違うと思うのですが、印象をぶらさずにデザインするコツはありますか?
  • 01:25
  • Q:wordpressで制作する際に、レスポンシブではなくスマホサイトを別にする際、テーマを分ける等できるのでしょうか?どのように制作されますか?
  • 00:55
  • Q:ブラウザチェックのために、アンドロイドとiOSは両方持つべきでしょうか?
  • 01:20
  • お知らせ

スライド資料

これからのモバイルサイト UIデザイン基礎 -3回目-

2016年7月29日公開

60min.

Web制作現場では、市場のニーズや制作ワークフローの変化から、Webデザイナーの役割が少しずつ変わってきています。従来では、ディレクターの作ったワイヤーフレームを元にPhotoshopでサイトデザインをするのがデザイナーの役割でした。しかし、現在ではサービスやプロダクト全体のユーザー体験(UX)の価値を上げるためにより良いユーザーインターフェース(UI)を設計するには、デザイン作業の前後の工程にも参加し、情報を深く理解するスキルが求められています。

全3回の授業で、モバイルサイトデザインにスポットを当てて、UIデザインの基礎授業を講義と実技を交えながら進めていきます。対象者は、Webデザインを勉強している初心者の方、またはモバイルUIデザインを基礎から学びたい方です。

3限目
モバイルサイトデザインのコツのポイントを押さえる

※PhotoshopやIllustratorなどのデザインツールの具体的な使い方はこの授業で行いませんので、別の授業と併せてご覧ください。

Material design

 

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ