11/1(Sun)

今日の生放送

タッチデバイスのためのUIデザイン

Photoshopと連携したデザイン実践スキル【タッチデバイス時代のUIデザイン】

第1回:2014年12月6日公開

80min

Photoshopと連携したデザイン実践スキル【タッチデバイス時代のUIデザイン】

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

コース概要

■スマホ経由のWebサイト閲覧頻度はPCの約2倍!

スマホ対応サイトといえども、開発はPCでするもの。タッチパネルでデザインする訳にはいきません。だからと言って、PCのディスプレイで開発し完成したモックを実機デバイスで見るととんでもない事に!文字が小さすぎて全く読めなかったりします。それは、タッチデバイスの解像度がPCの2倍~4倍だからです。つまり、PCで見ている大きさの1/2~1/4に見えてしまうという事です。
Photoshopではレイヤーを沢山重ねたpsdファイルで作業しています。実機検証のために、jpgやgifの1枚画像にしてスマホに送っていたのでは、オンタイムでの確認ができません。スピードが命の現場ですとそんな事を悠長にやっている時間がないので、UIはコーディングとインタラクションでモックを作ってしまい、画像はバラバラにどこかから持ってきてパーツで使っていくというやり方をしてしまう事も多いと思いますが、そんな事をしていてはデザイン以前のUIにしかなりません。

この授業ではスマホサイトを多く手がけている制作会社の現場で行われているUIデザイナーの開発方法を学び、本格的なUIデザインを実践できるスキルを学びます。

※photoshopがインストールされている事を前提に授業が進んでいきます。
photoshopを使用したWebデザイン制作未経験の方はhttp://schoo.jp/design/「#5:Webサイトでよく使うビジュアルデザインの作り方」の録画授業を受講されると、より理解が深まります。

※この授業はスマートフォンをご用意していただくことでより理解が深まります。

ダウンロード参考:Skala Preview Ps Play

■2回目の授業で使用するもの

・リンクボタン制作にAdobe CC photoshopを使います。
http://www.adobe.com/jp/products/photoshop.html

Adobe CCのアセットを使います。

・psdからのcss3抽出にAdobe CC DreamWeaverのExtract機能を使います。
https://helpx.adobe.com/jp/dreamweaver/how-to/extract-photoshop-design-code.html

・コーディングにSublimeText3を使います。
http://www.sublimetext.com/3

・UIのインタラクションにWOWフレームワークをつかいます。
http://mynameismatthieu.com/WOW/

こんな人にオススメ

スマホサイト制作は未経験・マルチデバイス対応サイトを作りたいがワークフローがわからない方

担当の先生

パーソナリティ

  • 塩原 桜

    塩原 桜

    スクー放送部

参加したい受講生 : 2196

カテゴリー

タグ

月額980円で、4,600本以上の授業が見放題

授業リスト

Photoshopと連携したデザイン実践スキル【タッチデバイス時代のUIデザイン】

2014年12月6日公開

80min.

■スマホ経由のWebサイト閲覧頻度はPCの約2倍!

スマホ対応サイトといえども、開発はPCでするもの。タッチパネルでデザインする訳にはいきません。だからと言って、PCのディスプレイで開発し完成したモックを実機デバイスで見るととんでもない事に!文字が小さすぎて全く読めなかったりします。それは、タッチデバイスの解像度がPCの2倍~4倍だからです。つまり、PCで見ている大きさの1/2~1/4に見えてしまうという事です。
Photoshopではレイヤーを沢山重ねたpsdファイルで作業しています。実機検証のために、jpgやgifの1枚画像にしてスマホに送っていたのでは、オンタイムでの確認ができません。スピードが命の現場ですとそんな事を悠長にやっている時間がないので、UIはコーディングとインタラクションでモックを作ってしまい、画像はバラバラにどこかから持ってきてパーツで使っていくというやり方をしてしまう事も多いと思いますが、そんな事をしていてはデザイン以前のUIにしかなりません。

この授業ではスマホサイトを多く手がけている制作会社の現場で行われているUIデザイナーの開発方法を学び、本格的なUIデザインを実践できるスキルを学びます。

※photoshopがインストールされている事を前提に授業が進んでいきます。
photoshopを使用したWebデザイン制作未経験の方はhttp://schoo.jp/design/「#5:Webサイトでよく使うビジュアルデザインの作り方」の録画授業を受講されると、より理解が深まります。

※この授業はスマートフォンをご用意していただくことでより理解が深まります。

ダウンロード参考:Skala Preview   Ps Play

 

■第2回、第3回の授業はこちら

第2回 タッチデバイス時代のUIデザインの極意 脱静止画で体験するサイトへ
第3回 タッチデバイス時代のUIデザインの極意 Webデザイナーの開発現場での役割

  • 自己紹介&アジェンダ
  • 06:40
  • Photoshopのリモート接続について
  • 02:43
  • Skala Preview ・ PS Playのインストールと設定
  • 04:48
  • スマホで確認しながらpsdを修正
  • 09:16
  • スマホで確認すると見辛いテキスト部分などを修正
  • 11:28
  • スマホで確認すると見辛いイラスト部分などを修正
  • 19:50
  • レポート課題発表
  • 02:15
  • Q:PC用とタブレット用やスマホ用に3パターンのデザインカンプを作っていかなければならない時代になってくるということなのかな~、ものすごく労力使いそうだけど。
  • 01:01
  • Q:文字の大きさやデザインの反映以外でチェックする項目は他にありますか?
  • 04:14
  • Q:スマホ用にデザインを考える場合、文字・画像サイズ、渕とのマージンにより自然に情報量が減りますが、それ以外にも一画面当たりの情報量をあえて減らしたりしますか?
  • 02:22
  • Q:確認作業するのに必須な端末は何ですか?
  • 01:50
  • Q:スマホ用デザインカンプPSDは640px幅(Retina対応)で作って、コーダーに渡す場合、サイズはカンプの1/2にしてもらうということでいいでしょうか。
  • 01:42
  • Q:スマホ用のサイト作成する時に、jquery mobileは、現在は流行っていますか?これからは、レスポンシブですか?
  • 02:48
  • Q:スマホ、タブレット、PCがあって、 まずはPCのサイトデザインを考えて、タブレット スマホと小さい順にデザインを作っていくのですか?
  • 01:15
  • Q:スマホで縦に長いwebサイトに仕上がった場合、上に戻りたい!と思う人のことを考えた場合、グローバルヘッダーナビをつけた方が良いのでしょうか?

スライド資料

脱静止画で体験するサイトへ【タッチデバイス時代のUIデザイン】

2014年12月13日公開

70min.

■タッチデバイスにはインタラクションが必要です。

UIを静止画で考えてはいけません!

見てるだけのサイトに人は飽きてしまう時代になりました。ユーザーの指先とコミニュケーションをとれるサイトを作る必要があります。つまり、タッチデバイスには指先でなぞった時反応するインタラクションが必要不可欠です。マウスオーバーで反応するPCサイトから、縦×横×時間で作るタッチデバイスのサイトへ思考を変換していきましょう。
この授業では「見ているだけのサイトから体験するサイトへ」
時間軸のあるサイトを作る極意を学び、あなたのスキルの幅を広げていきます。これまで多くPCサイトを手がけてきたベテランデザイナーにこそ受けていただきたい授業です。
 

■授業で使用するもの

・リンクボタン制作にAdobe CC photoshopを使います。
http://www.adobe.com/jp/products/photoshop.html

Adobe CCのアセットを使います。

・psdからのcss3抽出にAdobe CC DreamWeaverのExtract機能を使います。
https://helpx.adobe.com/jp/dreamweaver/how-to/extract-photoshop-design-code.html

・コーディングにSublimeText3を使います。
http://www.sublimetext.com/3

・UIのインタラクションにWOWフレームワークをつかいます。
http://mynameismatthieu.com/WOW/

 

■第1回、第3回の授業はこちら

第1回 タッチデバイス時代のUIデザインの極意 Photoshopと連携したデザイン実践スキル

第3回 タッチデバイス時代のUIデザインの極意 Webデザイナーの開発現場での役割

スライド資料

開発現場でのWebデザイナーの役割【タッチデバイス時代のUIデザイン】

2014年12月20日公開

70min.

■Webディレクター・フロントエンドデベロッパーとの共同開発でデザイナーがすべき事とは?

この授業では、モバイルファースト時代のWebサイト制作において、Webディレクター・フロントエンドデベロッパーとの共同開発でデザイナーがすべき事を学んでいきます。


タッチデバイス対応サイトはUXと言われているように、UI自体がエクスペリエンス(体験)を内包しています。見るだけのサイト(PC)から体験するサイト(タッチデバイス)へ。熟練したデザイナーこそ2次元の中でデザインをしてしまいがち。


タッチデバイス対応サイトやアプリ開発では、Webディレクターはエクスペリエンスを考えたワイヤーを作ってきますので、インタラクション担当のフロントエンドデベロッパーとの共同作業でモックを作っていくワークフローになります。PCサイトの手法で、Webディレクターが持ってきたワイヤーからデザイナーが一枚絵のカンプを起こし、コーダーさんに渡してスライスに切ってもらう、という流れでは表現できないからです。これからますますWebへのアクセス比重がスマホへシフトしていく中、フロントエンドデベロッパーとUIデザイナーはますます連携を深めて開発して行く事になるでしょう。少数精鋭の制作現場においては、フロントエンドデベロッパーがUIデザイナーを兼ねている事も少なくありません。そんな今時のフロント開発現場でのお役立ち情報をお伝えします。


※photoshopがインストールされている事を前提に授業が進んでいきます。
photoshopを使用したWebデザイン制作未経験の方はhttp://schoo.jp/design/「#5:Webサイトでよく使うビジュアルデザインの作り方」の録画授業を受講されると、より理解が深まります。

■第1回、第2回の授業はこちら

第1回 タッチデバイス時代のUIデザインの極意 Photoshopと連携したデザイン実践スキル
第2回 タッチデバイス時代のUIデザインの極意 脱静止画で体験するサイトへ

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ