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

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

自己紹介

曽川　稔 （ソガワミノル）

■お仕事　Webデザイン、DTP、ディレクションも少々

https://www.facebook.com/minoru.sogawa

でこんなことや

他にも

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

さらに～！！！

もういいです、、、

スミマセン。。。

デザイナーとプログラマーの

仲良し大作戦

デザイナーとプログラマーの

仲良し大作戦

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

とある構築体制と流れ

ディレクター

顧客対応企画・構成進捗管理

デザイナー

UI 設計デザイン画像作成

プログラマー

スライスコーディング環境構築

第二章　すれ違うチーム

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

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

デザインに専念したいの！！コードはお任せします！！

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

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

ここはデザインなの？グリッドずれてるよ！！

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

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

少ない予算だから効率よく制作してくれよ！！

デザイナー プログラマー

第三章　仲直りの秘訣

秘訣　その１

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

・投稿タイプ、固定ページの把握　※記事の表示場所や表示件数、カテゴリの取り決め　　　　

・お客様にどのページを運用してもらうのか？　※運用にあわせた管理画面のカスタマイズ

・プラグイン導入、設定　※スライドショーは何枚？リンクつき？　等

秘訣　その２

プログラマーに渡すスライス用PSDのレイヤーの整理整頓は必ず！！

・WordPress のテーマの php、またはパーツにあわせて、　レイヤーをグループ化する。

・色をつけてわかりやすくする。　　

秘訣　その３

各パーツの配置やスタイルは統一しておくこと！

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

秘訣その4

テキストデータなのか？画像テキストなのか？

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

秘訣　その５

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

プログラマー

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

第四章　お互いを認め合う

ちょっとしたポイントで各担当者を思いやることが、作業効率や、サイト構築のクオリティーの向上へとつながります。

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

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

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

余談ですが・・・

という facebook グループを立ち上げました！！

どしどし参加お願いします！！

Adobe User Group Oita