WD101: モニターの外をデザインするのが大半である

このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。

• Webは見た目のコントロールがきかない

Webサイトをデザインするといっても、スケッチブックに描いたワイヤーフレームを基にグラフィックツールで装飾をすれば完成するわけではありません。たとえ、見た目がよくても操作がしにくい、読み難い、何処になにがあるのか把握しにくいのであれば意味がありません。つまり外観を作るというのはデザインプロセスのほんの一部でしかなく、それ以外のことを考える必要があります。

見た目だけではデザインが完結しない・・・という意味では、Web デザインはグラフィックデザインというより、プロダクトデザインに近いでしょう。プロダクトデザインも単に絵が描けて、美しいフォルムを作れば良いというわけではありません。プロダクトが置かれる環境、どのような人がどういったシーンで使うのか、トラブルが起きたときの対処方法など見た目だけでは解決できないことを製品の一部として取り込まなければいけません。

モニターの外にある8つのレイヤー

Webデザインも同様に、レイアウトやグラフィックなどモニターに映し出されているもの以外を考慮する必要があります。それらを8つのレイヤーとして分類することができます。これらを意識的に考えてペルソナ設定や仕様書としてまとめる場合もありますが、無意識に（又は前提として）考えてデザインに落とし込まれている場合もあります。

それぞれのレイヤーには異なる課題があり、それらがレイアウトやグラフィックの作り方を左右します。

ソフトウェア

Webサイトを表示させるためのソフトウェアは何か？そこで実現できるテクノロジーはなにか？そのソフトウェア独自の機能や表示法はあるか？

ハードウェア

最新の機器でアクセスしなくても適切な動作ができるか？ハードウェアの機能を Web サイトに活用することは可能か？ネットワーク回線が良くないときにでも情報へ少しでもはやくアクセスするための手段はあるか

インプット

マウス、キーボード、タッチなど多様化するインプット嬉々に対して適切な対応ができているか

身体

特殊な操作を要求していないか。利用者に身体的な不自由があるとしても、目的を達成することはできるのか

思考

Webサイトを訪れる意図は？どのような経緯で訪れていると想定できるか？

経験

Webをどれだけ使いこなしているか？類似サイト利用したことがあるとしたら作り方は変わるか

居場所

利用者がサイトを訪れるときの場所や時間は？移動中、外出、固定位置など様々

社会

社会、コミュニティが考える価値観とは？ライフスタイルに影響しているトレンドはあるか？彼等が心地よいと考える基準とは？

人を意識し始めると作り方も変わる

ここで重要なのは、紹介した8つのレイヤーが何で、それぞれ考えることを覚えるということではありません。各項目を見ると分かるとおり、大半が利用者のことを語っています。人が住む環境、利用するシチュエーション、彼等の行為や思考など・・・利用者のことを徹底的に考え抜くことが答えのないデザインの進むべき道筋を示してくれる場合があります。

例えば、利用者のインプット方法に注目してみましょう。タッチデバイスを利用するシーンが増えてきた現在において、マウスオーバーでメニューを表示させる手法は適していないのが分かります。
社会に注目するとどうでしょう。日本人は好む色、雰囲気に注目することでサイトのトーンが決まります。また、ターゲット層のコミュニティで好まれているルック＆フィールを模擬することで、彼等に「分かっているね」と思わせることも出来るかもしれません。

利用者のことを考えることから始める最大のメリットは、モニターに映し出される見た目を作るときの、理由付けができるようになるからです。長くコミュニケーションをとっている方や経験がある方と仕事しているのであれば、いちいち説明する必要はないかもしれません。しかし、作り手が思っているほど「見れば分かる」は通用しないという現実があります。そのときに自分はデザインの「なぜ」を説明することが出来るのかがポイントになります。モニターの外にあるモノゴトについてあらかじめ考えることで、一緒に働いている人たちとの共通認識や同意部分を確認することができる利点もあります。

いろいろな Web サイトを見てインスピレーションを得ている方はいると思います。
今後、それらのデザインの見た目やインタラクションのテクニックだけでなく、作り手はなぜこの見た目にしたのか、特殊な UI を採用した理由を考えてみると良いでしょう。それが上記の 8 つのレイヤーを考えることに繋がりますし、結果的に自分なりのアレンジとデザイン提案ができるようになるでしょう。