アクセシブルなデザインがトレンドになる？
iPhoneやAndroid、Windows8など、タブレットやタッチデバイス対応のOSが次々に出てくる今、タッチデバイス向けのWebデザインをどうするのかという悩みがまた一つ、発生しています。
しかし、タッチデバイスに適したWebデザインは、結構アクセシブルなデザインになるのではないか、というのがこの記事の主題です。
指でタッチに対応
従来のカーソルの場合は、「点」クリックするポイントを指示できますし、カーソル自体は小さく、リンクの文字を隠すこともありません。
しかし、タッチデバイスの場合、指は「面」で大雑把なポイントしか示せません。指が指示するエリアは、文字サイズを大きく超えているため、ユーザーは隣り合う別のリンクをクリックしてしまわないか気を使いますし、リンクの文字も指で隠れてしまいます。
リンクをタップするときにあまり気を使わないのは、画面上の専有面積の広いアイコンやタイル式の表示です。
これをWebデザインで表示しようと思えば、リンクを制御するCSS必要なのは次のような形。
a{
display: block;
width: 200px;
height: 3em;
border: 1px solid #000;
padding: 0.5em;
}リンクをブロック要素にして、幅と高さをタッチするのに十分なサイズを指定。これでタッチするエリアを広げます。borderは範囲が目視できるようにするためなので、これはbackground-colorで示すなどのやり方があるでしょう。paddingは単に見やすさを確保するため。
超高精細画面に対応
Retinaディスプレイは、１画素のサイズがやたら小さいため、CSSを分けるなどして対応する必要があります。
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2)
{
(ここにRetina用のCSSを設置。)
}または、headerの中でCSSファイルを分割。
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 1.5)" type="text/css" href="android.css" /> <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="retina.css" />
（参考サイト：[css,js] Retinaディスプレイ対策 – WebTecNote, [CSS]Retinaディスプレイを考慮したCSSスプライトの実装方法 | コリス）
画像はともかく、文字サイズはemや％で指定すれば分けなくても良いのではないかという気もするので今度確認したいと思います。
これは私個人の考え方ですが、Webデザインの役割を、「情報をすばやく得る」というところに重点を置くならば、文字サイズを小さく、pxで縛るという見た目重視のデザインはむしろ「良いデザイン」とは言えなくなるのではないかと思います。
むしろ、各デバイスで表示が異なってもかまわないという「遊び」を設け、文字サイズは各デバイスが標準で持っているブラウザのデフォルトサイズに任せてしまう方がよいのではないかと思います。
多様な表示幅に対応
いわゆるレスポンシブWebデザインというやつですが、表示画面の幅が一定以下になるとサイドカラムなどがメインカラムの下に回りこむようにします。（参考：レスポンシブwebデザインで制作する時のポイント │ Design Spice）
このときのHTMLの記載順は、メインカラムのコンテンツがサイドカラムより先になります。
この順だと、音声読み上げソフトを使用した際、主なコンテンツを読み上げてから他のリンクなどがかかれているサイドカラムのコンテンツを読み上げる形になります。逆の順番よりも欲しい情報を先に得られるため、音声読み上げソフトとの相性が良いのがレスポンシブWebデザインの特徴の一つです。
高輝度に対応
携帯電話等のバックライトは、かなり輝度が高く目が疲れます。そのため背景色は真っ白（#FFF）よりもすこしグレーの色(#DDDなど)にする事で読みやすさを確保します。
あまりグレーを強くしてしまうと、今度は高コントラストが必要な弱視者に不親切となるので、実装方法は検討が必要かもしれません。
これらって結局、アクセシブルWebデザインだよね？
不自由な手でのクリックがしやすいリンク、文字サイズの相対指定、コンテンツの記載順などは、アクセシビリティを確保する際にも都合が良いデザイン。非障害者にとっても扱いやすくなるユニバーサルデザインというのは、デザインの一つの理想形です。機能美に優れたデザインと言ってもいい。そういうサイトをガシガシ作っていきたいものです。
