ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/717/room ーーーーーーーーーーーーーーーーーーーーーーー

2. 本日のアジェンダ
web[設計まとめと開発準備]
コーディング問題
制作仕様書を作ろう
質疑応答と宿題
5分
15分
15分
20分

3. web[設計まとめと開発準備]
!
前回のまとめ
設計フェーズ終了→
開発フェーズ

7. Adobe Pinch In(web制作の入門サイト)
http://www.adobe.com/jp/jos/pinchin.edu.html
!
アドビ映像塾CC
http://focus-in.tv/
Adobe クリエイティブ クラウドの全てのアプリの
使用方法が学べます。

10. 2.
3.
4.
5.
6.
7.

11. 制作仕様書 サンプル
http://ascii.jp/elem/000/000/659/659982/img.html

14. コーディング問題
!
前提スキルのチェックを
行います。

16. タグで、htmlの上部に記述し、

17. html+cssを挫折した全ての人のための基礎実習
http://schoo.jp/class/390
!
挫折した人のための初心者速習html+css【2カラムボックスモデル編】
http://schoo.jp/class/518

18. はじめてHTML5でコーディングする時に注意したい
アウトラインとかいろいろ
http://webdesignrecipes.com/semantic-html5-with-outline/
HTML5でサイトをつくろう
http://www.html5-memo.com/first-html5/html5-01/

20. html+cssを挫折した全ての人のための基礎実習
http://schoo.jp/class/390
!
挫折した人のための初心者速習html+css【2カラムボックスモデル編】
http://schoo.jp/class/518

21. CSSでレイアウトするなら絶対覚えておきたい配置のルール
http://webdesignrecipes.com/css-visual-formating-model/
CSS3リファレンス
http://www.htmq.com/css3/

22. 制作仕様書を作ろう
!
前回で制作した
ワイヤーフレームを
イラレで、開きましょう

23. それでは、
制作したワイヤーフレームの
.aiファイルを開いて、
演習を開始しましょう

24. 完成見本は、
こちらからダウンロード
できます。
http://akikito.com/schoo/20140518/wireframe.zip
書き出しpngの見本
http://behomazn.com/schoo/20140518/wireframe.png

25. 宿題
２日後にはじまる
Webデザインを始めたい方に贈る「HTMLとCSSって何」
【概要理解とツール導入】
を受講予定の人は、
ワイヤーフレームにコーディングに必要な
ピクセル数を全て記述し、
ワイヤーフレームの画像書き出しに、
コーディングルールを書き込んでおきましょう。