デザイン依頼時の注意点

自分たちで開発しているWEBサービスのデザイン改修を外部に依頼する場合に参考にしてください。

目的

「デザイン完成後の開発にて実現不可能・実装コストがかさむデザインであることが発覚し、開発遅延」のような問題を防ぐために依頼前に予め自分たち決めておくこと、依頼先にお願いすることなどを纏めたページです。

依頼先へのインプット

デザインを依頼する際は、以下を依頼先に共有してください。

• デザイン対象の表示領域が取りうる状態
  • 例：ヘッダーやサイドバーなど共通レイアウトであれば、ログイン済み/未ログインなどの状態別の表示制御仕様など
  • → 共有しないと、デザイン漏れが発生する
• デザイン改修の理由（システム利用者目線の現行WEBサービスのUIの問題、デザインで重視する箇所/しない箇所）
  • → 共有しないと、デザイナーが意図を汲み取りづらいので、完成イメージにズレが発生する
• デザインガイドライン、使っているUIフレームワーク
  • → 共有しないと、WEBサービス全体で見ると、デザイン改修部分だけ浮いたデザインになる
  • → 共有しないと、デザインの一部が実装不可能になり、デザインを再検討が必要になる可能性がある
  • → 共有しないと、実装で作り込みが発生し、開発コストがかさむ可能性がある
• レスポンシブデザインのモード(PC/Tab/スマホなど)と、パターンごとにブラウザ幅の範囲

デザイン観点

上記インプットと合わせて、以下のようなデザイン観点を伝えてください

• デザインガイドとUIフレームワークになるべく従ったデザインにする
• 想定する全てのブラウザ幅で矛盾のないデザインにする（特に以下のような幅に注意）
  • PCモードの最小幅
  • Tabモードの最大幅
  • Tabモードの最小幅
  • スマホモードの最大幅
  • スマホモードの最小幅
• レスポンシブ観点で配置がわかるようなデザインにする
  • ❌：要素の位置は、左からXXXピクセル、上からYYYピクセル
  • ✅：親要素に対して縦横中央寄せ
• SVGのアイコン
  • 各タグに指定するid属性の値は、納品物一式のSVGファイル間で一意になるようにする
    • 他時期納品物とのid重複が懸念される場合は、全idに重複しないようなプレフィックスをつける
  • 縦横サイズは統一して正方形にする
  • 正方形の枠とアイコンの間に余白を取る
    • アイコンが正方形枠の中央に配置されるように余白を取る
    • 他アイコンと並べた時に、アイコンの大きさが同じくらいになるように余白を取る
  • 有償フォントのテキストを作成する場合は、textタグではなく、pathタグなどで作成する
  • 色をCSSで可変にするために、fill属性とstroke属性には適宜currentColorを指定する
• 画像は、retina用（想定表示サイズの2倍の大きさ）と非retina用の2種類を用意する

成果物のチェックは

• エンジニアも呼んで一緒に成果物をレビューする
• デザインガイドラインとUIフレームワークに従っていないデザインの場合は、実現可否性と実装コスト概算規模算出を開発チームに依頼し、実現不可または実装コスト大であれば、デザインの再検討を依頼する