新しいプロジェクトをクライアントと開始する時、従来の「複数のカンプを完成させ提示する」という工程は、特にレスポンシブWebデザインのサイト作成の際に非常に非効率的で、クライアントに対してもデザイン決定のプロセスから取り残されたように感じさせてしまいます。 そんな時「スタイルタイル」というものは非常に有効です。作業効率を上げるだけでなく、クライアントとの信頼関係を築くのにも役立つ便利なものです。

# 347

スタイルタイル とは?

新しいクライアントとのプロジェクトが始まる時、あなたはどうやって始めるだろうか?しっかりしたプロセスは、プロジェクト全体の成功に重要な役割を果たすが、そのプロセスはこの業界のもっとも暗く深いシークレットのひとつだ。
プリント、アイデンティティ、広告から進化したウェブは、全く異なったプロダクトを生産する分野の多くの方法論や成果物の名残を未だ持っている。

私たちが決まったwidthを表す詳細なモックアップを提示する時、それは最終的なデザインの完成を意味する。クライアントは、自分たちがプロセスから切り離されたように感じ、誤った完成の意識を持ってしまい、そして最終的なプロダクトから切り離されたように感じてしまうことがある。
なので、クライアントの期待と感情とより密接に働けるようそのプロセスを設計してみよう。私たちは、クライアントにそのプロセスのより積極的な参加者となってもらうよう私たちの成果物を進化させる必要がある。

ウェブサイトは、単なる使えるインタフェースではない:ストーリーを伝えるものだ。スタイルタイルとは、サイトマップ、ワイヤーフレーム、および他のUXの成果物とともに提供される、フォント・色などのスタイルのコレクションによってウェブインターフェイスの要素を提示するデザイン上の成果物である。
スタイルタイルは、クライアントとのビジュアル的な希望に関する話し合いに基づいていて作られる。それは、共通の視覚言語で作られた、クライアントとの話し合いに拍車をかけるサンプルのオプションである。

サンプルのUIスタイルの見本を含んだスタイルタイルは、デザイナーがクライアントのブランドをどうウェブで表現させたいかを表している。

例えばクライアントが欲しいサイトを説明するために「フレンドリー」や「クリーン」という言葉を使う場合、スタイルタイルは、ビジュアル的にこれらの形容詞を表す。スタイルタイルは、クライアントの好みとゴールを明確にし、洗練させるための話し合いを促進する働きがある。

感情的結び付き

スタイルタイルは、クライアントが理解できる方法でウェブとコミュニケーションをはかるためのスタイルを定義する柔軟な出発点である。スタイルタイルは、伝統的なアイデンティティムードボードよりも洗練されていて、ウェブサイトのモックアップまたはカンプよりも大まかである。

インテリアデザイナーが部屋を再デザインする時、複数のデザイン見本を構築することはなく、単に色見本、ペイントチップ、そして建築スケッチを見せるだけだ。スタイルタイルは、どんなデバイスやどんなサイズ上でも実行できるインターフェイス用の、ペイントチップや色見本として機能する。これは、ビジュアルデザインにとって真にレスポンシブルであるソリューションなのだ。

ムードボードはクライアントとのヒアリングからの素晴らしい出発点となるが、多くの場合その話し合い部分からウェブサイトまでの一気の変化をクライアントにとって明確にするためには漠然としすぎている。
ムードボードはブランドアイデンティティを掘り下げるためには良い方法だが、複雑なウェブシステムへそのアイデンティティ取り入れるということになると、このような弱いコネクションではクライアントにとってその出来上がりをを理解し想像するのには難しい。

これとは対照的に、スタイルタイルは、優れたビジュアルデザインを作りだせる。デザイナーがデスクトップとモバイルエクスペリエンスをも含んだより大規模なウェブシステムにまたがったスタイルを、どう適用するかコミュニケーションするのに役立つのだ。

形容詞を引き出す質問をすること

スタイルタイル・プロセスは、クライアントとプロジェクトをつなぐと同時に、ブランドの裏にある情熱を引き出し、説明的で貴重な情報を明らかにする。スタイルタイル・プロセスの最初のステップは、クライアントに質問することだ。アンケートや、デザインはじめのミーティングで質問できるだろう。

まず、クライアントである出資者一覧があるのを確かめ、サイトのビジュアルの彼らのゴールを吟味すること。彼らに前もってそれぞれのゴールを設定させることは、プロセス全体を通じて各スタイルを決定する際の優先順位を強固にする。次に、答えに形容詞に富むような質問をすること。this Adaptive Path articleに書かれているような比喩的な質問は、戦略的で皮切りになるのに役立つ。

例えば、「あなたのウェブサイトが車だったとしたら、どのような車で、それはなぜでしょうか?」といったものだ。これは素晴らしい質問だ:いろいろな自動車ブランドとタイプを取り巻く社会的·文化的な認識があるがあるからだ。これらのブランドに関連する形容詞はかなり違っているかもしれない。あなたのクライアントは、トヨタのプリウスをきっとSUVとはかなり違って表現するだろう。

SD法(セマンティック・ディファレンシャル法)による質問は 、クライアントの美的好みを理解するために非常に良い方法である。互いに対立する単語のペアを設定し、その2つの単語の間の位置を選択するようにクライアントに聞くことで、彼らがサイトをどのようにイメージしているか説明する手助けにできる。彼らのサイトのイメージはモダンかオールドファッションか?あるいはその中間のどこかか?

これらの質問は、クライアントがサイトの潜在的なスタイルを表すどんな言葉と密接​​に関連しているのか見当をつける助けになる。イラスト的か、写真的か、またはタイポグラフィー的かどうかという言葉も、あなたがクライアントの好みの感覚を掴むために役立つ。多くの場合、私はそれぞれの単語をサンプルサイトとペアにして、クライアントがその関連性を見えるようにしている。MailChimpは「イラスト的」の一例であり、NPRは「タイポグラフィー的」の一例である。

そこで得られる答えは、2次元のビジュアルデザインコンセプトと、クライアントが自分のブランドに関して持つ情熱とに、感情的な結合を形成するための鍵である。注意深く聞き、クライアントの回答をソートし詳細に吟味し、あなたのスタイルタイルにおけるビジュアルと、クライアントの実際の言葉との間に明確なつながりを表すこと。文字的になればなるほど、よりクライアントはそのプロセスに自分たちがつながっていると感じられ、それは信頼も構築し、よりスムーズな承認プロセスへの道を開く。

クライアント達があなたのアンケートを記入し終え、またはデザインはじめのミーティング中の質問に答えたら、彼らが与えてくれたものを分析しよう。その答えを研究し、リストを作るために形容詞をハイライトする。特定の形容詞が、他のものより頻繁に使用されているか?

これらの言葉は、あなたのリストの一番上に移動させる。テーマが見えてくるので、このことから、オンラインブランドビジョンをまとめ出すことができるだろう。それは調査結果をまとめた短いステートメントになるかもしれないし、あるいはクライアント達皆の意向がまったく不一致になっていることを示すかもしれない。オンラインブランドビジョンが明確でもバラバラだったとしても、それはあなたがクライアントにタイルを提示して、今後どのように進めるか話し合うためのスターティングポイントを与えてくれるだろう。

最近のプロジェクトでは、Phase2 Technologyのデザインチームは、最新の政治情報を提供する2012年選挙のマイクロサイトを作成するため、The Washington Examinerと働いた。

サイトの目的は、今後の選挙のため読者を活性化することで、そのために愛国的なトーンでThe Washington Examinerの歴史的なブランドを拡張することだった。The Washington Examinerが提供した形容詞を使って、Phase2は新聞のブランドを解釈した3種類のスタイルを作り、クライアントに選んでもらうことにした。これらスタイルは、現在のオンラインブランドをもとに3つのバリエーションの解釈を反映していた。

クライアントに提示した3つのタイルは以下の通り。



私たちがWashington Examinerに提示した最初の3スタイルタイル

イテレーション・ネイション

Washington Examinerの出資者が彼らのブランドを説明するのに、重複して使われた形容詞がいくつかあり、我々が明確なブランドビジョンを作成するためにそれが役立った。

「愛国」という言葉は、赤、白、青のカラースキームを、そして彼らの出版での豊かな歴史は、読みやすさと出版業界のために開発されたいくつかのスラブセリフ系のタイプフェイスを選択させた。「現在」と「モダン」のような言葉は、サイトが特に2012年のキャンペーンのためのものであったことと相まって、大統領候補者たちのブランド内でテクスチャと深みを探求することに私たちを駆り立てた。

最も人気があった形容詞の他に、「クリーン」、「ストロング」と「フレンドリー」と言った言葉は、ビジョンが成長できそうな3つの方向性を示した。「クリーン」タイルはたくさんのホワイトスペースを含んで明るく、「ストロング」タイルは、つや消しアルミニウムとそのロゴからの星を特色に、そして「フレンドリー」タイルは鮮やかな色の混ざり合いを含んでいた。

イテレーション期間中、クライアント達は、最初のタイルが欲しいと決めたが、第2のタイルの星と第3タイルの書体も欲しいとした。この間、彼らはフレンドリーなスラブセリフのタイプフェイスを好んだので、私たちがAdelleを選ぶと彼らはとても気に入ってくれた。
この最終のタイルは、サイトの最終的なデザインにダイレクトに適用された。

The Washington Examinerが承認したスタイルタイル。

今までの方法

デザインプロセス中、クライアントに複数のカンプを提示するのが一般的だ。クライアントは複数のオプションを見たいものだし、複数のカンプは、支払った分の対価を受け取っていると彼らに感じさせる。デザインというものはセールスであり、私たちはクライアントを幸せにしたいものだが、複数の、そして完全にビジュアル化されたカンプを提示することは、プロセスの手助けになるよりもプロセスを害するものである。

種々様々なものを選び組み合わせるのは人間の本性であるので、クライアントが一時的なスタイルの好みを選ぶことで、デザイン的な問題に対して最適なソリューションを妨害してしまう可能性もある。最終的に、フランケン・カンプという、ウェブサイトの目的から外れた、インタフェース要素の寄せ集めカンプが出来上がってしまう。

プロセス及びアプローチ法は、最終結果に影響を与える

誰もが美学についての自身の意見を持っているので、デザインはトリッキーな業務である。クライアントは、デザインプロセスにおいて主要なパートを担う:彼らなしではあなたはウェブサイトを無料で作っているだろうし、それはデザインの仕事ではなく、だたの趣味だ。

デザインは目的指向であるのに対し、スタイルは好み指向である。クライアントにその2つが分離されたものだと理解してもらうのは困難になり得るが、スタイルタイルは、インタラクティブでイタレーション(繰り返し)な段階でWebデザインプロセスにおいてクライアントが関われることを可能にする、重要なコンポーネントになるだろう。

デザインプロセスの成果物を反復的に公開すれば、クライアントはより多くのフィードバックを提供することができ、より関われていると感じ、最終的なデザインの貴重な協力者になることができるだろう。

デザインとは信頼だ

スタイルタイルは、クライアントとデザイナーの関係におけるそれぞれの役割を再定義するものだ。人々は、人生における課題を解決する必要がある時、カウンセラーに会いに行く。クライアントは、コミュニケーションの問題を解決する必要がある時、デザイナーに会いに行く。あなたがもしデザイナーというものを、クライアントを解決策に導くカウンセラーとして考えるなら、信頼はイタレーションごとに構築されてるだろう。

あなたが部屋に入ったとき、カウンセラーがあなたの以前の履歴だけに基づいて完全に練られた治療プランを取り出したら、そのカウンセラーを信頼するだろうか?
あなたは部屋を出て行くだろう!組織のブランドとそれとどうコミュニケートするかというものは、家族関係の問題や結婚のようにデリケートな事柄になり得る。

あなたがデザイナーとして取るアプローチ法、口調や雰囲気、およびプロセスは、クライアントとの関係構築に多大な影響を与えている。
クライアントへのダイレクトなアクセスを持つこと、プロセスのためのプランについて彼らを教育すること、そして徐々にデザインへ飛び込んでいくことというのは、全て貴重な信頼を確立するのに役立つ、スタイルタイル・プロセスの一部である。

レスポンシブWebデザイン

ウェブをデザインするということは、もはや単なる960px widthのためにデザインすることではなくなった。複数のスクリーン幅とデバイスにまたがってレスポンシブに動くサイトをデザインすることは、クライアントインターフェイス用だけでなく、チームのコミュニケーションのためのデザインカンプの関連性にも変化をもたらす。

すべての存在しうるデバイスや画面サイズのモックアップを作成することは、非効率的でありクライアントも混乱させてしまう。スタイルタイルは、クライアントの期待を設定し、すべてのプロジェクトのチームメンバーにビジュアルテーマを伝えるしっかりとしたデザインシステムの要である。

単にサイトのページでなくシステムをデザインすることは、デザインチームに対し、呼吸し生きたデザインを作成するためにツールを与えてくれる。
クライアントが承認したスタイルタイルにより、頻繁に使われる要素を扱うコンポーネントスタイルガイドなどといった、他のビジュアルアセットも構築し始めることができるだろう。デザイン・システムに関するより詳細な概念は、sweet systemsでチェックできる 。

自分たちのデザインプロセスをデザインする

Webデザイナーとして、私たちはユーザーのためのエクスペリエンスを作るものだが、しばしば私たちは、クライアントがWebデザインプロセスの間に持つ、彼らにとってのエクスペリエンスをもデザインする必要がある、ということを忘れてしまう。

デザイン思考は、私たちがどのように課題に取り組むか、どうやってクライアントに参加してもらえるか、そしてどのように成果物を提示できるかというその方法を改善するだろう。
スタイルタイルというものは、プロジェクトのスケジュールを迅速にし、ブレーンストーミングの段階においてクライアント達を関わらせ、レスポンシブWebデザインプロセスにおいて重要な存在である。

早い段階でクライアント達を​​関与させ、レイアウトの存在しない成果物のスタイルを選び組み合わせることは、チーム全体とプロジェクトの成果にとって劇的で感動的な効果をもたらすだろう。あなたのプロセスにスタイルタイルの組み込む始め方として、手早くチェックするにはStyleTil.esを見てみるといいだろう。