デザインドキュメンテーションの作り方 by 長谷川 恭久さん
機械学習で 4種類のバナーを作成 - アリババ
Adobe → デザイナーのツール操作を記録している(利用規約に明記)
→ クリエイティブの自動化、AI、Adobe Sensei に生きてくる
啓蒙活動が重要 - 浸透させる努力
活用しなければ、使われない
ドキュメントの種類
工程
運用
ドキュメンテーションに含まれるもの
課程
課題
意図・コンセプト
スペック
デザインドキュメントやってる?(DropboxのTweet)
→現状、ほとんどやってない、あまり重要視されていない
デザインドキュメント
制約や過程の共有
共通言語の活用の場
自分の感覚を説明する機会を作る → 深掘りできる
ムダなぶり返しを防ぐ
なぜこのデザインにしたいのか
何を解決しようとしているのか
トレードオフ、メリット・デメリット
何を決定したら、次の工程に進めるのか
書くこと
何を元にデザインしているのか
仮説
指標
デザイン案 メリット・デメリット・リスク
修正項目
次のアクション
残すことで次の修正の際に生きたり、共有がしやすくなる
リンク
画面
ユーザーコンテキスト
Github や JIRA などの Issue に書いてしまう
プロジェクトや課題によって項目は異なるが
課題は何で、どういう風に解決するのか
かっこいい、見た目の話はデザインに任せればいい
課題解決にフォーカスして議論を集中できるように
デザインの経緯を記録する。頭の中を伝えることができる
めんどくさいけれど、そこまでやらないと今の課題を解決できない
絵文字で装飾すると見やすい
文章の定型化、フォーマット化することで文章化する効率、読む効率を上げる
ドキュメントがあると
運用者が参照できる場所を作ること
実装の経緯・使い方
デザインシステムの基盤ができていく
例:ボタンの実装
コードと見た目だけでなく
使い方や使う場面などについても説明を加える
→ ドキュメントがないと、勝手な解釈でどんどん目立つものが追加されていく
なんとなくではなく、なぜそうしているのか、こういう風に作りましたというドキュメントを残すと伝わりやすい
Ex. Lift の colorBox
線の太さや色の使い方のルール
アイコングリッド → 他の人が作っても見当はずれなものにならない
書き出し形式
書き出しツールの例
ドキュメンテーションを管理していくツール
Jekyll 安定している、Markdownでかける
Frontyfi
でも、
自分が考えたことを、文章化していくことが重要
初めからツールを利用しなくてもいい
一番みんなが見るところに残していくこと
まずは、色のルールを考えてみる
ドキュメンテーションすること
考えていることを明文化
デザイナーの判断を効率化・短縮化する
UI に正解がない場合は多いので判断を
自分たちの考えていること、感覚をしっかり明文化
感覚で伝えようとすると、感覚で返ってくる
伝えることを忘れない
伝えないと意味がない