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