Styleguide for Web Site Operation

252 views

Published on

This is about Styleguide for Web Site Operation

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
252
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Styleguide for Web Site Operation

  1. 1. コーディング研修 三回目 サイト運用 コーディング研修 早川 稔
  2. 2. 三回目の目的 サイト運用とスタイルガイドについて
  3. 3. • サイト運用 • スタイルガイド • 運用フェーズ アジェンダ
  4. 4. サイト運用
  5. 5. サイト運用 要件定義 制作・運用のフロー 設計 制作 公開 運用 ウォーターフォール型 の場合
  6. 6. サイト運用 運用の体制 多くの人が関わる サイトの役割やデザインテイストを 把握していない人も関わる可能性がある
  7. 7. サイト運用 担当者レベルで運用していくと 運用ルールが無い状態で
  8. 8. • コンセプトのズレ • ディレクトリ構成の不一致 • デザインの統一感がなくなる • ブランドイメージに影響を与える • ユーザビリティ、ファインダビリティの低下 • 同じようなスタイルが作らていく • メンテナンス性が落ちる サイト運用
  9. 9. サイト運用 そうならないためにも
  10. 10. プロジェクトに関わる人全員が
 そのサイトに対する共通認識が必要 サイト運用
  11. 11. スタイルガイド
  12. 12. • デザインやレイアウトの統一 • 制作・運用・管理の効率化 • コードの品質維持 スタイルガイド スタイルガイドの目的
  13. 13. BBC GEL http://www.bbc.co.uk/gel
  14. 14. Mozilla Style Guide https://www.mozilla.org/en-US/styleguide/websites/
  15. 15. Salesforce1 Styleguide http://sfdc-styleguide.herokuapp.com/
  16. 16. http://www.logodesignlove.com/brand-identity-style-guides
  17. 17. • サイト(ブランド)コンセプト • 配色パターン • 使用するフォント • 使用するアイコン • キャッチやバナーのサイズ • モジュールのHTML スタイルガイド 掲載項目例
  18. 18. スタイルガイド サイト(ブランド)コンセプト
  19. 19. スタイルガイド 配色パターン
  20. 20. スタイルガイド 使用するアイコン
  21. 21. スタイルガイド 使用するフォント
  22. 22. スタイルガイド バナー等のサイズ
  23. 23. スタイルガイド HTML モジュール名 表示例 ソースコード
  24. 24. • コンセプトの共通認識 • デザインの一貫性を保つ • 作業効率の上昇 • HTMLを知らない人でもページの作成ができる スタイルガイド 期待される効果
  25. 25. 運用フェーズ
  26. 26. 運用フェーズ 運用フェーズ 更新 改善
  27. 27. 運用フェーズ 更新作業 お知らせなどを更新 コンテンツを追加
  28. 28. 運用フェーズ 改善作業 Plan! Do! Check!Action! 状況を確認施策を検討 施策を計画 施策の実行 目的を達成するための施策
  29. 29. • レイアウト変更 • 既存UIの改修 • 新規UIの追加 運用フェーズ 運用フェーズで起こりうる事
  30. 30. 運用フェーズ 必ずスタイルガイドのアップデートをする 変更や追加した場合
  31. 31. 運用フェーズ 既存サイトとそぐわない内容にならないようにするため アップデートの目的
  32. 32. 運用フェーズ 新規で追加したものや改修したものは
 スタイルガイドに反映させる アップデートを怠ると、スタイルガイドが 作られていないのと同様
  33. 33. • 見つけやすい • 更新され続けること • 実用的であること 良いスタイルガイドの特徴 運用フェーズ
  34. 34. • パーツ単位のスタイルガイド • モジュール一覧のHTML • バナー作成ガイドライン • カラーガイドライン • 文字の大きさガイドライン 既存あるもの 運用フェーズ
  35. 35. • パーツ単位のスタイルガイド • モジュール一覧のHTML • バナー作成ガイドライン • カラーガイドライン • 文字の大きさガイドライン 既存あるもの 運用フェーズ } } コーダー向け デザイナー向け フォーマット:HTML フォーマット:PDF 置き場所:Webサーバー 置き場所:ファイルサーバー
  36. 36. • 置き場所は全員が把握しているか? • 更新性はあるか?または、誰が担当するか明確か? • 実用性があるか? 運用フェーズ
  37. 37. • 一元管理 • 共通の場所に格納する 見つけやすさ 運用フェーズ
  38. 38. • 誰もが更新しやすいようにすることが理想 • 担当者か選任者 更新しやすさ 運用フェーズ
  39. 39. 運用フェーズ Wiki 特別な知識は不要 ログが残る 誰もが更新できる
  40. 40. • プロトタイプが作成できる • グラフィックのアセット • コンポーネントのアセット 実用的にする 運用フェーズ
  41. 41. まとめ
  42. 42. • サイト運用こそ本番 • スタイルガイドも運用の一部 • 品質維持、業務効率のためスタイルガイドの
 更新は忘れずに まとめ 運用フェーズ

×