12/16(Sun)

今日の生放送

はじめてのiOSアプリデザイン

はじめてのiOSアプリデザイン

第1回:2013年12月10日公開

60min

はじめてのiOSアプリデザイン

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

コース概要

この授業では、これからアプリデザインを勉強しようと思っている方や、もう一度基本的なことを学びたいという方を対象に、iOSアプリデザインの基礎的なところから学習します。

これまでいくつものアプリ制作現場で、グラフィックデザインの能力は高いけれども、アプリデザインの知識のないデザイナーに発注して涙するクライアントやエンジニアの方々をたくさん見てきました。

HTMLやCSSの知識がないと理にかなったWebデザインができないように、 アプリのデザインにも知っておくべきルールがあります。

また、質の高いアプリを完成させるために、エンジニアには出来るだけプログラム作成に注力してもらう必要がありそうです。 そのためにデザイナは何をした方がよいのか、一緒に考えてみたいと思います。

担当の先生

参加したい受講生 : 973

カテゴリー

タグ

今なら初月無料ですべての授業が見放題!
今すぐ無料でおためし

授業リスト

はじめてのiOSアプリデザイン

2013年12月10日公開

60min.

この授業では、これからアプリデザインを勉強しようと思っている方や、もう一度基本的なことを学びたいという方を対象に、iOSアプリデザインの基礎的なところから学習します。

これまでいくつものアプリ制作現場で、グラフィックデザインの能力は高いけれども、アプリデザインの知識のないデザイナーに発注して涙するクライアントやエンジニアの方々をたくさん見てきました。

HTMLやCSSの知識がないと理にかなったWebデザインができないように、 アプリのデザインにも知っておくべきルールがあります。

また、質の高いアプリを完成させるために、エンジニアには出来るだけプログラム作成に注力してもらう必要がありそうです。 そのためにデザイナは何をした方がよいのか、一緒に考えてみたいと思います。

今回は、印刷物やPC向けWebサイトとアプリデザインの違いや、iOSのルールについて学びましょう。

スライド資料

iOSアプリデザインの企画をカタチにするプロセスを学ぶ

2013年12月7日公開

60min.

この授業では、これからアプリデザインを勉強しようと思っている方や、もう一度基本的なことを学びたいという方を対象に、iOSアプリデザインの基礎的なところから学習します。

これまでいくつものアプリ制作現場で、グラフィックデザインの能力は高いけれども、アプリデザインの知識のないデザイナーに発注して涙するクライアントやエンジニアの方々をたくさん見てきました。

HTMLやCSSの知識がないと理にかなったWebデザインができないように、 アプリのデザインにも知っておくべきルールがあります。

また、質の高いアプリを完成させるために、エンジニアには出来るだけプログラム作成に注力してもらう必要がありそうです。 そのためにデザイナは何をした方がよいのか、一緒に考えてみたいと思います。

今回は、iOSアプリのレイアウトの特徴を知り、ラフスケッチやワイヤーフレームなどをつくり、iPhoneアプリ「POP」を使ってペーパープロトタイピングをしてみましょう。

  • 自己紹介&アジェンダ
  • 01:45
  • iOSアプリレイアウトの特徴
  • 01:51
  • 各アプリのレイアウトの詰め込みぐあい
  • 00:56
  • コンテンツの重要度と位置関係
  • 02:21
  • iOSとAndroidのレイアウトを比較してみよう
  • 00:39
  • なぜAndroidはタブが画面上部にあるアプリが多いのか
  • 04:33
  • ジェスチャーの種類:タップ・ドラッグ・フリック・スワイプ
  • 03:38
  • ジェスチャーの種類:ダブルタップ・ピンチ・タッチ&ホールド・シェイク
  • 03:45
  • アプリの画面設計
  • 02:10
  • iphoneを使ってプロトタイピング!
  • 03:30
  • どんなUIパーツが適しているかを検討しよう
  • 00:10
  • ONとOFFを簡単に設定できるUIパーツは?
  • 02:25
  • ボタンをタップしたら出てくる仕様の改善方法
  • 04:00
  • パッと見は問題なさそうな部分に潜む問題点
  • 03:35
  • パッと見は問題なさそうな部分に潜む問題の改善方法
  • 02:20
  • パーツのカスタマイズ難易度
  • 03:27
  • エンジニアはやみくもにパーツのカスタマイズを嫌がっているわけではない
  • 03:18
  • Q:スマホのUIは今後どうなっていきますか?
  • 01:30
  • Q:企画案が複数合った場合「使い勝手が良さそう」と思えるものを採用していく感じですか?
  • 01:05
  • Q:重要度の表について
  • 01:30
  • Q:フラットデザインでアプリを設計する際に気をつける事は?
  • 01:15
  • Q:先生が、いいなと思うiPhoneアプリのデザインってありますか?
  • 00:53
  • Q:今後、アンドロイドアプリについても、講義する予定はありますか?
  • 00:32
  • Q:おもしろいアプリはどうやって探してますか?
  • 00:50
  • Q:デザインのバランスはどのように落としどころを探りますか?
  • 02:43
  • Q:ユーザビリティテストは行ってますか?
  • 01:37
  • Q:iPhoneアプリとAndroidアプリを両方制作する場合について
  • 01:23
  • 課題発表

スライド資料

魅力的なアプリUIデザインとは何か

2013年12月21日公開

60min.

この授業では、これからアプリデザインを勉強しようと思っている方や、もう一度基本的なことを学びたいという方を対象に、iOSアプリデザインの基礎的なところから学習します。

これまでいくつものアプリ制作現場で、グラフィックデザインの能力は高いけれども、アプリデザインの知識のないデザイナーに発注して涙するクライアントやエンジニアの方々をたくさん見てきました。

HTMLやCSSの知識がないと理にかなったWebデザインができないように、 アプリのデザインにも知っておくべきルールがあります。

また、質の高いアプリを完成させるために、エンジニアには出来るだけプログラム作成に注力してもらう必要がありそうです。 そのためにデザイナは何をした方がよいのか、一緒に考えてみたいと思います。

今回は、美しいUIデザインについて学びます。ただ単に美しいグラフィックをよいUIと呼ぶのではなく、アプリの目的やターゲットに適した見た目の演出について考えていきます。また、スプラッシュスクリーンとアプリアイコンについても、一緒に学びましょう。

  • 自己紹介&アジェンダ
  • 02:27
  • UIってなんだろう?
  • 05:14
  • スプラッシュスクリーンとアイコン
  • 00:17
  • 第1問 もっとも理想的なアプリの起動は以下のうちのどれでしょうか?
  • 04:28
  • さまざまなアプリの起動画面
  • 02:42
  • バーアイコン
  • 03:29
  • 第2問 このiOSアプリ画面、タブバーアイコンをなおすべきです。それはAからCのうちどれでしょうか?
  • 03:55
  • アプリアイコン
  • 03:17
  • 使いやすいUI 
  • 01:09
  • 第3問 一貫性の観点から、以下のデザインには3つの問題があります。真っ先に変更すべき箇所は次のうちどれでしょうか?
  • 03:15
  • 一貫性のないUI/あるUI
  • 00:58
  • 外観と操作性
  • 02:39
  • HTML脳からの脱却
  • 02:09
  • 変わりゆくUI
  • 03:05
  • まとめ
  • 01:07
  • Q:ユーザー定義のターゲットは、どのようにしますか
  • 02:32
  • Q:レスポンシブWebデザインやスマホサイトのUI設計は、これらと全く違う概念ですか?
  • 01:41
  • Q:先生はどのようにデザインを勉強したのですか?
  • 02:42
  • Q:先生が感じるアプリのフラットデザインのメリット・デメリット。
  • 02:20
  • Q:iPhoneとiPad両方を対象としたアプリの場合、どちらの画面サイズを先に考えた方が良いでしょうか?
  • 04:12
  • Q:初めて使う人と頻繁に使う人とで、どういうものが使いやすいかに差が出る時、どうやって解決を図りますか?
  • 01:14
  • Q:先生が「これはよく考えられたUIだ!」と思うアプリは何でしょうか?
  • 02:26
  • 課題発表

スライド資料

よりよいアプリ制作に必要なエンジニアとデザイナーの連携術

2014年1月4日公開

60min.

この授業では、これからアプリデザインを勉強しようと思っている方や、もう一度基本的なことを学びたいという方を対象に、iOSアプリデザインの基礎的なところから学習します。

これまでいくつものアプリ制作現場で、グラフィックデザインの能力は高いけれども、アプリデザインの知識のないデザイナーに発注して涙するクライアントやエンジニアの方々をたくさん見てきました。

HTMLやCSSの知識がないと理にかなったWebデザインができないように、 アプリのデザインにも知っておくべきルールがあります。

また、質の高いアプリを完成させるために、エンジニアには出来るだけプログラム作成に注力してもらう必要がありそうです。 そのためにデザイナは何をした方がよいのか、一緒に考えてみたいと思います。

今回は、よりよいアプリ制作に必要なエンジニアとデザイナーの連携術についての授業です。デザイナーの役割は、画像パーツの切り出し方を工夫したり、デザイン仕様書を作成することにより、エンジニアがレイアウトを実装する負担を大幅に削減すること。エンジニアがプログラミングに集中できれば、それだけで品質の高いアプリが生まれやすくなります。そこで、デザイナーがどのように連携すべきかについて学びましょう。

  • 自己紹介&アジェンダ
  • 03:33
  • アプリ制作のワークフロー
  • 02:23
  • 第1問 このワークフローを、デザイナーとエンジニア、それぞれにどんな不満が発生しそうか考えましょう。
  • 04:45
  • ワークフロー改善
  • 03:57
  • デザイン通りのレイアウト実装のために
  • 03:22
  • アイコンを切り出すときの工夫
  • 03:07
  • 第2問 B君から「おんなじ画像を使い回す」を前提にパーツ切り出ししてほしいと言われました。以下の2つのボタンはどう切り出すべきでしょうか?
  • 04:14
  • レイアウト仕様書を作ろう
  • 01:28
  • 各要素の位置関係を数値で伝える
  • 01:27
  • 第3問 ボタンの画像、通常の状態以外にも作成する必要があります。どんな状態のものが考えられるでしょうか。
  • 02:53
  • ボタン画像の命名
  • 01:26
  • レイアウターの提案
  • 05:43
  • まとめ
  • 00:43
  • Q:先生のこれまでの授業を書籍化する予定はありますか?
  • 01:09
  • Q:良いアプリを作る為に、デザイナーとプログラマーがお互いの事について、学んでみる事をされた現場はありましたか?
  • 01:39
  • Q:デザイナーとエンジニアの負荷を減らす為にディレクターに望む事などあれば教えて下さい。
  • 02:20
  • Q:アニメーション等の動的部分のデザインの伝達は、どうされていますか?
  • 01:38
  • Q:デザイン仕様書について、制作する上でコツがあれば教えて欲しいです。
  • 00:47
  • Q:先生が使う仕様書とかあって見れたら見てみたいです!
  • 02:53
  • Q:エンジニアさんは同じオフィスで作業をしているのですか?
  • 05:11
  • 課題発表

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ