デザイナー・プログラマーの連携のベストプラクティス

～ プログラマーサイドから ～

LOCAL PHP部

松井　健太郎

自己紹介

• LOCAL PHP部所属

• 株式会社インフィニットループ所属

• 主にケータイサイトの作成を行っています

• 最近ではブラウザゲームを作ったりしています

• ke-tai.org(http://ke-tai.org/)というサイトを運

営しています

LOCAL PHP部の紹介• LOCALは、北海道における技術系地域コミュ

ニティ(ユーザ会、勉強会等)の活動を支援するとともに、コミュニティ間の連携イベント企画開催等を通して、地域を盛り上げていくことを目標とする有志の集まりです。

• その中からPHP使い（ぺちぱー）が集まって勝手に活動しているのがLOCAL PHP部。

• 2008年の11月頃から活動。2ヶ月に1度くらい勉強会を開いている。

• ゆるく長くがモットー。

今日の内容

• なぜデザイナーとプログラマーは仲良くなれないのか

• プログラマー側から考えた問題点→　プログラマーのここが悪い

• デザイナーにひとこと言いたい

• ぜひ覚えて欲しいツール

なぜデザイナーとプログラマーは仲良くなれないのか

• あまり仲の良い関係を見たことがない

• 仲が悪いとまではいかないまでも上手な連携が取れず、ギクシャクしているケースが多い→　お互いの勝手がわからず遠慮し合っている？

• 文化が違う（異文化コミュニケーションの認識が必要）

• お互いが何を考えているかを知りもっとうまく付き合っていきたい

プログラマー側から考えた問題点(1)

プログラマーのココが悪いのでは？

• 技術至上主義

• 日本語を話さない（無駄に技術用語を使う）

• コミュニケーション能力不足（空気が読めない）

• 自己中心的

プログラマー側から考えた問題点(2)

ココを改善したらどうだろう？

• ちゃんと会話しよう、コミュニケーションしよう

• 技術用語はなるべく控えよう、言い換えられる言葉は言い換えて表現しよう

• 自己中な設計はさけよう

• プログラムとデザインは可能な限り分離しよう

• フォルダ構造やファイル名は、しっかり相談して決めよう

• 長期間メンテを行うのはデザイナー側のケースが多い（日々の更新、デザイン変更など）

• プログラマ側は特にどんな構造でも支障がないはず

プログラマー側から考えた問題点(3)

ココを改善したらどうだろう？

• コミュニケーション能力不足を補うために、ドキュメントをしっかり作ろう

• メモ書き程度でもいいので、残して伝えることが重要

• フォルダ構造、ファイル名とその機能の説明

• 設置の手順メモ（主にサーバ移転などで使用）

• 変更の際、どこを直せばよいのかの説明

例：デザインを変更したい場合、どのファイルを直せばよいのか

　：プルダウンに選択肢を追加したい場合、どうやったら追加できるのか

　：ここから先はプログラムに変更が必要

　

デザイナーにひとこと言いたい(1)

• 楽する努力をしっかりして欲しい！！

• それホントに全部手でやるの？（例えばメニューの共通化をしない）

• 作業環境はちゃんと作ろう。FTPで手アップとか辛くないの？

• どんな情報が欲しいのか、ちゃんと伝えて欲しい。

• PHPの構文　<?php ～　?>は壊さないで

• Smartyの構文　{ ～ }は壊さないで

• テンプレート内の条件分岐（if文）、繰り返し(for文)くらいは覚えて欲しい

• JavaScriptはある程度でよいので覚えて欲しい、JQueryなどはもはや完全にデザイナーの領域

デザイナーにひとこと言いたい(2)これだけは覚えて欲しい

おまけ：マネージャーにひとこと言いたい

• 作業時間に余裕を！！時間に余裕がないと、取れるコミュニケーションも取れません　＞＜

• デザインとプログラムのスケジュールは完全平行扱いしないで！！

月 火 水 木 金

デザイナープログラマー

デザインデザインデザインデザイン開発開発開発開発

納納納納品品品品

無理！！

ぜひ覚えて欲しいツールSubversion（サブバージョン）

• バージョン管理システム（履歴管理システム）

• SVNと呼ばれたりもする

• 多人数でファイルを共有・更新できる

• 「これから○○○.htmlをいじるので触らないで！」などの連絡が不要になる

• 好きな時点の構成に瞬時に戻れる（バックアップの代わりにもなる）

• 最近ではDreamweaver CS4でも対応されている

• ややシステム寄りのツールではあるが、死ぬほど便利なのでぜひ覚えて欲しいところ

ぜひ覚えて欲しいツールSubversion（サブバージョン）図解

Ａさん

Bさん

サーバの

aaa.html

①アップロード

③アップロード

②ダウンロード

従来の流れ Subversionを使った流れ

Ａさん

Bさん

サーバの

aaa.html

①コミット

③更新

SVN

サーバ

②アップロード

④コミット⑤アップロード

タイミングによっては、Aさんの修正はBさんによって上書きされてしまう

同時に作業を進めても上書きは起こらない。

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

まとめ

• プログラマーは、もっとコミュニケーションをしっかり取ろう

• ドキュメントを残すようにしよう

• デザイナーは楽する努力をして欲しい

• 困ったことがあったら相談して欲しい

• Subversionのようなツールを活用しよう

• うまく連携して、お互い効率よく仕事進めていきたい

• IE6は共通の敵なので、共に早く滅ぶことを祈りましょう