StyleGuideを活用しよう

Publish2014/03/04(火)

今回はサイト運用をよりクオリティの高い状態で維持させつつ、作業効率の向上も行える可能性をもつ「StyleGuide」について説明します。

  1. StyleGuideとは
  2. StyleGuideを使用するメリット
  3. StyleGuideをテストに使用する
  4. StyleGuideを作るの便利なStyle Guide Boilerplate

StyleGuideとは

サイトやブログを運用する上で、「デザインの一貫性を保つ」事は、サイト全体のクオリティの維持やスタイルの整合性を保つ上で非常に重要です。
ですが、運用を続けていくと、作成した人しかそのルールを知らなかったり、その都度担当者さんがCSSを追加して対応したりして、色々と大変な事になってくるものです。
そうなってしまうと、元に戻すのが非常に大変かつ厄介な作業になり、時間的なコストを考えると手が出せないものにまで最悪なってしまう危険性があります。
そこで重要なのが、運用する人たちでドキュメントを共有し、それを元に運用を進めていくスタイルです。
その中核をになうドキュメントこそが「StyleGuide」です。

StyleGuideを使用するメリット

Styleguideを使用する事で、作業者のスキルや感性によるスタイリングを行う事が減り、デザインの一貫性を保つ事が期待できます。
また、ルールが比較的厳密に決まるので、ルーチンワークとして通常業務の一環として取り入れる事も出来るので、「慣れ」による作業効率の上昇とそれによる作業スピードの向上も期待できます。
仮に退職者が出た場合でも、後任のスタッフでも前任者と同様のクオリティを持って対応できるようになるというメリットもあるかと思います。(もちろん後任者へのスキルアップの指導を考慮してです。)

StyleGuideをテストに使用する

さて、そのドキュメント自体はサイトを制作する制作者で作るわけですが、制作者としてもStyleGuideを使用するメリットはあります。
それは、昨今のワークフローの変化によってこれまでの仕事の領域とスタイルが変化しているので、これまでのように画像で作成したデザインカンプのみで対応していくのが厳しい状況にあります。
インブラウザデザインであったり、モックアップを利用した「まず動くものから作る」というようなこれまでになかったやり方に仕事をあわせていく必要もありますが、その際に活用できるのがStyleGuideです。
これまでのように個別のページごとにデザインカンプを作成するより早く、共通要素のスタイルをStyleGuideで作成し、お客さんに確認してもらうためのものとして使用すれば、全体の開発速度はかなり向上すると思います。
発注側としても、開発速度が向上すればリリースまでの時間も短縮できるわけで、流れの速い今の時代にあったスピード感で対応できるようになるというメリットがあります。
今後はStyleGuideを活用し、より早くリリース、その後に改善を行ってサイトのクオリティをあげていくというようなスタイルが一般化するかもしれません。
最近僕も制作をする時はそんな感じでカンプを必要最小限にとどめ、より早くリリースできるようにという事を心がけていたりもします。

StyleGuideを作るの便利なStyle Guide Boilerplate

これだけ書いたので、使用するメリットは十分に感じていただけたかと思いますが、とはいえこれまでやった事がない事にいきなりチャレンジするのは腰が引けるものです。
世の中にはstyledoccoとかkaleistyleguideとか便利なものがたくさんあるのですが、これらは使うのにコマンドを入力したりする必要があったりするので、なかなか難しいのが現実です。
制作者であればそのくらいはやってもいいんじゃないのかとも個人的には思いますが、運用される方にそこまで突っ込んでもらうというのも難しい話なので、とっかかりとしてStyle Guide Boilerplateを使用してはいかがでしょうか。
Style Guide Boilerplateはzipファイルを落としてきて、中によく使用する要素があるのでそれをコピペして、あとはサイトで使用する固有のクラス等を追加してやれば基本的な部分をかなり簡単に作成する事が出来ます。
Style Guide Boilerplateを利用して作成したページを確認しながら修正し、リリース後もそのページを活用して運用できるので、リリース後のマニュアル作成の手間も省けます。
また、変更時にはまずStyleGuideのページを変更して確認を取り、本番環境に反映させていくという事も可能です。
この場合は、さらのStyleGuideが「生きたドキュメント」となり、運用の中心的な存在になってきます。
作業効率も向上しますし、運用側のメリットもかなり大きいと思うので、まずはやってみてはいかがでしょうか。

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、サポートやWebサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を平日毎日更新中。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
また、不定期で大阪を中心にWeb運用やブログなどをテーマにしたイベント「ふにセミWS」を開催しています。
サイトの運用や活用にお困りの方はお気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

About

ふにろぐとは?

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにすのお仕事

このブログを書いている「でぐち」がしている「ふにす株式会社」は大阪と京都の間にある高槻という街で、Webの運用サポートを中心に活動しています。
Webサイトの制作とかもしてますが、ブログを続けるためのサポートとか、会社をどうやってPRすればいいんだろうとか、そういうふわっとした事を相談してください。
どういう内容を相談できるのかをまとめましたので、参考にしていただければと思います。

ふにすにはどんな仕事が頼めるの?

ふにすWeb相談所

ソーシャルとか。

NewEntry

PickUP

Webサイトの運用に関する情報

ふにろぐで取り上げたWebサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Category

Month