webデザイナー学習記録帳

webデザインやwebに関する学んだことの学習記録帳です

【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デザイン入門講座」とう書籍で知り
求職者支援学校のプログラマーの講師が図解説明の際に使用していて知っていました
かなり便利なサイトなようですね、正直なところいじってみたのですが
あまり活用できていないサイトでした、きっと就職したら現場で多用されているでしょうから
しっかり使えるようにしておかなければと思いました