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

2. 本日のアジェンダ
webサイト制作のワークフロー
ワイヤーフレームとは
Adobe Illustoratorで
ワイヤーフレームを作ってみよう
質疑応答と宿題
15分
15分
10分
!
20分

3. 質問１
!
ワイヤーフレームって
なんでしょうか？

4. 答え１
３Dのポリゴン

7. 50平米
風紀地区

8. ヒヤリングシート参考
http://p.tl/3egC
http://p.tl/NAna
http://p.tl/fWVW

9. 構成を考える
家 サイト
浴室
リビング
子供部屋
ベッド
ルーム
玄関
TOP
カテゴリー１
カテゴリー２
アクセス
特集

11. サイト設計の鉄則は何？
周知の
使用方法で
制作
ユーザーはこらえ性がない
操作が分からないとすぐに
出て行ってしまう
派手な
演出は
控える
仕掛けはユーザーは
一度見たらもう見ようとしない
「またか」と思って離れる
目的を
明確に！
UIは目的の為にある。
最短でユーザーを目的に誘導

13. サイズがわかっている
ため、%に変換し易い。

17. になります！

19. 960 Grid System

23. 以下の様な要望がお客様から出た物とします。
女性向けファッションサイトの
ワイヤーフレームを作ってみる
演習
ビルボード

24. 女性向けファッションサイトの
ワイヤーフレームを作ってみる
演習
Topic、Tops、Bottomsの３つをメインコンテンツとする
お客様の要望を踏まえてペーパープロトタイピング
メインコンテンツ詳細は、ビルボード下カラムから飛べる
リニア型のページ内リンク
右上にグローバルナビ、並んでリモートナビにAcsess
TopicはYouTubeを埋め込む時もあり。
リリース後に、スマホ対応のメディアクエリを実装予定。

25. http://web-d.navigater.info/cat3/
mitokoumon.html

26. 960 Grid Systemで作るワイヤーフレーム

27. 質問２
Illustoratorの基本操作
ができますか？
使用経験者
である
初めてインストールしたが
リンク先の動画をみて練習した
初めてインストール
基本操作は知らないA B
C

28. このようなペーパープロトタイピングをしました
http://behomazn.com/schoo/20140508/
prototyping.png
!
プロトタイピングから、正確なサイズで
ワイヤーフレームを作りました
http://behomazn.com/schoo/
20140508/20140508wire_frame.png
!
こちらを見ながら、
正確なワイヤーフレームを作って行きます。
!
!

29. 宿題
!
今日の課題を
完成させてください。
!
２回目の授業は
10日以上先ですので、ゆっくり
確実な物を完成させましょう。

31. 本日のアジェンダ
前回のおさらい
学生の皆さんからの質問
提出課題の添削
質疑応答と宿題
15分
10分
15分
20分

35. http://960.gs/

39. http://web-d.navigater.info/cat3/mitokoumon.html

52. !
!
bootstrap
http://getbootstrap.com/
!
!
bootstrap用のグリッド
http://benstewart.net/2012/06/bootstrap-responsive-
photoshop-templates/

54. 宿題
!
次回は、ワイヤーフレームをつかって
web開発をする手法です。
!
今日の授業の注意点を見直し、
課題を完成させておきましょう！
!

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

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

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

64. 2.
3.
4.
5.
6.
7.

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

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

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

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

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

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

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

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

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

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