2009/08/28 北海道WEBコンソーシアム×LOCAL PHP部で発表した資料「デザイナー・プログラマーの連携のベストプラクティス　～プログラマーサイドから～」

1. デザイナー・プログラマーの
連携のベストプラクティス
～ プログラマーサイドから ～
LOCAL PHP部
松井 健太郎

2. 自己紹介
• LOCAL PHP部所属
• 株式会社インフィニットループ所属
• 主にケータイサイトの作成を行っています
• 最近ではブラウザゲームを作ったりしています
• ke-tai.org(http://ke-tai.org/)というサイトを運
営しています

3. LOCAL PHP部の紹介
• LOCALは、北海道における技術系地域コミュ
ニティ(ユーザ会、勉強会等)の活動を支援す
るとともに、コミュニティ間の連携イベント
企画開催等を通して、地域を盛り上げていく
ことを目標とする有志の集まりです。
• その中からPHP使い（ぺちぱー）が集まって
勝手に活動しているのがLOCAL PHP部。
• 2008年の11月頃から活動。2ヶ月に1度くら
い勉強会を開いている。
• ゆるく長くがモットー。

6. 今日の内容
• なぜデザイナーとプログラマーは
仲良くなれないのか
• プログラマー側から考えた問題点
→ プログラマーのここが悪い
• デザイナーにひとこと言いたい
• ぜひ覚えて欲しいツール

7. なぜデザイナーとプログラマーは
仲良くなれないのか
• あまり仲の良い関係を見たことがない
• 仲が悪いとまではいかないまでも上手な連携
が取れず、ギクシャクしているケースが多い
→ お互いの勝手がわからず遠慮し合っている？
• 文化が違う（異文化コミュニケーションの認
識が必要）
• お互いが何を考えているかを知りもっとうま
く付き合っていきたい

8. プログラマー側から考えた問題点(1)
プログラマーのココが悪いのでは？
• 技術至上主義
• 日本語を話さない（無駄に技術用語を
使う）
• コミュニケーション能力不足（空気が
読めない）
• 自己中心的

9. プログラマー側から考えた問題点(2)
ココを改善したらどうだろう？
• ちゃんと会話しよう、コミュニケーションしよう
• 技術用語はなるべく控えよう、言い換えられる言葉
は言い換えて表現しよう
• 自己中な設計はさけよう
• プログラムとデザインは可能な限り分離しよう
• フォルダ構造やファイル名は、しっかり相談して決
めよう
• 長期間メンテを行うのはデザイナー側のケースが多
い（日々の更新、デザイン変更など）
• プログラマ側は特にどんな構造でも支障がないはず

10. プログラマー側から考えた問題点(3)
ココを改善したらどうだろう？
• コミュニケーション能力不足を補うために、ドキュ
メントをしっかり作ろう
• メモ書き程度でもいいので、残して伝えることが重
要
• フォルダ構造、ファイル名とその機能の説明
• 設置の手順メモ（主にサーバ移転などで使用）
• 変更の際、どこを直せばよいのかの説明
例：デザインを変更したい場合、どのファイルを直せばよいのか
：プルダウンに選択肢を追加したい場合、どうやったら追加できるのか
：ここから先はプログラムに変更が必要

11. デザイナーにひとこと言いたい(1)
• 楽する努力をしっかりして欲しい！！
• それホントに全部手でやるの？
（例えばメニューの共通化をしない）
• 作業環境はちゃんと作ろう。FTPで手アッ
プとか辛くないの？
• どんな情報が欲しいのか、ちゃんと伝
えて欲しい。

12. デザイナーにひとこと言いたい(2)
これだけは覚えて欲しい
• PHPの構文 <?php ～ ?>は壊さないで
• Smartyの構文 { ～ }は壊さないで
• テンプレート内の条件分岐（if文）、繰り返
し(for文)くらいは覚えて欲しい
• JavaScriptはある程度でよいので覚えて欲し
い、JQueryなどはもはや完全にデザイナーの
領域

13. おまけ：マネージャーにひとこと言いたい
• 作業時間に余裕を！！
時間に余裕がないと、取れるコミュニ
ケーションも取れません ＞＜
• デザインとプログラムのスケジュール
は完全平行扱いしないで！！
月
！ 火 水 木 金
デザイナー
！ デザイン 納
理
プログラマー 開発 品
無

14. ぜひ覚えて欲しいツール
Subversion（サブバージョン）
• バージョン管理システム（履歴管理システム）
• SVNと呼ばれたりもする
• 多人数でファイルを共有・更新できる
• 「これから○○○.htmlをいじるので触らないで！」
などの連絡が不要になる
• 好きな時点の構成に瞬時に戻れる（バックアップの
代わりにもなる）
• 最近ではDreamweaver CS4でも対応されている
• ややシステム寄りのツールではあるが、死ぬほど便
利なのでぜひ覚えて欲しいところ

15. ぜひ覚えて欲しいツール
Subversion（サブバージョン）図解
従来の流れ Subversionを使った流れ
Ａさん Ａさん
①アップロード
①コミット
サーバの ②アップロード サーバの
SVN
aaa.html サーバ aaa.html
②ダウンロード
③更新 ④コミット
③アップロード ⑤アップロード
Bさん Bさん
タイミングによっては、Aさんの修正はBさ 同時に作業を進めても上書きは起こらない。
んによって上書きされてしまう

16. ぜひ覚えて欲しいツール
Subversion Tracとの組み合わせ例

17. まとめ
• プログラマーは、もっとコミュニケーションをしっ
かり取ろう
• ドキュメントを残すようにしよう
• デザイナーは楽する努力をして欲しい
• 困ったことがあったら相談して欲しい
• Subversionのようなツールを活用しよう
• うまく連携して、お互い効率よく仕事進めていきた
い
• IE6は共通の敵なので、共に早く滅ぶことを祈りましょ
う