デザイン仕様書(ガイド）の書き方 (初歩者用)

デザインガイド教育セミナー

ⓒ wit studio

witstudio.net

Save the designers

Ver. 1.0

目次

• デザインガイド？

• 開発者との協議

• 状況を理解する

• 業務を理解する

険しい道のり…

デザインガイド必要 !

デザインガイド ?


各要素の数値データ（座標、大きさ、間隔など）、フォントデータ、デザインの意図、画像ファイル（リソース）

デザインガイドって？　デザインの最終段階で、「全てのデータとデザインの意図」を伝えるもの。

完成したデザイン作業

「デザインガイド」文書 ( 例 )

デザイン完了！開発完了！

もしかして、こんなプロセスを想像していませんか？

デザインガイド作成！


現実は、そう甘くありません。



デザイン完了！開発完了！デザインガイド作成！

求められる情報は、開発者によって違う必要な情報も、状況によって違う

結局重複作業は避けられず、時間の無駄！この非効率性こそ、諸悪の根源

あ～もうやっ

てられない！

何だこれは？全然違う！



デザイン完了！開発完了！デザインガイド作成！

　デザイン完了！デザインガイド作成！開発完了！事前に打ち合わせ！（設計段階）

開発者と、 A から Z まで事前にとことん話し合うこと可能な限り、毎回確認（開発社 ( 者 ) ごとに、スタイルは違う！）

全てのデータを表記する考えは、捨てること（互いに疲れるだけ）

何だ、いいヤツ

じゃないか


おすすめのプロセスとは…

教育 – 実務に関する知識

考え、そして話し合わなければならない事柄

開発者を理解する


or

同じ要素の位置を表記するとしても、座標、間隔など多様な方法が存在

「座標 or 間隔」の確認


or

整列表記方法の確認


画面全体基準( 絶対座標 )

コンテンツの領域基準( 相対座標 )

相対座標スタイルの確認


例：ラジオボタン・コントロールの画像スライスを行うとき

A スタイル : B スタイル :or


画像スライス方法の確認同じ UI コントロールのためのリソースも、開発者のスタイルごとに異なる。イメージリソースをどのように切り取るか事前に協議しなければならない。

状況を理解する


勘違いその 1 ：

px(pixel) と pt(point) は、それぞれ違う単位である。通常、 72dpi で作業するため、同一単位だと勘違いされることが多い。

勘違いその 2 ：

sp とは、相対的な数値である。よって、プロジェクトのプラットフォームやデバイスを常にしっかりと認識している必要がある。

dp 値は、解像度に応じて : ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi …sp 値も、解像度に応じて : hdpi での sp 値なのか？ xxhdpi での sp 値なのか？


数値の単位を理解する

px, pt, dpi, sp など

Screen ScreenScree

nScreen Screen Screen… …

100 100 100

X

O

絶対数値

相対数値


「絶対数値 VS 相対数値」の確認 1Android のデザインの場合、解像度や比率の変更を常に考慮する必要がある。

Galaxy Tab

　　 Galaxy S4

Optimus G

Nexus 5


「絶対数値 VS 相対数値」の確認 2絶対的に変更されないことを要する部分を除いてすべての相対的な数値を

表記しなければならない以下のような様々なデバイス環境

背景を画像ファイルとして具現化

背景を開発者側で具現化

main_bg.png

#10914Dor


画像処理の有無確認

グロッシーマスクシャドー

X

O

O


開発側でサポートされている技術を、前もって確認（プラットフォーム技術の範囲）

開発側でサポートしている技術を事前に確認し、その状況に応じた画像リソースの作成が可能

業務を始める前に開発側でサポートされている技術を把握することで、円滑なデザインガイド作業が可能に

テキストを画像として処理テキストを開発者側で処理

txt_ex.png

GothamRounded Book

28 PT

#22AF5D

or


テキスト処理方法の確認最近では、テキストを画像ファイルで切り取ることは、ほとんどない。

テキストを開発側に実装できるようにすべての情報を表記する必要がある。（フォント名、サイズ、カラーコードなど）


開発者が、 Transform(Ctrl+T) のサイズを要求することはよくあるが、Photoshop と各開発環境のテキストレンダリング方法はそれぞれ違う

Photoshop でテキストの Transform(Ctrl+T) のサイズを確認することは、あくまで近似値を得るための努力であり 100%正確なデータではない！

たとえ同じフォント、同じサイズであっても Photoshop のバージョン別にTransform(Ctrl+T) のサイズは違う！ (CS3, CS4, CS5, CS6, CC など )

「本当」のテキストデータはない？（ Ctrl + T を信用するな！）


デザイナー業を理解する

デザイン試案グラフが最高数値に達したら？（数値表記のガイドが必要）

状態が変化


常に全体を見つめる視野が重要 1（デザインの試案にとらわれるのは危険）

例 1 ：グラフ・デザイン

状態が変化

デザイン試案もし、状況に応じてテキストが長くなったら？（テキストの長さの処理、およびフラグデザインの

右マージンに関するガイドが必要）


常に全体を見つめる視野が重要 2（デザインの試案にとらわれるのは危険）

例 2 ：テキスト＆フラグのデザイン


UI コントロールは、常に全ての状況に応じてデザイン

全ての State に応じてデザインをしなければならないこの基本を守らなかったために、最後に苦労することが意外と多い！

( 各 State別に画像として切り取るのか、 Opacity 処理を行うのかデザインによって判断 )


UI コントロールデザインは、常にモジュール化各ページごとの作業は危険！（管理と修正ができなくなる）

デザイン作業はより体系的に、管理もより容易にUI コントロールの基本知識（種類、用語など）の勉強は必須！

開発適用時、全く違うカラーに

PSD 開発画面


ブレンドモードをきちんと理解する 1ブレンドモードは、下位レイヤーと混合して見える画像を処理する技術きちんと理解して使用することで、画像を切り取るときの失敗を防ぐ！

画像スライスは単独で行われるため、全く違うカラーで切り取られる

レイヤーにブレンドモードを適用した状態


ブレンドモードをきちんと理解する 2


日々、精進技術の発展とデザイン業務は、共に変化するもの

だから、関連技術トピックスは常に把握！

UX, UI など学問的な理解も重要だが実際の業務に必要な、数学的なことに関する理解も非常に重要

(PX, DPI, SP など、各単位に関する理解 )

論理的な思考を身につけるため、日々努力しよう！

参考にするのに良いサイト紹介

公式サイト、英文アンドロイド開発、アンドロイドの設計原則 : Android Developers > Design Principles

アップルの iOS 開発ライブラリ : iOS Human Interface Guidelines > Designing for iOS 7

関連ブログ、英文iOS ガイドサイト : http://iosguides.net/

The iOS Design Cheat Sheet : http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/

製品紹介 – アシスター PS

デザインガイド専用ツールassistor.jp

お問い合わせ[email protected]

開発社http://witstudio.net

オンラインサービスhttp://assistor.jp/

http://twitter.com/Assistor_PS

http://www.facebook.com/assistorAPPjapan

関連情報

1. 제안 내용

[email protected]

T : +82 (0)2 508 2146F : +82 (0)2 508 2147 Office : ソウル特別市江南区駅三洞 829-2 Sooyeon Bldg. 4F

連絡先