今のデザインに必要とされるコントロール

本当にコントロールできないのか

WD101シリーズの最初に、Webデザインは見た目のコントロールができないという話をしました。スクリーンの大きさが多種多様なだけでなく、利用者が見た目や操作性を自由に変えることができる Web。DTPのような感覚でサイトをデザインしても、誰かの Web アクセスの利便性を損なうと指摘しました。

デザイナーはある種、混沌とした状態から秩序を生み出す能力をもっていると思います。バラバラになった情報を整理して一貫性のあるメッセージを伝えたり、混雑した Web の世界に明確な道筋を示す仕事をしています。秩序を作り出すということは、ある程度のコントロールはなくてはならないわけです。

コントロールすることがデザイナーの仕事であるとすれば、『コントロールができない Web』との相性がよくないように見えますし、デザイナーにとって非常に仕事が難しい環境のようにみえます。しかし、実際のところ今まで以上にデザイナーのコントロールが必要とされています。

制約の中にあるコントロール

Web におけるデザイナーのコントロールは従来のデザインで言われるコントロールとは少し異なります。紙のように枠がありませんし、テレビや雑誌のように作り手の意図が 100% 再現されるとは限りません。今までと同じようなコントロールを求めるのであれば、Web は『コントロールできない』ということになります。

それでは Web では何をコントロールしなければいけないのでしょうか。他の分野のデザインも媒体の特性や技術による制約があり、その中でデザインしますが、Web には大きく 3 つの制約があります。

• アクセスするためのハードウェア・ソフトウェアを限定できない
• 利用者の趣向や、アクセスの方法はそれぞれの自由
• 利用者の文脈によって、情報量や機能が変化する

これは今までにない制約であると同時に、従来と同じようなコントロールを当てはめることが難しいことを意味しています。Web デザインでコントロールを実践するには、上記の制約を踏まえて設計しなければいけません。

• どのようなスクリーンサイズにも耐えられる枠組み
• わずか数文字でもブランドを伝えることができるガイドライン
• デザイナーが予期しないかたちにも対応できる道具セット

Webデザイナーの仕事は、画面ひとつひとつのレイアウトや詳細をコントロールするというより、企業ブランドをコントロールするための全体のシステムをデザインするという存在になると思います。最近だと Material Design が好例でしょう。これは従来のデザインとは異なるコントロールになりますが、とても挑戦的で意味のあるデザインだと思います。

システムをコントロールするための道具

それでは具体的にどのようなシステムを作れば良いのでしょうか。デザインシステムを構築するには、まず以下の 5 つのデザインツールが必要になります。

1. ビジュアルの在庫表

デザインをする前に、何をデザインしなければいけないのかを把握する必要があります。この段階では画面ひとつひとつではなく、画面を構成している部品（UI や画像など）をひとつひとつ解体し、まとめていきます。マウスやタッチといった操作によって発生するインターフェイスも忘れてはならない項目です。こうして部品をひとつひとつ書き出すことによって、何が整理できるのか、足りていない要素は何か、一貫性がないところが何かを洗い出すことができます。

2. ムードボード

色使いやグラフィックの使い方をひとりのデザイナーのセンスに頼ってしまうと、ひとつのシステムとして成り立ちません。そこで、感覚的なところを少しでも共有できるようにムードボードを用意します（神戸での講演で紹介したことがあります）。たくさんのインスピレーションになるモノ・コトを並べて、「このプロジェクトで言うカッコいいはこういう感じなのか」というところを共有します。

私がよく使っているのは Pinterest。「かわいい」「モダン」といった感覚的なフレーズに対して人は何を連想しているのか分かるので便利です。プロジェクトで共有しておきたいテイストと合うものはピンをしてボードにまとめていきます。

3. タイポグラフィ

Webフォントもだいぶ使えるようになってきましたが、紙媒体に比べると出来ることが限られています。しかし、それでもタイポグラフィからデザインシステムを考え始めるのがおすすめです。スマートウォッチをはじめとした未知のデバイスが出てきても、テキストは残りますし、そこでしかブランドを伝えることが出来ない場合もでてくるからです。また、グリッドシステムにしても、タイポグラフィが決まっていないまま 960 Grid Systemが便利そうだから採用するというわけにはいきません。欧文に最適化されているものを、そのまま流用できないのでなおさらです。

タイポグラフィはデザインシステムを設計するための土台になります。WebサイトでもWebアプリケーションでも、まずは文字で遊んでみてプロジェクトに合うバランスを探してみてください。

4. スタイルガイド

ビジュアルの在庫表やムードボードを基に、いよいよスタイルガイドをつくっていきます。ここでは、ボタンをはじめとしたフォーム要素やカラーパレットなど、どのスクリーンサイズでも必要になるデザインを作り始めていきます。HTML/CSS に詳しくないデザイナーであれば、フロントエンドに詳しい人と相談しながら作ると、見落としが少なくなります。事例や作るための注意点を知りたい方は、問題解決のためのスタイルガイド入門を参照してください。

5. パターンライブラリ

ひとつひとつの部品はきれいに作られていても、組合わせると「おや？」ということになることがあります。ボタンが横に並んだときはどうなのか、コンテンツブロックをどう表現すれ良いのか … といった部品の組み合わせ方を示すのがパターンライブラリです。特定のデバイスに向けたデザインになることもありますし、レスポンシブに要素がどのように動くのかを考えるのも良いでしょう。

システムが作れる環境を整える

特定のデバイスに向けてひとつひとつデザインするというやり方は、今後ますます多様化する Web アクセスに対応できなくなります。また、デザイナーに頼り切ったデザインでは、即座の対応が難しくなるだけでなく、引き継ぎもできないということになりかねません。守っておきたい最低限のデザイン品質をどこかを見極め、そのデザインが『システム』として使えるのかを考え、設計するという仕事になるでしょう（参考記事）。これは従来のデザインのコントロールを少し異なりますが、今まで以上にコントロールが必要な領域と考えることができます。

こうしたデザイナーの仕事は必要とされていますが、仕事環境が DTP の名残を受け継いだプロセスだと実践が難しいです。道具の選び方、関わり方を考えるためのヒントでも指摘しましたが、作るためのプロセスが変えずに、手法や道具を変えても負担が増えるばかりです。デザインのシステムを設計する必要があるプロジェクトがあれば、まずは上記のようなデザインツールが作れるための環境を整える必要があるでしょう。