作って終わりから卒業しよう - デザインシステム入門編

WCAN 2016 WinterDecember 3, 2016 Yasuhisa Hasegawa

フリーランスデザイナー
デザインプロセス改善や運用の手伝い
ブログ・ポッドキャスト運用中
寄稿・講演多数
著書『Experience Points』ほか
長谷川恭久
@yhassy

Webサイト・アプリは立ち上げてから本番

コンテンツ運用
ブログ
ページ追加・更新
マーケティング
ソーシャルメディア
メール
オートメーション

立ち上げただけでは
誰も
見てくれない
使ってれない
改修
ユーザーフィードバック
A/Bテスト

10の18乗250京
毎日コンテンツが作られる量
Vouchercloud 2015

Business Insider 2016
1分間で起こっていること

Webサイト立ち上げました
アプリリリースしました
話題にならない
見られない
すぐ忘れ去る

常に動き続ける、人のニーズに応える
生き残るための運用体制

コンテンツ運用 CMS コンテンツ戦略
マーケティングマーケティングオートメーション
改修解析・分析 PDCA

スタイルガイド
フロントエンド寄りのガイドライン
HTML/CSS/JavaScript などの記述例
コーディング規約
再現性の高いデザインを実現

緊急時に見た目が大きく崩れる
書いた人がいなくて作れない
書き方がバラバラで整理が難しい
スタイルガイドで制作を効率化

マーケティングコンテンツグロースコード
デザインはどうなっているの？

オープン時運用開始後
良い感じ！なんか違う

雰囲気
印象
選定基準
テキスト
配置

判断基準はデザイナーの頭の中
品質管理をする手段がない
『良い』が共有できていない

デザインに関わる課題
画面全体の構成だけで判断していないか
コンテンツが増えても対応可能か
一貫性のある見た目とルールをもって作られているか

デザインシステム
デザインを明文化

デザインを明文化
ちゃんと説明しよう

Material Design
メタファを大事にする
力強く、グラフィカル、そして意図的
動きで意味を持たせる

画像や色の選び方などのアートディレション
2〜3ヶ月に一度更新されている
事例を見ながらUIデザインが学べる
数値ですべて表現されているので実装しやすい

目的地が3∼5箇所ある
同じくらいの重要度
2カ所以上の頻繁な移動がある

Lightning Design System
あいまいなことは省き明確に表現
効率的に作業ができるように最適化
同じ課題には同じ解決策を提供する
利用者の時間を尊重した見た目

GitHubや npm で公開
3〜4ヶ月に1度更新されている
詳細な解説と実装のコードが満載
関連記事もあり啓蒙ツールになっている

原則基本ビジュアル UI コード

原則
基本ビジュアル
UI
コード
「良いデザイン」の明文化
ニュアンスの共有
色、タイポグラフィ、アイコン
ブランドに直結する要素
ヘッダー、ボタン、メニュー etc
画面を構成する『部品』
見た目を再現するためのコード
バリエーション

コードの書き方が含まれてるガイドライン

なぜこの見た目なのか
特定のアプローチを選んだ理由
するべきではない例も紹介されている場合もある

画面遷移が少ない？
要素が少ない？空白・行間の配慮？

明文化
感覚
価値観
要素の名前
ヘッダー？見出し？

Bootstrap Foundation
CalloutPanel
Carousel Orbit
Label (primary, secondary) Label (no primary
フォームの <label> はどう呼ぶ？

デザインシステムの課題
共有手段提供方法始め方

共有手段
Web上で公開
組織内外の方に対して啓蒙
現存ワークフロー内で公開
同僚がアクセスしやすい場所
GitHub, Conﬂuence, Googleシートなど

提供方法
コード
スタイルガイドを作るツールや共有ツールに任せる
ビジュアルデザイン
デザインテンプレートやアセット共有を活用

タイポグラフィ色アイコン
始め方

#df7300 #e25b00#ed8200#ef7e00 #ee6400

運用が必要なのはデザインも同じ
デザインの『バグフィックス』
価値観やUIを言語化する
小さなところからスタート
まとめ

mail@yasuhisa.com
@yhassy
http://www.yasuhisa.com
社内ワークショップや特別プログラムも実施しています

作って終わりから卒業しよう - デザインシステム入門編