ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/689/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日以上先ですので、ゆっくり
確実な物を完成させましょう。