有馬トモユキ

#7.身近なスケール感

ウェブやスマートデバイスの普及にともなう「科学と芸術の融合」がもたらす環境の変化は、デザインをどう変えたのか。最先端の話題を紐解きながら、ゼロからデザインを定義する革新的なコラム連載第7回!

道に迷わない友人

たとえ引っ越しの予定がなくとも、不動産情報サイトを巡るのが大好きな友人がいる。「別の暮らしによく憧れるのか」と聞くと、「想像を巡らせて、かつ地理の一要素として因果関係を見るのが好き」なのだという。安くて広い家には必ず理由があるという話なのだろう。

彼には素敵な特技があり、ショッピングモールや空港などで迷うことがない。閉じた室内でも広さと方向を完全に類推できるのだ。つまり以前このコラムに書いた「室内の迷子問題」を乗り越えている人種と言えるだろう。よく迷わないなと聞くと、歩いているときは空間の広さやランドマーク、そして自分の向いている方角を常に意識しているのだという。一緒に訪問したNYの地下鉄で、地上出口から出た途端に正確な方向に歩いていったときには舌を巻いた。

彼にはどうやら方向と広さに関して、環境適応とも呼べる安定した計量感覚が備わっているらしい。私たちが迷うのはそうした方角や、スケール感の欠如によるものだ。少し目をこらすと、ミクロとマクロに限らず我々は毎日何かの迷子になっているようにも思う。たとえば買い替えなどでスマートフォンのサイズが変わったとき、正確に文字をタイプできるだろうか?ある程度慣れが必要になってくるはずだ。

 

グラフィックとスクリーンの計量感覚

スケール感の欠如はグラフィックデザインをしていると、身に覚えがたくさんある。たとえばポスターのデザインをしていたとして、画面上で良しと思っても実際に原寸で印刷してみるとどうにも迫力不足、ということを経験する。ウェブデザイン、つまり「自分が作っている状態と見られる状態にスケール感の差異が存在しない」のが普通の状態からデザインを志した身としては、そうしたグラフィックデザインの当然されていること——世に出る物と同じサイズで必ず確認すること——に関しては戸惑うことが多かった。

また逆に、iPhoneやiPadに対応した画面を作る必要が2009年から増えてきたあたりで同様なことが起きた。一般的にウェブでよく使用していたサイズ感でデザインすると、文字や図形がiPadの画面上でとても小さくなってしまうのだ。画面の密度がPCのモニタ(100ppi……つまり25.4mmに100ドット前後)とiPad(初代は132ppi)では随分異なっていたのを検討に入れていなかったからであろう。現在ではWiFi経由で端末に送ってリアルタイムに確認できる仕組みが多くリリースされているが、当時は何度かPCの画面と端末のプレビューを往復することが多かった。

スマートデバイスのサイズ感に関しては、業界全体でユーザーに実際に使ってもらうという形で最適解を模索していたように思う。現在は人気が売上という形で反映されたことで、ある程度方向性が決まってきた。まずはAppleのiPad miniや、発売直前に急遽中止になったというMicrosoftのSurface miniなど7インチタブレットは一時期の勢いが減じているように見受けられる。ある程度手のひらに収まる限界=5.5インチを超えたら、あとは画面の広さが活かせる9インチ以降のタブレットが優勢なようだ。近しい仲では前者を「片手サイズ」、後者を「両手サイズ」と呼んでいる。

スマートデバイスの筐体サイズの拡散は落ち着いてきたとはいえ、コンテンツの設計者としては頭の痛い問題だ。例えばiPhoneだけでも大きく分けて3サイズが現役で、Androidに至ってはタブレットも含めてしまうと数え切れない(画像1)。画面サイズはいくつでデザインするべきなのか、デザイナー・開発者向けのチートシート(画像2)も実際に公開されているし、開発環境側が支援してくれる範囲も日々拡大しているが、精度の高いデザインをするためにデザイナーは多くの画面を作らなければならないのが実情だ。ウェブもご存知の通りで、Googleはニーズに応えてResizerというプレビューツールを試験公開している(画像3)。

画像1 拡散するスマートデバイスの筐体サイズ

 

画像2 デザイナー・開発者向けのチートシート

 

画像3  プレビューツールResizer

 

小さくても伝える

アプリやウェブの設計だけではなく、それに対応するグラフィックデザインもあらゆるスケールに対応する要請は常に存在している。企業ロゴなどにはじまるVI=ビジュアルアイデンティティはひとつのメッセージや意匠を、実に一万を超えるアイテムに展開する。たとえば航空会社などは航空機の尾翼から機内食のフォークまで、見た目の印象は大きさによって変わるため、あらゆるサイズで違和感がない環境を整えるのが重要になってくる。あるいはブリティッシュ・エアウェイズなど多くの企業は、色数を制限するなど「小さい時用」のロゴを別途作成し、ルールの一部として組み込んでいる(画像4)。手前味噌で恐縮だが、最近作成したアニメのタイトルデザインでも同じように、グッズなど映像以外の媒体で小さく扱う際のルールを組み込んでいる(画像5)。

画像4 ブリティッシュ・エアウェイズの「小さい時用」ロゴルール

 

画像5 『ブブキ・ブランキ 星の巨人』のタイトルデザイン

 

 

そうした例はビジュアルアイデンティティ以外でも散見される。金属活字で印刷を行っていた時代、フォントは大きさによって別々に作ることが求められたために「小さいポイント数では他の文字と誤読されにくいデザインとする」など、特有の修正を加えることが可能だった。最近になってその配慮はApple Watchなど、最新のデジタルデバイスで生かされている。ここで使用されているSFというフォントは「小さい文字は8に誤読されないために6や9の形が変わる」配慮がされている(画像6)。こうしたサイズへの配慮はほぼ気づかれることはないが、製品の品質にとても貢献しているように見受けられる。

 

画像6 Apple WatchのSFフォント

 

こうした配慮の根幹にあるのは、もちろん私たちの身体性だ。大小に振れ幅はあるが、限界のサイズはそう変わらない。かつてウェブがPCだけで見るものだった時であれば、マウスで選択できさえすれば良いので、ボタンのサイズはとても自由だった(自由すぎたと言ってもいい)。しかしスマートデバイスの台頭でボタンを指で触れるようになってから、確実にデザイナーとしては配慮しなければならない領域が増えたといえよう。違和感なく使ってもらえるように、見てもらえるようにするのがデザイナーの仕事である。もし情報領域において小さすぎて使いにくいもの、認識しづらいものがあるとしたら……配慮の途中なのだなとお考えいただけると良いかもしれない。

 

スケールから出るメッセージ

こうしたことを考えているとき、連想するのは画面上のサムネイルについてである。Googleの画像検索など、一覧されるときに表示される小さな画像群のことだ。サイズによって印象が異なるわけだから、例えば動画サイトのYoutubeや、イラストを投稿するサービス・Pixivなどはサムネイルのサイズが変わったら、どうなるだろうか想像することがある(どちらのサービスも画像に対するサムネイルの縮尺は変更できない)。大きくなれば動画の内容を示すテロップはより情報量が多くなるだろうか、もしかするとイラストレーションにおいては絵の描かれ方、視点が少し変わってくるのではないか……そう思うとウェブサービスの設計においては、どう使ってもらいたいかのメッセージがサムネイルのサイズからも伝わってくるような気がしている。

関連書籍