複数名で動くクライアントワークなどでは必須となってくるスタイルガイド。
使用するカラーコード、ロゴデザインの定義、タイポグラフィの装飾などをまとめたものがそれです。継続的にコンテンツが増えていくブログサイトこそ、このスタイルガイドを作っておくと非常に便利です。
- デザインの整合性がとれる
- 新しいコンテンツ（ページ）を作るとき、どんな見た目になるのか分かりやすい
- 定義済みの要素、クラスを把握しやすい（重複したものを作らない）
私が大きくメリットだと感じるのは上記ですが、WordPress の適用テーマを変更するときにも威力を発揮します。
たとえば、テーマやプラグイン独自のショートコードを使っているケース。当然そのテーマやプラグインの使用をやめれば意味のない文字列になりますが、スタイルガイドにそのショートコードを記述しておけば見落としを防げます。
スタイルガイドに含める項目
たとえばこのブログなら、以下のような項目をまとめてスタイルガイドを作っています。
カラーパレット
使用色はいくらか限定した方がまとまりが出ます。メインカラー、サブカラー、アクセントカラーなどをカラーコードも併せてまとめておきます。
タイポグラフィ
見出しやテキストリンク、太字などのインライン要素を段落<p>の入れ子にしておくと、実際にページを作成したときのイメージがしやすくなります。
リスト、テーブル、ボタン
テーブルの中にリストを挿入した場合などの特殊な使い方をするならそれもまとめておくといいです。
画像
キャプションの有無、中央や左右寄せ、回り込みなど全ての表示形式を網羅しておくべきです。レスポンシブデザインであれば、デバイスごとに余白の調整が必要です。
外部サービス
カエレバなどのアフィリエイトリンク生成サービスなど、外部サービスを利用している場合はサンプルを作っておくとバランスの確認が容易です。
ショートコード
自分で定義したものはもちろん、テーマやプラグインのショートコードなど。私は AmazonJS やシンタックスハイライトで使うショートコードを記述しています。
ブログなら実際に更新していくのは記事コンテンツなので、記事本文にスタイルガイドをまとめ、非公開にしておけば他者に公開することなく確認できます。このとき、専用のカテゴリ（例えば「スタイルガイド」）を作って入れておくと、記事が多くても管理画面から絞り込めるのですぐに確認できます。
大人数でのプロジェクトであれば「インデントは半角スペース2つ」などの定義も行いますが、個人ブログであれば頭に入っていると思うので私は省略しています。
スタイルガイドのサンプル
WordPress ユニットテストデータから移植している部分もありますが、HTML サンプルを挙げておきます。基本的な要素のみにしているので、ショートコードの項目などは適宜追加してください。
<h2>見出し２</h2>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<h3>見出し３</h3>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<h4>見出し４</h4>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<h5>見出し５</h5>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<h6>見出し６</h6>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<h2>テーブル</h2>
<table>
<thead>
<tr>
<th>社員</th>
<th>給料</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th><a href="http://example.org/">山田太郎</a></th>
<td>1ドル</td>
<td>スティーブ・ジョブズが必要なサラリーと同じ額。</td>
</tr>
<tr>
<th><a href="http://example.org/">田中花子</a></th>
<td>1,000万円</td>
<td>ブログを書くために必要になる資金。</td>
</tr>
<tr>
<th><a href="http://example.org/">山本次郎</a></th>
<td>1億円</td>
<td>百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。</td>
</tr>
<tr>
<th><a href="http://example.org/">中山愛子</a></th>
<td>10億円</td>
<td>特に理由は要りません。</td>
</tr>
</tbody>
</table>
<h2>リスト</h2>
<h3>非順序リスト</h3>
<ul>
<li>リスト項目 1
<ul>
<li>リスト項目 1
<ul>
<li>リスト項目 1</li>
<li>リスト項目 2</li>
</ul>
</li>
<li>リスト項目 2</li>
<li>リスト項目 3</li>
</ul>
</li>
<li>リスト項目 2</li>
<li>リスト項目 3</li>
</ul>
<h3>順序リスト</h3>
<ol>
<li>リスト項目 1
<ol>
<li>リスト項目 1
<ol>
<li>リスト項目 1</li>
<li>リスト項目 2</li>
</ol>
</li>
<li>リスト項目 2</li>
<li>リスト項目 3</li>
</ol>
</li>
<li>リスト項目 2</li>
<li>リスト項目 3</li>
</ol>
<h3>定義リスト</h3>
<dl>
<dt>定義リストタイトル</dt>
<dd>これは定義リストです。</dd>
<dt>定義</dt>
<dd>物事、領域、何かについての意味の正確な文章や説明: <em>詩を構成するものの定義。</em></dd>
<dt>ギャラリー</dt>
<dd>WordPress 2.5 から導入された、投稿に添付された画像を展示するための機能です。同じように、投稿を編集中にアップロードすると、そのファイルは「投稿に添付」されます。 </dd>
<dt>Gravatar (グラバター)</dt>
<dd>グラバターとはグローバルに認識されるアバター (あるユーザーを表すグラフィックイメージや写真) です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。</dd>
</dl>
<h2>引用</h2>
<p>乳をしぼってつめたいパンをひたしてたべ、それから黒い革のかばんへすこしの書類や雑誌を入れ、靴もきれいにみがき、並木のポプラの影法師を大股にわたって市の役所へ出て行くのでした。</p>
<blockquote>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。<cite>宮沢賢治『ポラーノの広場』</cite></blockquote>
<p>またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。</p>
<h2>その他のタイポグラフィ</h2>
<p><code><b></code> - <b>b要素</b>は、重要性は持たずに他のテキストとは区別する。</p>
<p><code><em></code> - <em>em要素</em>は、強勢（アクセント）をつける。</p>
<p><code><strong></code> - <strong>strong要素</strong>は、強い重要性を表す。</p>
<p><code><u></code> - <u>u要素</u>は下線をつけるが、HTML5では廃止された。</p>
<p><code><a></code> - <a href="#">この要素はテキストリンク。</a></p>
<h2>画像</h2>
<h3>中央寄せ</h3>
<p>画像の配置では、ユーザーが「指定なし」「右寄せ」「左寄せ」「中央揃え」の中から自分の好きなものを選べるようにする必要があります。さらに、「サムネイル」「中サイズ」「大サイズ」「フルサイズ」という選択肢の中から大きさを選べるようにするべきです。</p>
<p style="text-align: center;"><img class="size-full wp-image-906 aligncenter" title="画像配置 580x300" alt="画像配置 580x300" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-580x300.jpg" width="580" height="300" /></p>
<p>上記の画像は<strong>中央寄せ</strong>になるはずです。</p>
<h3>左寄せ</h3>
<img class="size-full wp-image-904 alignleft" title="画像配置 150x150" alt="画像配置 150x150" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-150x150.jpg" width="150" height="150" />
<p>このパラグラフの残り画像を左寄せしたとき、文章が150ピクセルの画像の周りを囲むようになるかどうか見るためのものです。</p>
<p>ご覧のとおり、画像の上・下・右にスペースが空いている事がわかると思います。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です！</p>
<h3>フルサイズ</h3>
<p>次は、<strong>とても大きな画像</strong>のテストです。そして、この画像には<strong>配置の指定がありません</strong>。</p>
<img class="alignnone wp-image-907" title="画像配置 1200x400" alt="画像配置 1200x400" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-1200x4002.jpg" width="1200" height="400" />
<p>上記の画像は1200ピクセルもありますが、コンテンツエリアからはみ出る事はなく収まっています。</p>
<h3>右寄せ</h3>
<img class="size-full wp-image-905 alignright" title="画像配置 300x200" alt="画像配置 300x200" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-300x200.jpg" width="300" height="200" />
<p>そして今後は右寄せに移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください！右側の方にいるあの画像！左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです。</p>
<p>そしてこのへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。</p>
<h3>キャプションつき中央寄せ</h3>
<p>さて、これで終わりと思ったかもしれませんが、これからキャプションのテストに入ります！</p>
<img class="size-full wp-image-906 " title="画像配置 580x300" alt="画像配置 580x300" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-580x300.jpg" width="580" height="300" /> 580x300 画像の<a title="画像設定" href="http://en.support.wordpress.com/images/image-settings/">キャプション</a>例。
<p>上記の画像は<strong>中央寄せ</strong>になるはずです。キャプションにはリンクが含まれていますが、おかしな表示になっていないか確認しましょう。</p>
<h3>キャプションつき左寄せ</h3>
<img class="size-full wp-image-904" title="画像配置 150x150" alt="画像配置 150x150" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-150x150.jpg" width="150" height="150" />ちょっとしたキャプション
<p>このパラグラフの残りの部分は、150x150 サイズの<strong>左寄せ</strong>画像の回り込みをテストするためのつなぎです。</p>
<p>ご覧の通り、画像の上・下・右にスペースが必要です。テキストは画像にこっそりと忍びよってはいません、忍び寄ることは良くない事です。画像だって十分に呼吸ができるスペースが必要なのです。画像が文章にイライラさせられることなく役割を果たせるようにしてあげてください。次の文章では、テキストが画像の右から下へとシームレスに途切れることなく続いている事がわかりますね。これで完了です！</p>
<h3>キャプションつきフルサイズ</h3>
<p>それでは、<strong>とても大きな画像</strong>のテストです。そして、この画像にも<strong>配置の指定はありません</strong>。</p>
<img class=" wp-image-907" title="画像配置 1200x400" alt="画像配置 1200x400" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-1200x4002.jpg" width="1200" height="400" />とても大きな画像のコメント
<p>上記の画像は1200ピクセル幅ですが、コンテンツエリアからはみ出すべきではありません。コンテンツのフローを視覚的に邪魔しないかたちで、指定のエリア内に収まっている必要があります。</p>
<h3>キャプションつき右寄せ</h3>
<img class="size-full wp-image-905 " title="画像配置 300x200" alt="画像配置 300x200" src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-300x200.jpg" width="300" height="200" /> 右側いるのは良い気分です。
<p>そして今後は<strong>右寄せ</strong>画像に移りたいと思います。また今度も、画像の上、下、左に十分な余白があると思います。ほら、あっちにいる彼を見てください ! 右側の方にいるあの画像！左寄せ画像がなんて言うかなんてどうでもいいんです、美しい配置ですよ。他の人の意見なんて気にしないでいいんです。</p>
<p>そしてこのへんでテキストが右寄せの画像の下に回り込んで、ちょうど良い具合に収まっているのが分かると思います。ひきつづきちょうど良い具合にスペースが残されていて、すべてがきれいに表示されているべきです。そうです…。右画像に回り込むのって気持ちいいですね。</p>海外の方ですが、次のポートフォリオが非常に参考になりました。
ただ、やろうと思えばいくらでも細かく整理できてしまうんですよね。そこまでする必要性は感じないので、利用頻度の高いものからやっておけば効率的かと思います。