コーダーとデザイナーの溝を埋める、業務改善のタネ
みぞリーグラフィ 水越 佑介

この辺のお話です。

企画・設計

デザイン

コーディング

システム制作
CMS実装

運用

自己紹介
• 水越 佑介（みずこし ゆうすけ）• 北海道・札幌在住• ディレクター、デザイナー、コーダー

CSS Nite 過去の登壇
2012年

2014年

2015年

CSS Nite in SAPPORO, Vol.4

CSS Nite in SAPPORO, Vol.13「Web制作と運営のキホンを学ぶ」

CPI x CSS Nite x 優クリエイト「After Dark」（28）

デザイン

情報設計

デザイン・ディレクション

デザイナーとコーダー
立ち位置を変えながらプロジェクトを進行していますもくじ•

よくある3つの溝•

改善のタネ①：下準備編•

改善のタネ②：コミュニケーション編•

改善のタネ③：「たのもしい」と思われるコーダーになるデザイナー
コーダー
両方を経験することで発見した
みぞよくある3つの溝

よくある3つの溝①「指示どおりやったのに、また修正…」
デザイン通りにコーディングしたはずなのに、なぜか修正が多発…

下準備で解決！

「先に言っておいてほしい…」
よくある

3つの溝

②

なんで最初に聞いたときに言ってくれなかったんですか…？

コミュニケーションで解決！

「デザインに口出しできない」
よくある3つの溝③

ここの余白おかしいけど、きっとデザイナーのこだわりだな…

たのもしいコーダーになって解決！

トホホ …

デザイナーコーダー改善のタネ①

下準備編

改善のタネ①：下準備編

デザインを渡されたら、すぐ着手せず、デザインをじっくりと観察

改善のタネ①：下準備編

写真・シェア NG

改善のタネ①：下準備編

1

写真・シェア NG

2

3

色・フォント

動きそうなところ

画面サイズ＝ビジュアルデザイン＝インタラクション＝レスポンシブ

改善のタネ①：下準備編

デザインデータ
1

2
色・フォント3
動きそうなところ• 同系色で統一できる色はないか• Webフォント使用の有無• 行間（line-height）・字間（letter-spacing）＝ページ間での差異「データの整合性」を確認

画面サイズ

改善のタネ①：下準備編基準となる「ガイドライン」をもらえるとベター

写真・シェア NG

改善のタネ①：下準備編

デザインデータ
1

2
色・フォント3
動きそうなところ

画面サイズ• マウス操作によるデザインの変化（開閉・モーダル）• スクロールアクション（スクロールが到達したら動作）• パララックス（視差効果）の有無＝むずかしそうな実装要件は、事前にきちんとすり合わせる改善のタネ①：下準備編

デザインデータ
1

2
色・フォント3
動きそうなところ

画面サイズ• 文章の改行で問題になりそうなところ• レスポンシブ、スマホ版は幅何pxのデザインデータ？
375px（もしくは、2倍の750px）＝無茶な要件、再現がむずかしいところはないか

改善のタネ①：下準備編

375px

320px

改善のタネ①：下準備編

例外事項

今回は「◯◯」が使えない• 文字コード（UTF-8 で問題ないか）• JavaScript ライブラリの使用制限（jQuery）• サーバー側の制限（.htaccess、インクルードの方法）• CDNが使えない＼コーダーレベルをアップ！ ／コーダーとして下準備編

もう一歩前に進むために下準備編

もう一歩前に進むために＼ ズバリ！ ／上流工程に関わること！
ねえ、上流ってどうなってるの？

下準備編

もう一歩前に進むために• クライアントが望んでいることは？
• プロジェクトのゴールはなにか？
• ペルソナ、カスタマージャーニー（あれば）下準備編

もう一歩前に進むために• 〇〇を売りたい• 〇〇を発信したい• 〇〇を解決したい• 〇〇な会社と思われたい下準備編

もう一歩前に進むためにプロジェクトのゴールを意識する→ デザインの意図を理解する→ 要素が果たす役割を理解する→ 要素のclass名を決めたり、構造を決めるのに役立つ→ 効果測定するための「解析対象」を把握できる

改善のタネ①：下準備編

下準備編のまとめ
デザインデータ

カラー、フォント、リンク色、画像形式、ページ間の差異、画面遷移、インタラクション

レギュレーション

動作環境、CI／VI、各種仕様書、納品方法

例外事項

文字コード、JavaScript ライブラリの制限、サーバー側の制限

プロジェクトの背景

プロジェクトのゴール、デザインの意図、要素の役割、効果測定の解析対象

改善のタネ②

コミュニケーション編

改善のタネ②：コミュニケーション編

企画・設計

デザイン

ビジネス要件・UI要件

コーディング実装

システム制作CMS実装

運用

改善のタネ②：コミュニケーション編

企画・設計

デザイン

ビジネス要件・UI要件

システム制作運用
コーディング
CMS実装

実装

早い段階からビジネス要件をきっちりと理解しておく

改善のタネ②：コミュニケーション編

作業時間の目安を伝える
この実装には半日ほどかかります。
昨日のページより2倍ほど難易度が高いです。
コーダー

難易度が1-5の中で、4くらいです。

改善のタネ②：コミュニケーション編

作業時間の目安を伝える
これ難しいんで結構時間かかります

特にこだわっていないシンプルな要件なのに…

コーダー

デザイナー

あのライブラリを使えば簡単に実装できそう
コーダー

機能が複雑で難易度が高い
デザイナー

作業時間を伝える → お互いに実装コストを把握

改善のタネ②：コミュニケーション編

コミュニケーションで気をつけた方がいいこと

改善のタネ②：コミュニケーション編

完成されたデザインだと思わない• そもそもミスに気づけない• ミスを正しいものだと思いこむ
ミスがあるという前提でデザインをみる（リスペクトの気持ちをもって！）

改善のタネ②：コミュニケーション編

専門用語を程よく使う
難易
Viewport

表示領域

画面の幅

トピックパス

パンくずリスト前に戻れるリンク

カルーセル

スライドショー

紙芝居

フリック

スライド

指で横にやる

改善のタネ②：コミュニケーション編

ふんわりとした指示を受けたときには？
もう一回り大きくしてもらえますか？
画面に収まるようにしてくれますか？
デザイナー

ロゴ変わるんで、直してください。

改善のタネ②：コミュニケーション編

イマイチな例•

大きさを変えるとは、具体的に何pxですか？

•

画面サイズが変わったら、どのように変化しますか？

•

スマホでの表示はどうするか指定してもらえます？

•1pxの影ですか？ボーダーですか？

•対象のページはどのページですか？

コーダー

改善のタネ②：コミュニケーション編

イマイチな例

実際に再現しないとわからない「数値」や「条件」を具体的に聞いてしまう改善のタネ②：コミュニケーション編

良い例

さしあたり変更してみました。
もし違うようであれば、簡単でかまいませんのでイメージを共有してください。

コーダー

改善のタネ②：コミュニケーション編

良い例

デザイナーの得意分野である「デザイン・イメージ」でフィードバック

＼ ワンランク上を目指す！ ／改善のタネ③「たのもしい」と思われる
コーダーになるためのタネ

改善のタネ③：「たのもしい」と思われるコーダーになる

プロジェクトをより良い方向に導くコーダーとは？

改善のタネ③：「たのもしい」と思われるコーダーになる

コーダーの職域を超える＝デザインのことを理解する
ウェブ制作業務を横断する気鋭のツール Adobe XDが、役立ちます！

改善のタネ③：「たのもしい」と思われるコーダーになる

https://www.adobe.com/jp/products/xd.html

改善のタネ③：「たのもしい」と思われるコーダーになる

写真・シェア NG

DEMO

改善のタネ③：「たのもしい」と思われるコーダーになる• 守備範囲を広げ、上流工程に関わる• 曖昧だったデザイン仕様をまとめるのに協力する• いい感じのアニメーションを提案できる• 表示速度の高速化で快適なウェブサイトを構築できる• サイトに付加価値をつけられる

まとめ

3

たのもしいコーダー か条
1. プロジェクトのゴールを理解している
2. デザインを鵜呑みにせず、改善点や展開方法を提案できる
3. ふんわりとした指示には、具体案を返しまくるありがとうございました！