1. WordBench 大分 第 6 回勉強会
「梅雨をぶっとばせ！デザイナーさんも大歓迎！の巻」

2. 自己紹介

3. 曽川 稔 （ソガワミノル）
■お仕事
Web デザイン、DTP、ディレクションも少々
https://www.facebook.com/minoru.sogawa

4. で
こんなことや

5. 他にも

6. はたまた
こんなことまで！！

7. さらに∼！！！

8. もういいです、、、
スミマセン。。。

9. デザイナーとプログラマーの
仲良し大作戦
デザイナーとプログラマーの
仲良し大作戦

10. 第一章
構築体制と構築の流れ

11. とある構築体制と流れ
ディレクター
顧客対応
企画・構成
進捗管理
デザイナー
UI 設計
デザイン
画像作成
プログラマー
スライス
コーディング
環境構築

12. 第二章
すれ違うチーム

13. デザイナー プログラマー ディレクター

14. デザイナー プログラマー ディレクター
デザインに専念したいの！！
コードはお任せします！！

15. デザイ プログラマー ディレク

16. デザイナー プログラマー ディレクター
ここはデザインなの？
グリッドずれてるよ！！

17. デザイナー プログラマー
ディレクター

18. デザイナー プログラマー
ディレクター
少ない予算だから効率よく
制作してくれよ！！

19. デザイナー プログラマー

20. 第三章
仲直りの秘訣

21. 秘訣 その１
構成（ワイヤーフレーム）作成、機能の仕様を検討段階から
しっかりと３者で情報を共有しておく！！

22. ・投稿タイプ、固定ページの把握
※記事の表示場所や表示件数、カテゴリの取り決め
・お客様にどのページを運用してもらうのか？
※運用にあわせた管理画面のカスタマイズ
・プラグイン導入、設定
※スライドショーは何枚？リンクつき？ 等

23. 秘訣 その２
プログラマーに渡すスライス用 PSD の
レイヤーの整理整頓は必ず！！

24. ・WordPress のテーマの php、またはパーツにあわせて、
レイヤーをグループ化する。
・色をつけてわかりやすくする。

25. 秘訣 その３
各パーツの配置やスタイルは統一しておくこと！

26. ・作業しているうちにグリッドからずれてしまう。
※今のところ photoshop はそういうものです。^^;
・スタイルが微妙に変わっていく場合がある

27. 秘訣その 4
テキストデータなのか？画像テキストなのか？

28. プログラマーは、デザイナーの意図が分からない事の方が
多いので、明確に伝えてあげる
※テキストデータには、アンチエイリアスに設定。
リンクには、下線をつける。

29. 秘訣 その５
効率よく、気持よくプログラミングして頂くために
仕様、設計に基づいたグリッドでデザインを考える。

30. プログラマー
仕様や設計を基に、カラム数を考たテンプレートを準備して
おくことでプログラマーとデザイナーが平行して作業ができ、
両者が画面の遷移、機能の動作を確認しながら進めることが
できます。

31. 第四章
お互いを認め合う

32. ちょっとしたポイントで各担当者を思いやることが、作業効率や、
サイト構築のクオリティーの向上へとつながります。
デザイナープログラマーディレクター

33. そして、
よりよいチーム作りができます

35. ご清聴ありがとうございました。

36. 余談ですが・・・

37. という facebook グループを立ち上げました！！
どしどし参加お願いします！！
Adobe User Group Oita