これからのWebサイトデザインでは絶対に押さえたい3つのR

2012.10.31

Three Fingers, balancing Society, Environment, Economy. Sustainability Salute - Peace Plus One - 21st Century Symbol of Peace, Harmony & Sustainability
Three Fingers, balancing Society, Environment, Economy. Sustainability Salute – Peace Plus One – 21st Century Symbol of Peace, Harmony & Sustainability Photo by \!/_PeacePlusOne

最近、英語圏のホームページデザインがすごい勢いで進化中です。
その中で気づいたことを「3つのR」としてまとめてみました。

これから先、Webサイトデザインを作っていくには何が重要になってくるのでしょうか？

Webデザインに関わっている人は読むと来年から差がつくかも！？

基本

まず誰でも知っているWebサイトのデザインの基本。
（これは基本ですから今回の３つのポイントではありませんよ）

  • 読みやすさ（本文の文字など）
  • 使い勝手（ユーザーが迷わないか？まとまっているか？）
  • 己の醸し出す雰囲気（全体的デザイン）

文章が読みやすくて、知りたいところにすぐにたどり着けて、
しかもオリジナリティあふれるデザイン。

こんなサイトが作れれば最高ですね。

 

しかし、「これから」のサイトはそれだけでは足りません。

近年、Webサイトは「あらゆる端末で美しく見える工夫」が絶対条件となってきました。

スマホを始めとする端末の多様化で、ブラウザの種類だけを気にしていた今までのサイトデザインでは足りない部分が多くなってきているのです。

これからのWebサイトに必要になる３つのRとは？

では先に3つのRを示します。

  • 自在な画面サイズ　レスポンシブ　（Responsive）
  • あらゆる文字を%もしくはemの相対指定にする　リアリティブ　（Relative）
  • 高解像度の画像対応　レゾリューソン　（Resolution）

１つずつ解説します。

レスポンシブ（Responsive）とは？

ホームページはいままでパソコン上で見ることが当たり前でした。

パソコン上ではブラウザの違いが最大の問題でした。
悪夢のIE6対策を始め、さまざまなブラウザハック技術が誕生し
クロスブラウザ問題は少しずつ解決し始めています。

しかし現在、ホームページを見る端末はパソコンだけではありません。
スマホからガラケー、タブレットまで実に様々な機種で見られています。

代表的なものを出してみると。

Windowsパソコン
Windowsタブレット
Mac（OS X）
iPhone
iPad
Androidスマホ
Androidタブレット
Windows Phone
ガラケー

（細かく言えばインターネットアクセス可能なPlayStation3などのコンソールゲーム機やNintendo DSなどのハンドヘルドゲーム機もありますが、これは用途が限られますから今回は除外します。Pipin Atmarkが入ってない！などのマニアなツッコミコメントはお控えください。
端末ハードということでLinux系、Unix系はOSのみの存在として外しました。俺はスパコン”京”でブラウジングしているぜ！などという本職の人はいますぐコメントをください）

 

これらの端末機器とパソコンの違いは

  • ウィンドウサイズを変えられない
  • 必ず全画面表示である
  • 縦・横でサイズが変わる

などです。

ピクセル数もすべての端末でまちまち。

機種名 解像度
初代iPhone 480×320
iPhone 4S 960×640
iMac27インチ 2560 x 1440
MacBook Pro Retina 2880×1800

Androidスマホにいたってはメーカーによって全て違います。

 

Web標準の960pxに合わせれば画面をはみ出して見えない機種があり、320pxに合わせればiMac”27ではレシートのように細い画面になってしまいます。

 

じゃあ画面に合わせて変化させれば良いんじゃないか？

そうです！

その技術を「レスポンシブ（Responsive 敏感な）デザイン」と呼びます。
（リキッドデザインよりもさらに一歩進んだデザインです）

 

例えばこのWordPressのテーマをみてください。
http://wordpress.org/extend/themes/responsive

WordPress Theme

開けたら Preview を押してください。

 

下記のように表示できましたら、ブラウザをだんだんを細くしてみましょう。

Full Size

細くなっていくにつれ、画面のレイアウトやメニューの形が変わっていることに気が付きましたか？

Middle Size

 

最も細い状態です。スマホサイズですね。
本文も細くなって、狭い画面でも上下にだけスクロールすれば読めます。

thin size

 

画面に大きさに対して各要素やデザインがダイナミック変化するのです。

たとえばiPhoneであっても、

  • メニューがはみ出して押せない
  • 本文が一部しか読めない、上下左右にスクロールがめんどう
  • 画像が一部しか見えない

といった事態が防げます。

 

逆に画面が大きくなれば狭い端末より快適に操作でき、ひと目で見える情報が増えます。

小さくても大きくても良いデザインなのです。

あらゆる文字は%もしくはem指定（Relative）

次に文字そのものです。

これは主にCSS指定の話です。

いまあなたは文字サイズはどうやって設定していますか？
CSSプロパティでいうと font-size です。

カッチリしたデザインをしたいとき、ついついやってしまうのが

font-size: 14px;

のような指定です。

文字サイズの「決め打ち」ですね。

たしかにこれならほとんどのブラウザで破綻しません。
いつでも設計通りのデザインになるでしょう。

しかしこれからは注意が必要です。

 

FF Scala: Hinting — Old/ClearType
FF Scala: Hinting — Old/ClearType Photo by FontFont

 

最近パソコンの画面がどんどん高解像度化しています。
その分たくさんの情報が表示できるようにはなったのですが、
同時に文字が小さくなり、お年寄りなど目が弱い人には一苦労です。

私がご年配の方にパソコンを設置する際、
必ず聞くことがあります。それは

この文字の大きさでラクに読めますか？

です。

しかも、たいていの人は「小さい」と答えます。

その場合、OSの文字設定と一緒に、ブラウザの文字の大きさを変更します。

インターネットは今や非常に重要なインフラ。
苦手なお年寄りでも使わなければならない場面が多々あるのです。

ブラウザではたくさんの文字を読まなくてはならない場面も多く、
老人の目には非常に重荷です。

 

ですが、「px」などの決め打ちの文字はブラウザの設定を変更しても変化しません。

emや%などの相対設定（Realtive指定）の文字だけが変化します。

pxで決め打ちしてあるサイトは、いくら文字を大きくしたくても大きくならないのです。

 

決め打ちのサイトはキレイですが、お年寄りにきびしいページだといえるでしょう。

文字の大きさの実験

実感するためにGoogle Chromeで試してみましょう。

右上の設定ボタンを押します。

 

設定を押します。
設定ボタン

 

詳細設定を押します。
設定メニュー

 

文字の大きさがありますので試しに「極大」にしてみましょう。
中から極大

 

対応サイト（Google　検索結果画面）
文字の大きさに対応サイト

 

対応していないサイト（WorkToolSmith ・・・ってこのページかい！）
文字の大きさに対応していないサイト

 

ざっと５０サイトぐらいをランダムに調べてみましたが、文字の大きさ変化に対応しているサイトは20%ぐらい（それもIT大手ばかり）でした。

個人ページではほとんど対応しておらず、またpx指定と% em指定が混ざっているページもありました。その場合大きな文字が小さく、小さな文字が大きくなったりしてバランスもおかしくなっていました。

 

ちなみに現在、ブラウザの文字は「16px」が基準となってきています。
16pxを想定して作るといいでしょう。

ただし注意。16pxで初期化してはいけません。

☓  body{ font-size: 16px; }

これはダメです。

 

上記の例ではただ単にbodyを16px固定にしているだけです。
文字の拡大には追従しませんので、ご注意を。

body { font-size: 1em; }

もしくは

body { font-size: 100%; }

が正しい指定です。

あくまで16pxを「基本と考える」ということです。

 

これからは文字の大きさが変化しても破綻せず、
美しいデザインを考えなければならないのです。

これがまた苦労するんですが、お年寄りのためを思って！

文字のCSSをもう一度見なおしてみてください。
（はい、僕もですね）

高解像度の画像対応

最近のMacやiPhoneに搭載されている超高密度ディスプレイ「Retinaディスプレイ」
ものすごい画素数ですが見た目は普通に見えるように、Retinaに対応していないソフトやページは引き伸ばして表示します。

文字などはキレイに引き伸ばされるのですが、写真はぼやけます。

つまりRetinaやこれから他社から出てくるだろう高解像度ディスプレイ用に、別途写真を用意する必要があるのです。

 

最初に高解像度ディスプレイを出したAppleのサイト（http://apple.co.jp）では、Retina端末で見た場合JavaScriptで画像を切り替えています。
（ソースを見ると下記のようなJavaScriptが読み込まれています）

AppleのRetina JS

 

画像や写真の多いサイトには必要な技術になってくるでしょう。

あなたのホームページはあなたが見えている通りではない

Webデザイナーは見た目の美しさ、レイアウトの綺麗さだけでは
売れない時代になります。

デザイナーであってもCSS、HTML、JSを知るべきだし、
逆にプログラマーもデザインのことを知らなければなりません。

どちらも知識を持って作らないと、デザインが崩れたり、
文字が小さなままのWebページが出来上がってしまいます。

とにかく、

他の人はどんな端末でページを見るかわからない

この前提を認識する必要があります。

今までのようなデザインをしているとどうなるのでしょうか？

では今回の３つのRを全てを無視するとどうなるのでしょうか？

 

すばらしいデザインのサイトができた！

さあ自慢だ！

意気揚々、友達のスマホでページを開いたとたん、画像はワケわかんないところに浮き、本文ははみ出しまくり、さらにゴマみたいに小さな文字、横に並べたはずのメインメニューは全部縦に並んで文章に突っ込んでいるという緊急事態となります。

ついでに必死に作りこんだJavaScriptアニメが明らかに画面に合っておらず、動いてはいけない画像がまるでUFOのように飛び回り、ボックスの中の文字は何かに怯えるようにブルブル震えていたりします。

そして友達からは「もっとデザインを勉強したほうがいいよね」
みたいなことを言われ心の病気になるかもしれません。

あなたの健康を保ちたかったら、３つのRをぜひ覚えておいてください。
（なんの話だっけ？）

変化は始まっている

上記のような変化に気づいたのは実はここ２ヶ月ほど。

あれ？iPhoneで見やすいページがあるな？

と思って調べ始めたのが始まりでした。

いままではiPhone用ページ、パソコンページなどとサイト自体を分けていましたが、
これからは変形するデザイン「レシポンシブデザイン」が標準になっていくでしょう。（Agentで分けるのはめんどうですしね）

 

３つのR、いかがだったでしょうか？

役に立ったらぜひ下のボタンからツイートや感想をコメントしてください！

お時間がありましたらこちらの記事もどうぞ