http://www.yasuhisa.com/could/article/design-system-language/ Webサイトは公開してから本番という言葉を耳にします。これは、コンテンツ運用だけの話だけではなく、デザインにも同様のことが言えます。制作者が関わる運用にはコンテンツとデザインの 2 種類あり、どちらかが欠けていると Web サイトがうまく前へ進まないことになります。運用しやすくするために CMS を実装したり、拡張性が高いHTML/CSS を設計するように、ビジュアルデザインにも個に頼り切らないシステムが必要です。 本セッションではデザインシステムとは何か。なぜ必要なのか。どのように作っていくのかを解説します。自社サービスを運用している企業はもちろん、納品で一旦仕事が終わるプロジェクトでもデザインシステムは強い味方になります。公開後 Web サイトやアプリの見た目が崩れる原因と解決のヒントはココにある！

1. WCAN 2016 WinterDecember 3, 2016 Yasuhisa Hasegawa

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

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

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

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

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

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

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

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

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

11. コードの運用

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

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

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

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

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

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

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

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

25. デ ザ イ ン シ ス テ ム
デザインを明文化
ちゃんと説明しよう

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

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

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

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

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

41. デザインシステム
原則 基本ビジュアル UI コード

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

43. 原則 基本ビジュアル UI コード
コードの書き方が含まれてるガイドライン
デザインシステム

44. 原則 基本ビジュアル UI コード
なぜこの見た目なのか
特定のアプローチを選んだ理由
するべきではない例も紹介されている場合もある

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

46. デザインシステム
明文化
感覚
価値観
要素の名前
ヘッダー？見出し？

47. FoundationBootstrap

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

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

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

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

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

58. #df7300 #e25b00#ed8200#ef7e00 #ee6400

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

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