「レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック」という書籍を2013年に上梓して2年が経ちました。この間、レスポンシブWebデザインも大きく進化しています。中でも、スタイルガイドを利用した制作アプローチは、レスポンシブWebデザインにおける新たな主流となりつつあります。
スタイルガイドとは
スタイルガイドとは、ボタンや見出しといった、Webサイトを構成する部品の集合場所のことです。クライアントを含む案件に関わる全員が参照することで、それぞれのパーツがブラウザー上でどのように表示されるのか、どのように挙動するのかを確認できるようにするものです。デザインパーツや挙動を最終工程で確認する前に関係者間で共有できるのが大きなメリットです。
このほかにも、スタイルガイドには以下のようなメリットがあります。
- 生成されたCSSの集合体は他のページでも動作が可能
- CSSの数は少なくなりメンテンナンスが容易になる
- 共通部品を利用することでデザインに一貫性が持たせられる
ページごとにスタイルを実装するのではなく、スタイルガイドであらかじめ部品を用意することで、共通のCSSを事前に組むことができ、効率的に開発を進められます。
スタイルガイドベースの開発スタイル＝SGDD
SGDDとは、Style Guide Driven Developmentの略で、文字通りスタイルガイドドリブンな開発スタイルのことです。見栄えをまとめただけのスタイルガイドを制作するのではなく、パフォーマンスやメンテナンスなど、開発上考慮する必要がある内容を取り入れてCSSを設計します。
下記のスタイルガイドは、Yahoo!やFacebookでパフォーマンス改善に取り組んだ実績を持つニコール・サリバン氏が設計したものです。簡単なボタンのスタイルガイドですが、SGDDのわかりやすい例なので少し見ていきましょう。
.btnというスタイルは、<button>でも<a>でも適用できるように設計されています。button要素とa要素でCSSを別々に記述していません。
http://styleguide.cfapps.io/css_base_buttons.html
HTML
<button class="btn btn-default">Button</button>
CSS
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: 600;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 8px 20px;
font-size: 16px;
line-height: 1.5;
border-radius: 4px;
user-select: none;}
まず、ボタンのデザインとして利用するdisplayやpaddingなどのレイアウトを中心としたプロパティを定義します。サイト内で共通するボタンのデザインに必要なプロパティをまとめて用意することで、使い回しのきくCSSが作成できます。
.btn-default {
color: #1B78B3;
background-color: white;
border: 1px solid #d4d9d9;
outline: none;
transition: all 300ms ease-out;}
次に、.btnの色を変更するときのスタイルとして.btn-defaultを作成します。レイアウトを指定する.btnに対して、他のボタン関連のスタイルでは色などを設定しています。このように2つのclassを用意することで、ボタンの基本的なデザインの指定を個別に記述する必要がなくなります。
同じ指定を何度も繰り返すのはパフォーマンスへも影響を与えます。特にレイアウトに関連するプロパティはパフォーマンスを低下させるので、.btnにレイアウトに関する指定を集約し、レイアウトには関係のない色などの指定を重ねがけするスタイルで記述しているのです。
classの乱用に注意
SGDDでは、あくまでも基本となるスタイルを定義することが前提になります。これを勘違いして、以下のようにフォントサイズや色を全部class名にしてしまうと、延々とclass名を作成することになります。これでは、単にCSSのセレクターの記述をclass名に置き換えただけで、意味がありません。classだけでムダに指定をしているサイト（俗に「class厨」と呼ばれる）は意外に多くありますので、注意しましょう。
.black-gray{
color:gray;
}
.small{
font-size : 10px ;
}
.bg-blue {
background-color : #0089ff ;
}
.mrg-r-10 {
margin-right : 10px ;
}
あの「Smashing Magazine」創業者に学ぶ！
世界最先端のレスポンシブWebデザイン ワークショップ開催
世界最大級のテックブログ「Smashing Magazine」の創業者であるVitaly Friedman氏による、最先端のレスポンシブWebデザインを学ぶワークショップ「Respond15」が10月24日（土）に開催されます。詳しくは以下のサイトをご覧ください。
