Your SlideShare is downloading. ×
0
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう  スクー生徒会
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

【再放送】Webデザインの骨組み「ワイヤーフレーム」を学ぼう スクー生徒会

455

Published on

ーーーーーーーーーーーーーーーーーーーーーーー …

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

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

No Downloads
Views
Total Views
455
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 本日のアジェンダ webサイト制作のワークフロー ワイヤーフレームとは Adobe Illustoratorで ワイヤーフレームを作ってみよう 質疑応答と宿題 15分 15分 10分 ! 20分
  • 2. 質問1 ! ワイヤーフレームって なんでしょうか?
  • 3. 答え1 3Dのポリゴン
  • 4. 50平米 風紀地区
  • 5. ヒヤリングシート参考 http://p.tl/3egC http://p.tl/NAna http://p.tl/fWVW
  • 6. 構成を考える 家 サイト 浴室 リビング 子供部屋 ベッド ルーム 玄関 TOP カテゴリー1 カテゴリー2 アクセス 特集
  • 7. サイト設計の鉄則は何? 周知の 使用方法で 制作 ユーザーはこらえ性がない 操作が分からないとすぐに 出て行ってしまう 派手な 演出は 控える 仕掛けはユーザーは 一度見たらもう見ようとしない 「またか」と思って離れる 目的を 明確に! UIは目的の為にある。 最短でユーザーを目的に誘導
  • 8. サイズがわかっている ため、%に変換し易い。
  • 9. になります!
  • 10. 960 Grid System
  • 11. 以下の様な要望がお客様から出た物とします。 女性向けファッションサイトの ワイヤーフレームを作ってみる 演習 ビルボード
  • 12. 女性向けファッションサイトの ワイヤーフレームを作ってみる 演習 Topic、Tops、Bottomsの3つをメインコンテンツとする お客様の要望を踏まえてペーパープロトタイピング メインコンテンツ詳細は、ビルボード下カラムから飛べる リニア型のページ内リンク 右上にグローバルナビ、並んでリモートナビにAcsess TopicはYouTubeを埋め込む時もあり。 リリース後に、スマホ対応のメディアクエリを実装予定。
  • 13. http://web-d.navigater.info/cat3/ mitokoumon.html
  • 14. 960 Grid Systemで作るワイヤーフレーム
  • 15. 質問2 Illustoratorの基本操作 ができますか? 使用経験者 である 初めてインストールしたが リンク先の動画をみて練習した 初めてインストール 基本操作は知らないA B C
  • 16. このようなペーパープロトタイピングをしました http://behomazn.com/schoo/20140508/ prototyping.png ! プロトタイピングから、正確なサイズで ワイヤーフレームを作りました http://behomazn.com/schoo/ 20140508/20140508wire_frame.png ! こちらを見ながら、 正確なワイヤーフレームを作って行きます。 ! !
  • 17. 宿題 ! 今日の課題を 完成させてください。 ! 2回目の授業は 10日以上先ですので、ゆっくり 確実な物を完成させましょう。
  • 18. 本日のアジェンダ 前回のおさらい 学生の皆さんからの質問 提出課題の添削 質疑応答と宿題 15分 10分 15分 20分
  • 19. http://960.gs/
  • 20. http://web-d.navigater.info/cat3/mitokoumon.html
  • 21. ! ! bootstrap http://getbootstrap.com/ ! ! bootstrap用のグリッド http://benstewart.net/2012/06/bootstrap-responsive- photoshop-templates/
  • 22. 宿題 ! 次回は、ワイヤーフレームをつかって web開発をする手法です。 ! 今日の授業の注意点を見直し、 課題を完成させておきましょう! !
  • 23. 本日のアジェンダ web[設計まとめと開発準備] コーディング問題 制作仕様書を作ろう 質疑応答と宿題 5分 15分 15分 20分
  • 24. web[設計まとめと開発準備] ! 前回のまとめ 設計フェーズ終了→ 開発フェーズ
  • 25. Adobe Pinch In(web制作の入門サイト) http://www.adobe.com/jp/jos/pinchin.edu.html ! アドビ映像塾CC http://focus-in.tv/ Adobe クリエイティブ クラウドの全てのアプリの 使用方法が学べます。
  • 26. 2. 3. 4. 5. 6. 7.
  • 27. 制作仕様書 サンプル http://ascii.jp/elem/000/000/659/659982/img.html
  • 28. コーディング問題 ! 前提スキルのチェックを 行います。
  • 29. タグで、htmlの上部に記述し、
  • 30. html+cssを挫折した全ての人のための基礎実習 http://schoo.jp/class/390 ! 挫折した人のための初心者速習html+css【2カラムボックスモデル編】 http://schoo.jp/class/518
  • 31. はじめてHTML5でコーディングする時に注意したい アウトラインとかいろいろ http://webdesignrecipes.com/semantic-html5-with-outline/ HTML5でサイトをつくろう http://www.html5-memo.com/first-html5/html5-01/
  • 32. html+cssを挫折した全ての人のための基礎実習 http://schoo.jp/class/390 ! 挫折した人のための初心者速習html+css【2カラムボックスモデル編】 http://schoo.jp/class/518
  • 33. CSSでレイアウトするなら絶対覚えておきたい配置のルール http://webdesignrecipes.com/css-visual-formating-model/ CSS3リファレンス http://www.htmq.com/css3/
  • 34. 制作仕様書を作ろう ! 前回で制作した ワイヤーフレームを イラレで、開きましょう
  • 35. それでは、 制作したワイヤーフレームの .aiファイルを開いて、 演習を開始しましょう
  • 36. 完成見本は、 こちらからダウンロード できます。 http://akikito.com/schoo/20140518/wireframe.zip 書き出しpngの見本 http://behomazn.com/schoo/20140518/wireframe.png

×