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

デザインガイド教育セミナー ⓒ 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 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(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

お問い合わせ service@witstudio.net 開発社 http://witstudio.net オンラインサービス http://assistor.jp/ http://twitter.com/Assistor_PS http://www.facebook.com/assistorAPPjapan 関連情報

1. 제안 내용 witstudio.net service@witstudio.net T : +82 (0)2 508 2146 F : +82 (0)2 508 2147 Office : ソウル特別市江南区駅三洞 829-2 Sooyeon Bldg. 4F 連絡先

https://twitter.com	5
http://s.deeeki.com	4
http://www.linkedin.com	1
https://www.linkedin.com	1

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

by witstudio

on May 20, 2014

Statistics

Views

Actions

4 Embeds 11

Accessibility

Categories

Upload Details

Usage Rights

Report content

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