Webデザインの骨組み「ワイヤーフレーム」を学ぼう【完成編】 先生:田中 晶子

1,003 views

Published on

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

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,003
On SlideShare
0
From Embeds
0
Number of Embeds
271
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webデザインの骨組み「ワイヤーフレーム」を学ぼう【完成編】 先生:田中 晶子

  1. 1. 本日のアジェンダ web[設計まとめと開発準備] コーディング問題 制作仕様書を作ろう 質疑応答と宿題 5分 15分 15分 20分
  2. 2. web[設計まとめと開発準備] ! 前回のまとめ 設計フェーズ終了→ 開発フェーズ
  3. 3. Adobe Pinch In(web制作の入門サイト) http://www.adobe.com/jp/jos/pinchin.edu.html ! アドビ映像塾CC http://focus-in.tv/ Adobe クリエイティブ クラウドの全てのアプリの 使用方法が学べます。
  4. 4. 2. 3. 4. 5. 6. 7.
  5. 5. 制作仕様書 サンプル http://ascii.jp/elem/000/000/659/659982/img.html
  6. 6. コーディング問題 ! 前提スキルのチェックを 行います。
  7. 7. タグで、htmlの上部に記述し、
  8. 8. html+cssを挫折した全ての人のための基礎実習 http://schoo.jp/class/390 ! 挫折した人のための初心者速習html+css【2カラムボックスモデル編】 http://schoo.jp/class/518
  9. 9. はじめてHTML5でコーディングする時に注意したい アウトラインとかいろいろ http://webdesignrecipes.com/semantic-html5-with-outline/ HTML5でサイトをつくろう http://www.html5-memo.com/first-html5/html5-01/
  10. 10. html+cssを挫折した全ての人のための基礎実習 http://schoo.jp/class/390 ! 挫折した人のための初心者速習html+css【2カラムボックスモデル編】 http://schoo.jp/class/518
  11. 11. CSSでレイアウトするなら絶対覚えておきたい配置のルール http://webdesignrecipes.com/css-visual-formating-model/ CSS3リファレンス http://www.htmq.com/css3/
  12. 12. 制作仕様書を作ろう ! 前回で制作した ワイヤーフレームを イラレで、開きましょう
  13. 13. それでは、 制作したワイヤーフレームの .aiファイルを開いて、 演習を開始しましょう
  14. 14. 完成見本は、 こちらからダウンロード できます。 http://akikito.com/schoo/20140518/wireframe.zip 書き出しpngの見本 http://behomazn.com/schoo/20140518/wireframe.png
  15. 15. 宿題 2日後にはじまる Webデザインを始めたい方に贈る「HTMLとCSSって何」 【概要理解とツール導入】 を受講予定の人は、 ワイヤーフレームにコーディングに必要な ピクセル数を全て記述し、 ワイヤーフレームの画像書き出しに、 コーディングルールを書き込んでおきましょう。

×