スタイルタイル

webデザインの方針を決定するもの。フォントや色味などを用いてクライアントとデザイナーが、デザインのイメージを共有するためのツール。スタイルタイルを見ながら議論をすることで、デザイナーとクライアントが最終的なデザインに対して共通認識を持てる。Samantha Warrenサマンサ・ウォーレンが提唱した。

スタイルタイルは、ペイントチップや布地見本と同じ効果を発揮する。ペイントチップ・布地見本とは、インテリアデザイナーが部屋を設計する際にクライアントから色や素材の希望を確認するために利用するサンプルである。インテリアデザイナーは、ペイントチップや布地見本を用いて、クライアントと合意形成を行う。

段階的に色味を表現するペイントチップ

クライアントからデザイン案の承認を得るために、モックアップを複数用意すると工数が多くなり、手戻りによる修正リスクも大きい。スタイルタイルを用いてインターフェースの各要素（色やフォントなど）を決定することで手戻りが最小限に抑えられ、少ない工数でクライアントからデザインに関して承認を得られる。

スタイルタイルで使用する色やコンテンツのイメージを固めていく

提唱者のサマンサ・ウォーレン

最大のメリットは「共通認識を形成しやすくなる」こと

言葉で表現しづらい情報をビジュアル化するムードボードでは、クライアントが具体的な成果物をイメージできないこともある。完成品を見本として表現するカンプでは、成果物が具体的すぎて他のコンテンツや要素をイメージできない。スタイルタイルは、ムードボードやカンプで表現しづらい情報を補うことができる。

スタイルタイルの特徴はレイアウトを定義しないことである。レイアウトを定義しないことで、ページ単位でイメージを共有するのではなく、サイト全体のイメージを共有することができる。

スタイルタイルとスタイルガイドの比較

スタイルタイルと似たものに、スタイルガイドがある。一見同じように思えるが、明確な違いがある。スタイルタイルとスタイルガイドは以下の点で異なる。

デザインプロセスにおいて利用するタイミング
共通認識を作る相手
必要とする作業量

デザインプロセスにおいて利用するタイミング

スタイルタイル	スタイルガイド
デザインプロセスの初期段階のみ	デザインプロセスの全ての段階

スタイルタイルを利用するタイミングは、クライアントから意見をヒアリングする段階、つまりデザインプロセスの初期段階である。スタイルタイルを用いて、クライアントから承認をもらった時点でスタイルタイルの役目は終わる。

スタイルガイドを利用するタイミングは、デザインプロセス全ての段階である。webサイト全体の色味を決定したり、フォーム要素のサンプルを表現する。スタイルガイドは、デザインの作成が完了した後でもスタイルガイドを利用する。チームに新たなメンバーが参加した際に共有したり、新しい画面を作る際の参考として利用する。

共通認識を作る相手

スタイルタイル	スタイルガイド
クライアント	デザインチームや開発チーム

スタイルタイルは、クライアントとデザイナーが同じ成果物をイメージするために利用する。クライアントがwebサイトの全体をイメージできれば問題ないため、入力欄やボタンなど細かい要素を盛り込む必要はない。

スタイルガイドは、デザインに関わるチーム全員とデザインの共通認識を作るために利用する。デザイナーがエンジニアに実装イメージを伝えるために利用したり、デザイナー同士が制作する成果物に統一感を出すために利用する。

必要とする作業量

スタイルタイル	スタイルガイド
少ない	多い

スタイルタイルの作業量はとても少ない。スタイルタイルを２、３種類作成して、クライアントの意見を明確にしていく。クライアントからデザインに対して承認が取れた時点で不要になるため、メンテナンスする必要がない。

スタイルガイドは、細かな要素まで表現する必要があるため作業量が多い。制作物が出来上がった後も資料として残しておき、必要に応じて更新・修正する。

ケースバイケースで使い分ける

「スタイルタイルと、スタイルガイドのどちらを使えば良いのか？」と気になるだろう。結論としては「ケースバイケースで使い分ける」である。

小規模なチームや小規模なwebサイトであれば、スタイルガイドを細かく作り込む必要はあまりない。コミュニケーションをきちんと取れば、お互いに認識がずれる可能性は低い。小規模の場合に置いては、スタイルガイドの制作に時間をかけていても費用対効果が悪い。

大規模なチームや他部署と連携しながら作業を進める場合は、ページ全体で統一感を出すために、スタイルガイドを整備した方が好ましい。新たなページをデザインする際に、有識者がいない状態で始まる可能性もあるため、デザインガイドを整備しておくと立ち上がりが早くなる。自分たちのチーム構成や業務内容に応じて、スタイルタイルとスタイルガイドを使い分ける。

スタイルタイルの作成方法

スタイルタイルは、従来のビジュアルデザインのプロセスに組み込んで利用する。作成方法は以下の4ステップで行う。

顧客の意見を聞く
顧客の意見を分析する
意見を視覚化する
反復する

1. 顧客の意見を聞く

クライアントのデザインに対する意見や希望を聞く。既にデザインのイメージを持っていたり、希望する方向性を思い描いている可能性があるため、クライアントから意見を聞くことは重要である。

クライアントから意見を聞くために、デザインのキックオフミーティングを主催したり、プロジェクト会議に参加する。必要であれば、会議前にクライアントにいくつか質問をして、事前に意見を聞き出しておく。

2. 顧客の意見を分析する

クライアントから得た意見を分析する。分析する際は、形容詞などの印象や雰囲気を表す言葉に着目する。

例えば、クライアントから以下の意見が出てきたとする。

「食品を扱うため、新鮮さを打ち出したい」
「他の企業よりも高品質である」
「やはり自然のイメージは捨てがたい」

分析する際は、「新鮮さ」「高品質」「自然な」等の言葉を抽出する。

抽出した言葉を、強調や統一感などのデザイン原則にどうやって落とし込むか検討する。顧客の意見をデザイン原則に落とし込むことで、線や色、形などのデザイン要素をどのように作り、どのように利用すべきか判断しやすくなる。

3. 意見を視覚化する

スタイルタイルを作成する。デザイナーとクライアントが同じスタイルタイルを見ることで、クライアントの意見とデザイナーの解釈が一致しているか判断できる。

UI/UXデザイナーのAbdus Salam（アブドゥ・サラーム）が制作したスタイルタイル。左下に顧客の意見から抽出した言葉を記載している。

4. 反復する

クライアントからスタイルタイルに対してフィードバックをもらう。フィードバックをスタイルタイルに反映して改めてクライアントから意見をもらう。この様に、フィードバックと反映のプロセスは何度も繰り返し行なう。

クライアントからフィードバックをもらう際には、すでに見せたスタイルタイルを一緒に見せると効果的である。以前のバージョンと比較してもらうことで、クライアントからより明確な意見をもらえる可能性が高くなる。

レスポンシブウェブデザインに役立つスタイルタイル

レスポンシブウェブデザインは、デバイス幅に応じてレイアウトが変化するため、モックアップを作成すると、変更に伴うデザインを複数案提示しなければならない。修正が入った場合に、手戻りの数が多くなり統一感の欠如になりかねないリスクがある。

レスポンシブの場合はモックアップは作らず、スタイルタイルを利用することを推奨する。スタイルタイルは、レイアウトや各要素のサイズを定義していないため、デバイスごとの変化を意識する必要がない。

スタイルタイルを用いることによって、より少ない工数で、クライアントが期待しているデザインのイメージを引き出し、クライアントから合意を得やすくなる。

スタイルタイル Style Tiles

最大のメリットは「共通認識を形成しやすくなる」こと