小さく考えて積み上げるデザイン思考

体験のグラデーション

デジタルは 0 と 1 で構成された世界であることから、すべてを正確に決めることができるように見えます。しかし、実際のところ紙のデザインに比べてはるかに流動的で予測が難しかったりします。グラフィックツールでつくった世界がそのままの形で再現されることはまずありませんし、利用者の環境によって見た目を変わることもあります。

昔からすべてのブラウザで Web サイトの見た目をまったく同じにすることはできないと言われていますし、スクリーンサイズや OS のバージョンが多彩なスマートデバイスでも同様のことがいえます。しかし、見た目を同じにすることはできないからといって、ビジュアルデザインを諦めるという意味ではありません。Web やアプリをはじめとしたデジタルプロダクトのデザインで難しいのは、何をどこまでをデザインによってコントロールするのかを考えることです。

デザインのコントロールをブラウザが ECMAScript や CSS をはじめとした技術をどれくらいサポートしているかといった観点から判断することがあります。しかし、この考え方ではデザインにおける課題の半分しか取り組んでいません。例えば GOV.UK は「Browsers we support and why」という記事で、デザインが行うべきサポートを簡潔に表現しています。

In simple terms support means making sure GOV.UK displays correctly and key functions work.
GOV.UK は見た目を適切なかたちに整え、主要機能が動作することを「サポート」とします。

記事では、ブラウザによって描写の仕方は違うことも明示されていますが、見た目だけではなく、利用者の目的達成も含めて「サポート」と捉えています。プロダクトデザインしていく上で以下の項目の同意を得るためにも、ユーザー像や利用シーンの共有が重要になります。

• すべてのユーザーに提供しなければいけない『コアな体験』は？
• 回線速度やスクリーンサイズが変わってもコアな体験は提供できるか？
• 最新の技術を採用することで、その体験がどのように増幅されるか？

デジタルプロダクトのデザインで難しい（面白いとも言う）のは、技術によって、どこまでコアな体験を増幅されるのかを考えることです。位置情報を用いることで、「行きたいお店を探す」というコア体験の手助けになることがあります。SVG を活用すれば、スクリーンサイズや解像度で劣化しない表現でブランドイメージを強く伝えることができます。

制作サイドで何がコアな体験なのかを共有していないと、表現重視のサポート話になりがちですし、そもそものデザインの目的を見失う可能性があるので注意が必要です。

それでも残すもの

コアな体験を共有し、そこから技術とデザインによって体験を増幅させるという考え方は、今日のマルチデバイスの世界では必須です。すべての見た目を同じにすることはできませんが、どのような状況でも同じにしておきたいデザイン要素はあります。ブランドを示す色や書体はどのような状態でも同じ表現であるべきです。しかし、ここでも異なるデザインの課題があります。

コンテンツがきちんと読めるようにするのはもちろんですが、特定の書体を選ぶことがブランドを伝えるために重要な場合があります。ブランドに適した書体を表示する方法はいくつかありますが、 特定の状態で増幅される体験と見なすべきでしょうか。それとも、どのような状態でも見れるようにデザインするべきでしょうか。ブランドを示す書体は、本文やヘッダーなどすべての要素に適応されているべきでしょうか。

こうした表現と実装を決めるタイミングは、書体だけなく背景や枠線などあらゆる要素にあります。すべての環境でまったく同じに見える保証がないからこそ、小さな要素をどのように見せるのかを考慮することが重要になります。装飾がほとんど施せない 4 インチほどの小さな画面で何を視覚的に伝えることができるでしょうか。

レイアウトやモジュールといったコンテンツをまとめるための枠組みは、環境によって大きく左右されます。そこで、色や書体といったどの環境でも必ず表現しなければならない要素をルール化する必要があります。様々な要素が揃った巨大なスタイルガイドを作ることを目指すのではなく、まずデザインSDKと呼べるような小さなデザイン要素からスタートすると何が本当に必要なのか考えやすくなります。これだけ作っても Web サイトひとつ作れないほどの小さなデザイン要素ですが、こうしたところも明文化・共有化されていない場合があるので、始める価値があります。

まとめ

ひとつ作ればすべての状況に対応できるデザインを作るのが困難な時代です。ハードウェアやソフトウェアが違えば見た目は違うのは当然ですし、サポートしている技術もそれぞれなので体験の度合いも異なります。この違いをクライアントはもちろん制作チームも理解しなければいけないデジタルプロダクトにおけるデザインの基礎といえるでしょう。

なかなか理解されないという声もありますが、理解してもらうための働きかけをしなければ、皆の時間とお金を浪費することになります。見た目や動作が違うことがあっても、プロダクトの何を重要視しているかを共有することで、何を基に体験を積み上げていけばいいのか理解しやすくなるでしょう。