Styleguide for Web Site Operation

コーディング研修三回目 サイト運用

コーディング研修

早川 稔

三回目の目的

サイト運用とスタイルガイドについて

• サイト運用

• スタイルガイド

• 運用フェーズ

アジェンダ

サイト運用

サイト運用

要件定義

制作・運用のフロー

設計

制作

公開

運用

ウォーターフォール型の場合

サイト運用

運用の体制

多くの人が関わる

サイトの役割やデザインテイストを 把握していない人も関わる可能性がある

サイト運用

担当者レベルで運用していくと運用ルールが無い状態で

• コンセプトのズレ

• ディレクトリ構成の不一致

• デザインの統一感がなくなる

• ブランドイメージに影響を与える

• ユーザビリティ、ファインダビリティの低下

• 同じようなスタイルが作らていく

• メンテナンス性が落ちる

サイト運用

サイト運用

そうならないためにも

プロジェクトに関わる人全員が そのサイトに対する共通認識が必要

サイト運用

スタイルガイド

• デザインやレイアウトの統一

• 制作・運用・管理の効率化

• コードの品質維持

スタイルガイド

スタイルガイドの目的

BBC GEL http://www.bbc.co.uk/gel

Mozilla Style Guide https://www.mozilla.org/en-US/styleguide/websites/

Salesforce1 Styleguide http://sfdc-styleguide.herokuapp.com/

http://www.logodesignlove.com/brand-identity-style-guides

• サイト（ブランド）コンセプト

• 配色パターン

• 使用するフォント

• 使用するアイコン

• キャッチやバナーのサイズ

• モジュールのHTML

スタイルガイド

掲載項目例

スタイルガイド

サイト（ブランド）コンセプト

スタイルガイド

配色パターン

スタイルガイド

使用するアイコン

スタイルガイド

使用するフォント

スタイルガイド

バナー等のサイズ

スタイルガイド

HTML

モジュール名

表示例

ソースコード

• コンセプトの共通認識

• デザインの一貫性を保つ

• 作業効率の上昇

• HTMLを知らない人でもページの作成ができる

スタイルガイド

期待される効果

運用フェーズ

運用フェーズ

運用フェーズ

更新 改善

運用フェーズ

更新作業

お知らせなどを更新

コンテンツを追加

運用フェーズ

改善作業

Plan! Do!

Check!Action!

状況を確認 施策を検討

施策を計画 施策の実行

目的を達成するための施策

• レイアウト変更

• 既存UIの改修

• 新規UIの追加

運用フェーズ

運用フェーズで起こりうる事

運用フェーズ

必ずスタイルガイドのアップデートをする

変更や追加した場合

運用フェーズ

既存サイトとそぐわない内容にならないようにするため

アップデートの目的

運用フェーズ

新規で追加したものや改修したものはスタイルガイドに反映させる

アップデートを怠ると、スタイルガイドが作られていないのと同様

• 見つけやすい

• 更新され続けること

• 実用的であること

良いスタイルガイドの特徴

運用フェーズ

• パーツ単位のスタイルガイド

• モジュール一覧のHTML

• バナー作成ガイドライン

• カラーガイドライン

• 文字の大きさガイドライン

既存あるもの

運用フェーズ

• パーツ単位のスタイルガイド

• モジュール一覧のHTML

• バナー作成ガイドライン

• カラーガイドライン

• 文字の大きさガイドライン

既存あるもの

運用フェーズ

}}

コーダー向け

デザイナー向け

フォーマット：HTML

フォーマット：PDF

置き場所：Webサーバー

置き場所：ファイルサーバー

• 置き場所は全員が把握しているか？

• 更新性はあるか？または、誰が担当するか明確か？

• 実用性があるか？

運用フェーズ

• 一元管理

• 共通の場所に格納する

見つけやすさ

運用フェーズ

• 誰もが更新しやすいようにすることが理想

• 担当者か選任者

更新しやすさ

運用フェーズ

運用フェーズ

Wiki

特別な知識は不要

ログが残る

誰もが更新できる

• プロトタイプが作成できる

• グラフィックのアセット

• コンポーネントのアセット

実用的にする

運用フェーズ

まとめ

• サイト運用こそ本番

• スタイルガイドも運用の一部

• 品質維持、業務効率のためスタイルガイドの更新は忘れずに

まとめ

運用フェーズ