2014,06,21 プログラミング生放送

1. デザイナー視点から見た
Web開発する人々
モノヅクリノハコ のはこ（＠noha_ko）

2. ぷろふぃーる
• なまえ：マツイミホ（のはこ）
• Twitter ID：@noha_ko
• 屋号：モノヅクリノハコ
• しょくぎょう：Webデザイナーその他
• Japan Azure User Group札幌支部長
• CLR/H デザイン担当
• 北海道情報セキュリティ勉強会（せきゅぽろ）下っ端
• 札幌と横浜を行き来しながら生きてる半分フリーランス
半分社畜の流浪人
• 基本的に社会に適合できていない
• 朝が弱いし夜更かしもできない
• TOKIOみたいな生活がしたい今日この頃

3. このマークだけでも覚えて帰ってください！

4. 本日、スピーカーをするにあたって

5. そうしましたら、迅速に＠をいただきました。

6. ※掲載許可は頂いておりますｗ

7. ※掲載許可は（ry

8. という訳で、本日は電車についてお話し
しようかとおもいます。

9. 主に使用している路線
横浜→京急
札幌→市営地下鉄東豊線

10. 札幌と横浜、最大の違いは
車両の仕様ではなく、
お客さんの乗車方法！

11. 京急→座り方も混雑した車両への乗り方も
みんな小慣れているので無駄がない。
札幌市営地下鉄→詰めて座らないので
椅子席に無駄なスペースが多い！！
満員電車に背面飛び込みをしない人が多い
ので
朝のラッシュ時はかなり悲惨

12. ( ﾟдﾟ)ﾊｯ!

13. 違う！今日はこんな
事をお話ししに来た
わけじゃない！！

14. という訳で本題

15. 本日のアジェンダ
• デザイナーさんてそもそもどんな仕事してるの？
• 札幌と横浜を行き来しながら仕事って？
• ぷろぐらまーさんに物申す！

16. 1：デザイナーさんてそもそも
どんな仕事してるの？

17. ※先に言っておきますが、
デザイナーだからといって
オシャレなスライド作ると思っ
たら大間違いです。
めんどくさいじゃん！！！！

18. 話を戻しまして。
デザイナーさんって結局なにをする人なの？

19. ざっくり言うと、基礎工事と外観工事です。

20. ①お客様（クライアント）とお話し

21. ②ドメイン取得・サーバー用意
• 基本的にはお客様に用意していただきます
• 「わかんない＼(^o^)／」と言われた場合は
代行したり現場に直接行きサポートしたりetc
• そもそも「いんたーねっとがわからない！」と言われた
場合は、PCのセットアップからやったり
• 意外となんでも屋さん
• 多分フリーランスの宿命

22. ③ワイヤーフレーム（ラフ）を描く
• 人によってやり方は様々
• 自分の場合は紙（方眼紙）にえんぴつ描きします
• パワポを使う人もいるし、Photoshopなどを使用する人も
• この時点で大まかに各寸法も決めておきます

23. ④デザインカンプを作成
• 人によってはIllustratorを使う方もいますが、私はPhotoshopを使用
• なぜって？他の人とやりとりする時にPhotoshopのファイルでのやり
とりが多いからです
• PhotoshopはWebサイトが作りやすいように設定してあります
• このカンプをスライスしてバナーやボタンなどを作ります
• 1pxまで細かく（3200％拡大）計算しながら組み立てていきます
• Photoshop大好きﾋｬｯﾌｳｳｳｳｳｳｳｳｳｳｳｳ(ﾟ∀ﾟ )

24. ⑤クライアントさんに最終校正をいただく
• 入れて欲しい要素はすべて入っているか？
• イメージしていた形になっているか？
• 好きになってもらえるか？
ちょこっと専門的な話をすると、素人であるクライアントさんに対して、
こんなUI・UXの方がAdSenseのクリック率が良いですよ、とか
CV率が良くなりますよ、とかSEO・SEMのお話しですとかを
噛み砕いてお話しし、なるべくこちらの作業しやすい様に誘導します

25. デザインのみの納品でしたら
ここで終了ですおつかれさまでした

26. だがしかし、そうはいか
ないのが現実です
学生の皆さんはその辺
よく覚えておきましょう

27. ⑥コーディング
（マークアップその他）

28. HTMLとCSSを書きます
ｊｓも導入。jQueryライブラリ活用
WordPressカスタマイズの場合、PHPも
苦手とかわからないとか言ってる場合じゃありま
せん
場合によってはSQLもいじります
あああああわからないよ時間もないよ納期が
迫ってくるよ寝たいよバナー追加とかきちゃった
よ
そのサイズじゃこの寸法じゃ入らないよ

29. 進捗確認
迫り来る納期
ここに来ての仕様変更
あ、バナーやっぱり最初のに戻してください
やっぱり全体的な色、変えてもらえません？
グロナビのカテゴリもうひとつ増やせます？
進捗どうですか？
進捗どうですか？進捗（

30. ！！！！！！！！！

32. ⑦納品
• 納品書兼請求書を用意
• 納品するデータの確認（拡張子やファイル形式再度CHECK）
• Webサイトの場合、FTPにUPし、それを確認していただく
• 保守運用する案件の場合は納品後も毎月チャリンチャリン
• クライアントサイドで運用の場合は、求められた時にお助け
• 紙案件の場合はデータ納品終われば完了！ﾋｬｯﾌｳｳｳｳｳ
• だけど精神力を削られるのは断然紙案件
• 誤字・脱字が絶対に許されない世界
• その点Webだとちょちょっと直せるよね

33. 以上がデザイナーさんのお仕事です。
ね、簡単でしょ( ´◉◞౪◟◉)
・・・・・・・・日本のデザイナーさんには
フルスタックが求められています。
もし、目指している方がいらっしゃいましたら
がんばれ！

34. 2：札幌と横浜を行き来しなが
ら仕事って？

35. 2拠点生活、正直言って
楽しいです！
利点：自由に仕事できる
一箇所にとどまっていると煮詰まる
けれど、のうみそリフレッシュできる
欠点： 両拠点の維持費
交通費
冬の札幌は水道凍結が怖い
夏の横浜はカビと虫が怖い

36. 3：プログラマーさんや
インフラ屋さんに
物申したいこと

37. 物申したいと言うとよりは心配

38. 作ったデザインで組み立てはしやすいか？

39. バルーンやフォーム、場合によって
は注文カゴなど、実装するに関して
無茶ぶりになっていないか？

40. クライアントさんに対してよりある意味
気を使います。
ちょっと無茶な面白いデザインをしてしまっ
た時こそ余計に(；・∀・)

41. ただ、たまに組み込みやさん自身も
「あまりコードが書けない」
という場合があります。

42. そういう時は・・・・・

43. がんばります。（察し

44. ﾜﾀｼ ｺｰﾄﾞ ﾁｮｯﾄｶｹﾙOh my god＼(^o^)／

45. 組み込み屋さんと何度もお話しして
「うーん、自分じゃその辺ちょっとよくわかり
ません」と言われてしまった時は
目を濁らせながらただ黙々とGoogle先生で
Bingりながら実装していきます。。。。。

46. これが、かなりの無茶ぶり
だという事を
覚えて帰って頂ければ
充分です！

47. 組み込み屋さんに「わかんないよぅふええ＞＜」と言われる
↓
コードの知識の無いデザイナーが頑張って実装する
↓
なんだ、出来るんじゃないか。そしたらこっちの案件もよろしく！
↓
オライリー本から何から読みまくってやるしかない
↓
〆切（納期）があるので「わたしも出来ませんふええ＞＜」とは言えない
↓
だれも幸せになれない
BAD END

48. 心のお友達、Red Bull。

49. こういう悲劇が生まれないように、
早い段階でお伺いたてる訳です。
プロ集団に対しての発注の場合には
生まれにくい悲劇ですが、
個人の野良プログラマーさんにはよくある
ことです

50. まとめ
• ﾁｮｯﾄﾃﾞｷﾙくらいでフリーランスをやるならば、デザイナーに実装させ
るという無茶ぶりをさせない程度の実力は身につけてから独立してく
ださい
• デザイナーは万能ではありません
• 1pxにまでこだわって指定するのは、各パーツを細かく計算して作っ
ているからです
• 「このへん適当にとりあえず動けば良いですよね」という発想をおや
めください
• あなたのその適当でサイト全体の挙動がおかしくなります

51. 制作・筆者：
終