Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

http://www.yasuhisa.com/could/article/design-system-language/

Webサイトは公開してから本番という言葉を耳にします。これは、コンテンツ運用だけの話だけではなく、デザインにも同様のことが言えます。制作者が関わる運用にはコンテンツとデザインの 2 種類あり、どちらかが欠けていると Web サイトがうまく前へ進まないことになります。運用しやすくするために CMS を実装したり、拡張性が高いHTML/CSS を設計するように、ビジュアルデザインにも個に頼り切らないシステムが必要です。

本セッションではデザインシステムとは何か。なぜ必要なのか。どのように作っていくのかを解説します。自社サービスを運用している企業はもちろん、納品で一旦仕事が終わるプロジェクトでもデザインシステムは強い味方になります。公開後 Web サイトやアプリの見た目が崩れる原因と解決のヒントはココにある!

  • Be the first to comment

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

  1. 1. WCAN 2016 WinterDecember 3, 2016 Yasuhisa Hasegawa
  2. 2. フリーランスデザイナー デザインプロセス改善や運用の手伝い ブログ・ポッドキャスト運用中 寄稿・講演多数 著書『Experience Points』ほか 長谷川恭久 @yhassy
  3. 3. Webサイト・アプリは立ち上げてから本番
  4. 4. コンテンツ運用 ブログ ページ追加・更新 マーケティング ソーシャルメディア メール オートメーション
  5. 5. 立ち上げただけでは 誰も 見てくれない 使ってれない 改修 ユーザーフィードバック A/Bテスト
  6. 6. 10の18乗250京 毎日コンテンツが作られる量 Vouchercloud 2015
  7. 7. Business Insider 2016 1分間で起こっていること
  8. 8. Webサイト立ち上げました アプリリリースしました 話題にならない 見られない すぐ忘れ去る
  9. 9. 常に動き続ける、人のニーズに応える 生き残るための運用体制
  10. 10. コンテンツ運用 CMS コンテンツ戦略 マーケティング マーケティングオートメーション 改修 解析・分析 PDCA
  11. 11. コードの運用
  12. 12. スタイルガイド フロントエンド寄りのガイドライン HTML/CSS/JavaScript などの記述例 コーディング規約 再現性の高いデザインを実現
  13. 13. 緊急時に見た目が大きく崩れる 書いた人がいなくて作れない 書き方がバラバラで整理が難しい スタイルガイドで制作を効率化
  14. 14. マーケティングコンテンツ グロース コード デザインはどうなっているの?
  15. 15. オープン時 運用開始後 良い感じ! なんか違う
  16. 16. 雰囲気 印象 選定基準 テキスト 配置
  17. 17. 判断基準はデザイナーの頭の中 品質管理をする手段がない 『良い』が共有できていない
  18. 18. デザインに関わる課題 画面全体の構成だけで判断していないか コンテンツが増えても対応可能か 一貫性のある見た目とルールをもって作られているか
  19. 19. デ ザ イ ン シ ス テ ム デザインを明文化
  20. 20. デ ザ イ ン シ ス テ ム デザインを明文化 ちゃんと説明しよう
  21. 21. Material Design メタファを大事にする 力強く、グラフィカル、そして意図的 動きで意味を持たせる
  22. 22. 画像や色の選び方などのアートディレション 2〜3ヶ月に一度更新されている 事例を見ながらUIデザインが学べる 数値ですべて表現されているので実装しやすい
  23. 23. 目的地が3∼5箇所ある 同じくらいの重要度 2カ所以上の頻繁な移動がある
  24. 24. Lightning Design System あいまいなことは省き明確に表現 効率的に作業ができるように最適化 同じ課題には同じ解決策を提供する 利用者の時間を尊重した見た目
  25. 25. GitHubや npm で公開 3〜4ヶ月に1度更新されている 詳細な解説と実装のコードが満載 関連記事もあり啓蒙ツールになっている
  26. 26. デザインシステム 原則 基本ビジュアル UI コード
  27. 27. 原則 基本ビジュアル UI コード 「良いデザイン」の明文化 ニュアンスの共有 色、タイポグラフィ、アイコン ブランドに直結する要素 ヘッダー、ボタン、メニュー etc 画面を構成する『部品』 見た目を再現するためのコード バリエーション
  28. 28. 原則 基本ビジュアル UI コード コードの書き方が含まれてるガイドライン デザインシステム
  29. 29. 原則 基本ビジュアル UI コード なぜこの見た目なのか 特定のアプローチを選んだ理由 するべきではない例も紹介されている場合もある
  30. 30. 画面遷移が少ない? 要素が少ない? 空白・行間の配慮?
  31. 31. デザインシステム 明文化 感覚 価値観 要素の名前 ヘッダー?見出し?
  32. 32. FoundationBootstrap
  33. 33. Bootstrap Foundation CalloutPanel Carousel Orbit Label (primary, secondary) Label (no primary フォームの <label> はどう呼ぶ?
  34. 34. デザインシステムの課題 共有手段 提供方法 始め方
  35. 35. 共有手段 Web上で公開 組織内外の方に対して啓蒙 現存ワークフロー内で公開 同僚がアクセスしやすい場所 GitHub, Confluence, Googleシートなど
  36. 36. 提供方法 コード スタイルガイドを作るツールや共有ツールに任せる ビジュアルデザイン デザインテンプレートやアセット共有を活用
  37. 37. タイポグラフィ 色 アイコン 始め方
  38. 38. #df7300 #e25b00#ed8200#ef7e00 #ee6400
  39. 39. 運用が必要なのはデザインも同じ デザインの『バグフィックス』 価値観やUIを言語化する 小さなところからスタート まとめ
  40. 40. mail@yasuhisa.com @yhassy http://www.yasuhisa.com 社内ワークショップや特別プログラムも実施しています

×