■スマホ経由の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

■第２回、第３回の授業はこちら

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

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

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/

■第１回、第３回の授業はこちら

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

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

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

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

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


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


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

■第１回、第２回の授業はこちら

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