Downloaded 250 times
Uploaded bywitstudio
PPT, PDF57,213 views
デザイン仕様書(ガイド）の書き方 (初歩者用)
デザイン仕様書（ガイド）デザイン仕様書（ガイド）書き方 (初歩者用)http://assistor.jp
Recommended
More Related Content
What's hot
Similar to デザイン仕様書(ガイド）の書き方 (初歩者用)
![[ESM_CM セミナー]小さく作って大いに役立つスマートフォンアプリ(CYCLONE)公開用](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fwithesmsmartphoneapplicationandcyclonecodename1000-111207215903-phpapp01-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![[Slide]DevLOVE_ EMZERO_TORI1「SCD_to_UCD」](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fslidedevloveemzerotoriltucdfromscdver1000-101030005206-phpapp02-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
デザイン仕様書(ガイド）の書き方 (初歩者用)
- 1.デザインガイド教育セミナーⓒ wit studiowitstudio.netSavethe designersVer. 1.0
- 2.目次• デザインガイド？• 開発者との協議•状況を理解する• 業務を理解する
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.デザイン完了！ デザインガイド作成！ 開発完了！事前に打ち合わせ！（設計段階）開発者と、A から Z まで事前にとことん話し合うこと可能な限り、毎回確認（開発社 ( 者 ) ごとに、スタイルは違う！）全てのデータを表記する考えは、捨てること（互いに疲れるだけ）何だ、いいヤツじゃないかデザインガイド ?おすすめのプロセスとは…
- 9.
- 10.
- 11.or同じ要素の位置を表記するとしても、座標、間隔など多様な方法が存在「座標 or 間隔」の確認教育 – 実務に関する知識
- 12.
- 13.画面全体基準( 絶対 座標)コンテンツの領域基準( 相対 座標 )相対座標スタイルの確認教育 – 実務に関する知識
- 14.例：ラジオボタン・コントロールの画像スライスを行うときA スタイル :B スタイル :or教育 – 実務に関する知識画像スライス方法の確認同じ UI コントロールのためのリソースも、開発者のスタイルごとに異なる。イメージリソースをどのように切り取るか事前に協議しなければならない。
- 15.
- 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 ScreenScreenScreen ScreenScreen… …100 100 100XO絶対数値相対数値教育 – 実務に関する知識「絶対数値 VS 相対数値」の確認 1Android のデザインの場合、解像度や比率の変更を常に考慮する必要がある。
- 18.Galaxy Tab GalaxyS4Optimus GNexus 5教育 – 実務に関する知識「絶対数値 VS 相対数値」の確認 2絶対的に変更されないことを要する部分を除いてすべての相対的な数値を表記しなければならない以下のような様々なデバイス環境
- 19.
- 20.
- 21.テキストを画像として処理 テキストを開発者側で処理txt_ex.pngGothamRounded Book28PT#22AF5Dor教育 – 実務に関する知識テキスト処理方法の確認最近では、テキストを画像ファイルで切り取ることは、ほとんどない。テキストを開発側に実装できるようにすべての情報を表記する必要がある。（フォント名、サイズ、カラーコードなど）
- 22.教育 – 実務に関する知識開発者が、Transform(Ctrl+T) のサイズを要求することはよくあるが、Photoshop と各開発環境のテキストレンダリング方法はそれぞれ違うPhotoshop でテキストの Transform(Ctrl+T) のサイズを確認することは、あくまで近似値を得るための努力であり 100% 正確なデータではない！たとえ同じフォント、同じサイズであっても Photoshop のバージョン別にTransform(Ctrl+T) のサイズは違う！ (CS3, CS4, CS5, CS6, CC など )「本当」のテキストデータはない？（ Ctrl + T を信用するな！）
- 23.
- 24.デザイン試案 グラフが最高数値に達したら？（数値表記のガイドが必要）が状態変化教育 –実務に関する知識常に全体を見つめる視野が重要 1（デザインの試案にとらわれるのは危険）例 1 ：グラフ・デザイン
- 25.が状態変化デザイン試案 もし、状況に応じてテキストが長くなったら？（テキストの長さの処理、およびフラグデザインの右マージンに関するガイドが必要）教育 –実務に関する知識常に全体を見つめる視野が重要 2（デザインの試案にとらわれるのは危険）例 2 ：テキスト＆フラグのデザイン
- 26.教育 – 実務に関する知識UIコントロールは、常に全ての状況に応じてデザイン全ての State に応じてデザインをしなければならないこの基本を守らなかったために、最後に苦労することが意外と多い！( 各 State 別に画像として切り取るのか、 Opacity 処理を行うのかデザインによって判断 )
- 27.教育 – 実務に関する知識UIコントロールデザインは、常にモジュール化各ページごとの作業は危険！（管理と修正ができなくなる）デザイン作業はより体系的に、管理もより容易にUI コントロールの基本知識（種類、用語など）の勉強は必須！
- 28.開発適用時、全く違うカラーにPSD 開発画面教育 –実務に関する知識ブレンドモードをきちんと理解する 1ブレンドモードは、下位レイヤーと混合して見える画像を処理する技術きちんと理解して使用することで、画像を切り取るときの失敗を防ぐ！
- 29.
- 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
- 32.
- 33.1. 제안 내용witstudio.netservice@witstudio.netT: +82 (0)2 508 2146F : +82 (0)2 508 2147Office : ソウル特別市 江南区 駅三洞 829-2 Sooyeon Bldg. 4F連絡先
- 34.