【schoo学習メモ】webデザイン1
Webデザイン入門 3限目工程表とワイヤーフレーム
http://schoo.jp/class/2121
先生:田中昌子先生
2015年4月11日公開
開発に入るまでの下準備
期限を決めたら逆算して組み立てていく
コーディングの経験があまりないデザイナーが静的サイトを受注したと仮定して進んで行く
ヒヤリングシートで確定した要件定義書を元に工程を組み立てていく
納期から逆算していく
ガントチャートと呼ばれる工程表やタスク管理ツールなどを使用して、
納期までのタイムスケジュールを組み立てる
・web制作のワークフロー
・ガントチャートでプロジェクトの管理
・git(ギット)について
複数人でプロジェクトを管理する際に、Aさんがファイルを更新したあとBさんがファイルを更新すると
Aさんが行った更新を上書きすることになってしまうのを防ぐ効果がある
また、ファイルの更新履歴にもなるので、更新前のファイルにも戻る事ができる
・ツリー型のサイト構造図を書く
cacooというサイトで作成する方法
パワーポイントでもツリー型のサイト構造を作成できる(しかも無料で)
・実際のアスペクト比に近い形で作る
・ワイヤーフレームを作る時に実寸をメモる、もしくは実寸で作るとモックを作る時に作業工程が一つ減る
・ワイヤーフレームの実際の作り方は、スクーのwebデザインの骨組み「ワイヤーフレーム」設計(全3回)を参照する
http://schoo.jp/course/25
実際にどう作るか?
スマホファーストなのでスマホサイズから作成する
レスポンシブにするには、
iPhone5 320px
iPhone6 375px
iPhone6Plus 414px ワイヤーフレームのファーストビューは414pxで作成するとよい
が、Retinaディスプレイなのでデザインは倍で作成しなければならない
アスペクト比を守ってワイヤーフレームを作成する
・PCについて
以前は、1024pxだったが現在は1600pxもとても増えている
・cacooについて
パーツがいろいろそろっていて、すごく便利
・手書きのワイヤーフレームのツール
パワーポイント(オンライン上で編集できる)うまく使えばオシャレにできる
cacooは、手描き風のワイヤーフレームが作れる
webステンシルの中に寸法線がとっても便利 mmの部分をpxに直して使うとよい
cacooは定番
【質疑応答】
ピクセルを測れるツールは?
・measureltというツール
→早速導入しました
・ディスプレイについて
1024px×768pxから1366px×768pxが平均的になっているという記事の紹介
・イラレがわかっていれば、ダイレクトにイラレを使ってワイヤーフレームでもよい
(感想)
web制作のワークフローは、本や各種web系サイトなどを読んで知ってはいたけど、こうして細かく順序立てて説明を
していただいて、とてもわかりやすかった
また、ガントチャートを使ってプロジェクトを管理するという事を知りました
兄がプログラマーなのですが、ガントチャートを使っているとの事
cacooというサイトは、「webデザイン入門講座」とう書籍で知り
求職者支援学校のプログラマーの講師が図解説明の際に使用していて知っていました
かなり便利なサイトなようですね、正直なところいじってみたのですが
あまり活用できていないサイトでした、きっと就職したら現場で多用されているでしょうから
しっかり使えるようにしておかなければと思いました