Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
デザインガイド教育セミナー
ⓒ 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 とは、相対的な数値である。
よって、プロジェクトの...
Screen Screen
Scree
n
Screen Screen Screen
… …
100 100 100
X
O
絶対数値
相対数値
教育 – 実務に関する知識
「絶対数値 VS 相対数値」の確認 1
Android のデザインの場...
Galaxy Tab
   Galaxy S4
Optimus G
Nexus 5
教育 – 実務に関する知識
「絶対数値 VS 相対数値」の確認 2
絶対的に変更されないことを要する部分を除いてすべての相対的な数値を
表記しなければならない以...
背景を
画像ファイルとして具現化
背景を
開発者側で具現化
main_bg.png
#10914D
or
教育 – 実務に関する知識
画像処理の有無確認
グロッシー
マスク
シャドー
X
O
O
教育 – 実務に関する知識
開発側でサポートされている技術を、前もって確認
(プラットフォーム技術の範囲)
開発側でサポートしている技術を事前に確認し、その状況に応じた画像リソースの作成が可
能
業務を...
テキストを画像として処理 テキストを開発者側で処理
txt_ex.png
GothamRounded Book
28 PT
#22AF5D
or
教育 – 実務に関する知識
テキスト処理方法の確認
最近では、テキストを画像ファイルで切り取ること...
教育 – 実務に関する知識
開発者が、 Transform(Ctrl+T) のサイズを要求することはよくあるが、
Photoshop と各開発環境のテキストレンダリング方法はそれぞれ違う
Photoshop でテキストの Transform(C...
教育 – 実務に関する知識
デザイナー業を
理解する
デザイン試案 グラフが最高数値に達したら?
(数値表記のガイドが必要)
が状態
変化
教育 – 実務に関する知識
常に全体を見つめる視野が重要 1
(デザインの試案にとらわれるのは危険)
例 1 :グラフ・デザイン
が状態
変化
デザイン試案 もし、状況に応じてテキストが長くなったら?
(テキストの長さの処理、およびフラグデザインの
右マージンに関するガイドが必要)
教育 – 実務に関する知識
常に全体を見つめる視野が重要 2
(デザインの試案にとらわれる...
教育 – 実務に関する知識
UI コントロールは、
常に全ての状況に応じてデザイン
全ての State に応じてデザインをしなければならない
この基本を守らなかったために、最後に苦労することが意外と多い!
( 各 State 別に画像として切り...
教育 – 実務に関する知識
UI コントロールデザインは、常にモジュール化
各ページごとの作業は危険!(管理と修正ができなくなる)
デザイン作業はより体系的に、管理もより容易に
UI コントロールの基本知識(種類、用語など)の勉強は必須!
開発適用時、全く違うカラーに
PSD 開発画面
教育 – 実務に関する知識
ブレンドモードをきちんと理解する 1
ブレンドモードは、下位レイヤーと混合して見える画像を処理する技術
きちんと理解して使用することで、画像を切り取るときの失敗を防ぐ!
画像スライスは単独で
行われるため、全く
違うカラーで切り取られる
レイヤーにブレンドモードを
適用した状態
教育 – 実務に関する知識
ブレンドモードをきちんと理解する 2
教育 – 実務に関する知識
日々、精進
技術の発展とデザイン業務は、共に変化するもの
だから、関連技術トピックスは常に把握!
UX, UI など学問的な理解も重要だが
実際の業務に必要な、数学的なことに関する理解も非常に重要
(PX, DPI,...
製品紹介 – アシスター PS
デザインガイド専用ツール
assistor.jp
お問い合わせ
service@witstudio.net
開発社
http://witstudio.net
オンラインサービス
http://assistor.jp/
http://twitter.com/Assistor_PS
http://...
1. 제안 내용
witstudio.net
service@witstudio.net
T : +82 (0)2 508 2146
F : +82 (0)2 508 2147
Office : ソウル特別市 江南区 駅三洞 829-2 Soo...
ⓒ wit studio
witstudio.net
blog.witstudio.net
Upcoming SlideShare
Loading in …5
×

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

48,832 views

Published on

デザイン仕様書(ガイド)
デザイン仕様書(ガイド)書き方 (初歩者用)
http://assistor.jp

Published in: Design
  • グラフを題材とした境界値データの見せ方(デザイン)は目からうろこでした。

    業務系(死語)ではウォーターフォール(死語)に従い、画面仕様書(死語)で境界値データの表示方法を定義しておくべきで、それが抜けてたらレビュアーの上司はボーナスC査定ですね。

    このスライドにもある通り、画面仕様書(死語)みたいなガチガチのものを準備するのは不毛ですが、見せるデータの性質【境界値・異常値など】はエンジニア側が詳しいのでこれを観点・議題としてデザイナ⇔エンジニアでディスカッションすることになりますね。エンジニアが想定してた見せ方よりも効果的な見せ方をデザイナが持ってるってザラにあるでしょうし。

    注:(死語)は話し半分に受け取って下さい。お仕事によってはもちろん現役です。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. デザインガイド教育セミナー ⓒ wit studio witstudio.net Save the designers Ver. 1.0
  2. 2. 目次 • デザインガイド? • 開発者との協議 • 状況を理解する • 業務を理解する
  3. 3. 険しい道のり… デザインガイド 必要 ! デザインガイド ?
  4. 4. デザインガイド ? 各要素の数値データ(座標、大きさ、間隔など)、フォントデータ、デザインの意図、画像ファイル(リソース) デザインガイドって?  デザインの最終段階で、「全てのデータとデザインの意図」を伝えるもの。 完成したデザイン作 業 「デザインガイド」文書 ( 例 )
  5. 5. デザイン完了! 開発完了! もしかして、 こんなプロセスを想像していませんか? デザインガイド作成! デザインガイド ?
  6. 6. 現実は、 そう甘くありません。 デザインガイド ? もしかして、 こんなプロセスを想像していませんか? デザイン完了! 開発完了!デザインガイド作成!
  7. 7. 求められる情報は、開発者によって違う 必要な情報も、状況によって違う 結局重複作業は避けられず、時間の無駄! この非効率性こそ、諸悪の根源 あ~もうやっ て られない! 何だこれは? 全然違う! デザインガイド ? もしかして、 こんなプロセスを想像していませんか? デザイン完了! 開発完了!デザインガイド作成!
  8. 8.  デザイン完了! デザインガイド作成! 開発完了!事前に打ち合わせ! (設計段階) 開発者と、 A から Z まで事前にとことん話し合うこと 可能な限り、毎回確認(開発社 ( 者 ) ごとに、スタイルは違う!) 全てのデータを表記する考えは、捨てること(互いに疲れるだけ) 何だ、いいヤツ じゃないか デザインガイド ? おすすめのプロセスとは…
  9. 9. 教育 – 実務に関する知識 考え、そして話し合わなければならない事柄
  10. 10. 開発者を理解する 教育 – 実務に関する知識
  11. 11. or 同じ要素の位置を表記するとしても、座標、間隔など多様な方法が存在 「座標 or 間隔」 の確認 教育 – 実務に関する知識
  12. 12. or 整列表記方法の確認 教育 – 実務に関する知識
  13. 13. 画面全体基準 ( 絶対 座標 ) コンテンツの 領域基準 ( 相対 座標 ) 相対座標スタイルの確認 教育 – 実務に関する知識
  14. 14. 例:ラジオボタン・コントロールの画像スライスを行うとき A スタイル : B スタイル : or 教育 – 実務に関する知識 画像スライス方法の確認 同じ UI コントロールのためのリソースも、開発者のスタイルごとに異なる。 イメージリソースをどのように切り取るか事前に協議しなければならない。
  15. 15. 状況を理解する 教育 – 実務に関する知識
  16. 16. 勘違いその 1 : px(pixel) と pt(point) は、それぞれ違う単位である。 通常、 72dpi で作業するため、同一単位だと勘違いされることが多い。 勘違いその 2 : sp とは、相対的な数値である。 よって、プロジェクトのプラットフォームやデバイスを常にしっかりと認識している必要がある。 dp 値は、解像度に応じて : ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi … sp 値も、解像度に応じて : hdpi での sp 値なのか? xxhdpi での sp 値なのか? 教育 – 実務に関する知識 数値の単位を理解する px, pt, dpi, sp など
  17. 17. Screen Screen Scree n Screen Screen Screen … … 100 100 100 X O 絶対数値 相対数値 教育 – 実務に関する知識 「絶対数値 VS 相対数値」の確認 1 Android のデザインの場合、解像度や比率の変更を常に考慮する必要がある。
  18. 18. Galaxy Tab    Galaxy S4 Optimus G Nexus 5 教育 – 実務に関する知識 「絶対数値 VS 相対数値」の確認 2 絶対的に変更されないことを要する部分を除いてすべての相対的な数値を 表記しなければならない以下のような様々なデバイス環境
  19. 19. 背景を 画像ファイルとして具現化 背景を 開発者側で具現化 main_bg.png #10914D or 教育 – 実務に関する知識 画像処理の有無確認
  20. 20. グロッシー マスク シャドー X O O 教育 – 実務に関する知識 開発側でサポートされている技術を、前もって確認 (プラットフォーム技術の範囲) 開発側でサポートしている技術を事前に確認し、その状況に応じた画像リソースの作成が可 能 業務を始める前に開発側でサポートされている技術を把握する ことで、円滑なデザインガイド作業が可能に
  21. 21. テキストを画像として処理 テキストを開発者側で処理 txt_ex.png GothamRounded Book 28 PT #22AF5D or 教育 – 実務に関する知識 テキスト処理方法の確認 最近では、テキストを画像ファイルで切り取ることは、ほとんどない。 テキストを開発側に実装できるようにすべての情報を表記する必要がある。 (フォント名、サイズ、カラーコードなど)
  22. 22. 教育 – 実務に関する知識 開発者が、 Transform(Ctrl+T) のサイズを要求することはよくあるが、 Photoshop と各開発環境のテキストレンダリング方法はそれぞれ違う Photoshop でテキストの Transform(Ctrl+T) のサイズを確認することは、 あくまで近似値を得るための努力であり 100% 正確なデータではない! たとえ同じフォント、同じサイズであっても Photoshop のバージョン別に Transform(Ctrl+T) のサイズは違う! (CS3, CS4, CS5, CS6, CC など ) 「本当」のテキストデータはない? ( Ctrl + T を信用するな!)
  23. 23. 教育 – 実務に関する知識 デザイナー業を 理解する
  24. 24. デザイン試案 グラフが最高数値に達したら? (数値表記のガイドが必要) が状態 変化 教育 – 実務に関する知識 常に全体を見つめる視野が重要 1 (デザインの試案にとらわれるのは危険) 例 1 :グラフ・デザイン
  25. 25. が状態 変化 デザイン試案 もし、状況に応じてテキストが長くなったら? (テキストの長さの処理、およびフラグデザインの 右マージンに関するガイドが必要) 教育 – 実務に関する知識 常に全体を見つめる視野が重要 2 (デザインの試案にとらわれるのは危険) 例 2 :テキスト&フラグのデザイン
  26. 26. 教育 – 実務に関する知識 UI コントロールは、 常に全ての状況に応じてデザイン 全ての State に応じてデザインをしなければならない この基本を守らなかったために、最後に苦労することが意外と多い! ( 各 State 別に画像として切り取るのか、 Opacity 処理を行うのかデザインによって判断 )
  27. 27. 教育 – 実務に関する知識 UI コントロールデザインは、常にモジュール化 各ページごとの作業は危険!(管理と修正ができなくなる) デザイン作業はより体系的に、管理もより容易に UI コントロールの基本知識(種類、用語など)の勉強は必須!
  28. 28. 開発適用時、全く違うカラーに PSD 開発画面 教育 – 実務に関する知識 ブレンドモードをきちんと理解する 1 ブレンドモードは、下位レイヤーと混合して見える画像を処理する技術 きちんと理解して使用することで、画像を切り取るときの失敗を防ぐ!
  29. 29. 画像スライスは単独で 行われるため、全く 違うカラーで切り取られる レイヤーにブレンドモードを 適用した状態 教育 – 実務に関する知識 ブレンドモードをきちんと理解する 2
  30. 30. 教育 – 実務に関する知識 日々、精進 技術の発展とデザイン業務は、共に変化するもの だから、関連技術トピックスは常に把握! 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/
  31. 31. 製品紹介 – アシスター PS デザインガイド専用ツール assistor.jp
  32. 32. お問い合わせ service@witstudio.net 開発社 http://witstudio.net オンラインサービス http://assistor.jp/ http://twitter.com/Assistor_PS http://www.facebook.com/assistorAPPjapan 関連情報
  33. 33. 1. 제안 내용 witstudio.net service@witstudio.net T : +82 (0)2 508 2146 F : +82 (0)2 508 2147 Office : ソウル特別市 江南区 駅三洞 829-2 Sooyeon Bldg. 4F 連絡先
  34. 34. ⓒ wit studio witstudio.net blog.witstudio.net

×