デザイナー視点から見たWeb開発する人々

モノヅクリノハコ のはこ（＠noha_ko）

ぷろふぃーる

• なまえ：マツイミホ（のはこ）

• Twitter ID：@noha_ko

• 屋号：モノヅクリノハコ

• しょくぎょう：Webデザイナーその他

• Japan Azure User Group札幌支部長

• CLR/H デザイン担当

• 北海道情報セキュリティ勉強会（せきゅぽろ）下っ端

• 札幌と横浜を行き来しながら生きてる半分フリーランス

半分社畜の流浪人

• 基本的に社会に適合できていない

• 朝が弱いし夜更かしもできない

• TOKIOみたいな生活がしたい今日この頃

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

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

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

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

※掲載許可は（ry

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

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

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

京急→座り方も混雑した車両への乗り方もみんな小慣れているので無駄がない。

札幌市営地下鉄→詰めて座らないので椅子席に無駄なスペースが多い！！満員電車に背面飛び込みをしない人が多いので朝のラッシュ時はかなり悲惨

( ﾟдﾟ)ﾊｯ!

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

という訳で本題

本日のアジェンダ

• デザイナーさんてそもそもどんな仕事してるの？

• 札幌と横浜を行き来しながら仕事って？

• ぷろぐらまーさんに物申す！

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

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

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

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

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

②ドメイン取得・サーバー用意

• 基本的にはお客様に用意していただきます• 「わかんない＼(^o^)／」と言われた場合は代行したり現場に直接行きサポートしたりetc

• そもそも「いんたーねっとがわからない！」と言われた場合は、PCのセットアップからやったり

• 意外となんでも屋さん• 多分フリーランスの宿命

③ワイヤーフレーム（ラフ）を描く

• 人によってやり方は様々

• 自分の場合は紙（方眼紙）にえんぴつ描きします

• パワポを使う人もいるし、Photoshopなどを使用する人も

• この時点で大まかに各寸法も決めておきます

④デザインカンプを作成

•人によってはIllustratorを使う方もいますが、私はPhotoshopを使用

• なぜって？他の人とやりとりする時にPhotoshopのファイルでのやりとりが多いからです

• PhotoshopはWebサイトが作りやすいように設定してあります

• このカンプをスライスしてバナーやボタンなどを作ります

• 1pxまで細かく（3200％拡大）計算しながら組み立てていきます

• Photoshop大好きﾋｬｯﾌｳｳｳｳｳｳｳｳｳｳｳｳ(ﾟ∀ﾟ )

⑤クライアントさんに最終校正をいただく

•入れて欲しい要素はすべて入っているか？

• イメージしていた形になっているか？

•好きになってもらえるか？

ちょこっと専門的な話をすると、素人であるクライアントさんに対して、

こんなUI・UXの方がAdSenseのクリック率が良いですよ、とか

CV率が良くなりますよ、とかSEO・SEMのお話しですとかを

噛み砕いてお話しし、なるべくこちらの作業しやすい様に誘導します

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

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

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

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

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

！！！！！！！！！

⑦納品

•納品書兼請求書を用意

•納品するデータの確認（拡張子やファイル形式再度CHECK）

• Webサイトの場合、FTPにUPし、それを確認していただく

•保守運用する案件の場合は納品後も毎月チャリンチャリン

• クライアントサイドで運用の場合は、求められた時にお助け

•紙案件の場合はデータ納品終われば完了！ﾋｬｯﾌｳｳｳｳｳ

• だけど精神力を削られるのは断然紙案件

•誤字・脱字が絶対に許されない世界

• その点Webだとちょちょっと直せるよね

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

がんばれ！

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

2拠点生活、正直言って

楽しいです！利点：自由に仕事できる

一箇所にとどまっていると煮詰まるけれど、のうみそリフレッシュできる

欠点：両拠点の維持費交通費冬の札幌は水道凍結が怖い夏の横浜はカビと虫が怖い

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

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

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

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

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

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

そういう時は・・・・・

がんばります。（察し

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

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

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

組み込み屋さんに「わかんないよぅふええ＞＜」と言われる↓

コードの知識の無いデザイナーが頑張って実装する↓

なんだ、出来るんじゃないか。そしたらこっちの案件もよろしく！↓

オライリー本から何から読みまくってやるしかない↓

〆切（納期）があるので「わたしも出来ませんふええ＞＜」とは言えない↓

だれも幸せになれない

BAD END

心のお友達、Red Bull。

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

まとめ• ﾁｮｯﾄﾃﾞｷﾙくらいでフリーランスをやるならば、デザイナーに実装させるという無茶ぶりをさせない程度の実力は身につけてから独立してください

• デザイナーは万能ではありません

• 1pxにまでこだわって指定するのは、各パーツを細かく計算して作っているからです

• 「このへん適当にとりあえず動けば良いですよね」という発想をおやめください

• あなたのその適当でサイト全体の挙動がおかしくなります

制作・筆者：

終