デザイン仕様書(ガイド）の書き方 (初歩者用)
•Download as PPT, PDF•
218 likes•57,136 views
デザイン仕様書（ガイド） デザイン仕様書（ガイド）書き方 (初歩者用) http://assistor.jp
デザイン仕様書(ガイド）の書き方 (初歩者用)
- 1. デザインガイド教育セミナー ⓒ wit studio witstudio.net Save the designers Ver. 1.0
- 2. 目次 • デザインガイド？ • 開発者との協議 • 状況を理解する • 業務を理解する
- 8. デザイン完了！ デザインガイド作成！ 開発完了！事前に打ち合わせ！ （設計段階） 開発者と、 A から Z まで事前にとことん話し合うこと 可能な限り、毎回確認（開発社 ( 者 ) ごとに、スタイルは違う！） 全てのデータを表記する考えは、捨てること（互いに疲れるだけ） 何だ、いいヤツ じゃないか デザインガイド ? おすすめのプロセスとは…
- 11. or 同じ要素の位置を表記するとしても、座標、間隔など多様な方法が存在 「座標 or 間隔」 の確認 教育 – 実務に関する知識
- 13. 画面全体基準 ( 絶対 座標 ) コンテンツの 領域基準 ( 相対 座標 ) 相対座標スタイルの確認 教育 – 実務に関する知識
- 14. 例：ラジオボタン・コントロールの画像スライスを行うとき A スタイル : B スタイル : or 教育 – 実務に関する知識 画像スライス方法の確認 同じ UI コントロールのためのリソースも、開発者のスタイルごとに異なる。 イメージリソースをどのように切り取るか事前に協議しなければならない。
- 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. Screen Screen Scree n Screen Screen Screen … … 100 100 100 X O 絶対数値 相対数値 教育 – 実務に関する知識 「絶対数値 VS 相対数値」の確認 1 Android のデザインの場合、解像度や比率の変更を常に考慮する必要がある。
- 18. Galaxy Tab Galaxy S4 Optimus G Nexus 5 教育 – 実務に関する知識 「絶対数値 VS 相対数値」の確認 2 絶対的に変更されないことを要する部分を除いてすべての相対的な数値を 表記しなければならない以下のような様々なデバイス環境
- 21. テキストを画像として処理 テキストを開発者側で処理 txt_ex.png GothamRounded Book 28 PT #22AF5D or 教育 – 実務に関する知識 テキスト処理方法の確認 最近では、テキストを画像ファイルで切り取ることは、ほとんどない。 テキストを開発側に実装できるようにすべての情報を表記する必要がある。 （フォント名、サイズ、カラーコードなど）
- 22. 教育 – 実務に関する知識 開発者が、 Transform(Ctrl+T) のサイズを要求することはよくあるが、 Photoshop と各開発環境のテキストレンダリング方法はそれぞれ違う Photoshop でテキストの Transform(Ctrl+T) のサイズを確認することは、 あくまで近似値を得るための努力であり 100% 正確なデータではない！ たとえ同じフォント、同じサイズであっても Photoshop のバージョン別に Transform(Ctrl+T) のサイズは違う！ (CS3, CS4, CS5, CS6, CC など ) 「本当」のテキストデータはない？ （ Ctrl + T を信用するな！）
- 24. デザイン試案 グラフが最高数値に達したら？ （数値表記のガイドが必要） が状態 変化 教育 – 実務に関する知識 常に全体を見つめる視野が重要 1 （デザインの試案にとらわれるのは危険） 例 1 ：グラフ・デザイン
- 25. が状態 変化 デザイン試案 もし、状況に応じてテキストが長くなったら？ （テキストの長さの処理、およびフラグデザインの 右マージンに関するガイドが必要） 教育 – 実務に関する知識 常に全体を見つめる視野が重要 2 （デザインの試案にとらわれるのは危険） 例 2 ：テキスト＆フラグのデザイン
- 26. 教育 – 実務に関する知識 UI コントロールは、 常に全ての状況に応じてデザイン 全ての State に応じてデザインをしなければならない この基本を守らなかったために、最後に苦労することが意外と多い！ ( 各 State 別に画像として切り取るのか、 Opacity 処理を行うのかデザインによって判断 )
- 27. 教育 – 実務に関する知識 UI コントロールデザインは、常にモジュール化 各ページごとの作業は危険！（管理と修正ができなくなる） デザイン作業はより体系的に、管理もより容易に UI コントロールの基本知識（種類、用語など）の勉強は必須！
- 28. 開発適用時、全く違うカラーに PSD 開発画面 教育 – 実務に関する知識 ブレンドモードをきちんと理解する 1 ブレンドモードは、下位レイヤーと混合して見える画像を処理する技術 きちんと理解して使用することで、画像を切り取るときの失敗を防ぐ！
- 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. 製品紹介 – アシスター PS デザインガイド専用ツール assistor.jp
- 33. 1. 제안 내용 witstudio.net [email protected] T : +82 (0)2 508 2146 F : +82 (0)2 508 2147 Office : ソウル特別市 江南区 駅三洞 829-2 Sooyeon Bldg. 4F 連絡先