自分でできる簡単更新!オリジナルのホームページ制作ならkayokiseki-design

  

レスポンシブとアクセシビリティ

久々の「大手サイトに勉強させてもらったシリーズ」です。やはりWebデザインといえば海外が先行しているので、わたしは海外サイトをザッピングします。

今回「レスポンシブとアクセシビリティ」というタイトルをつけたのは、少々内容からすると皮肉めいています。

Webサイトはデバイスサイズがあまりにも多岐化しているため縛られてきている部分が少なからずあります。しかしこのサイトを見たとき、今後面白い方向に進む足音が聞こえた気がしました。「閲覧する権利」ではなく「閲覧する資格」を、閲覧側も積極的に持つ努力をすべきだ、というある意味強気のスタンスです。国の文化の違いもあろうと思いますが、いくつかのヒントを見つけていただければ幸いです。

[広告]


それは、日本でもおなじみの「ケンタッキーフライドチキン」の米国公式サイトです。

KFC: Finger Lickin’ Good http://www.kfc.com/


非常にシンプルでオシャレです。

メニューは、まず見たいカテゴリーを選び、横スクロールして見たいアイテム画像を選び、クリックすると詳細情報ページに移る方式。下部の赤いバーでは郵便番号を入力することで近隣店舗を調べることができます。閲覧者がまず知りたいメニュー情報と近隣店舗情報は、このシンプルなトップページでちゃんと得ることができるんです。さらに驚くべきは縦スクロールをさせません。


ちなみに。日米のサイト比較として、ケンタッキージャパンの公式サイトを例に出します。日本の企業サイトテッパンのお知らせ・SNS・各ページへのバナー・フッターメニュー。これは文化の違いです。日本が閲覧者への情報提供の「量」をして良質なサービスとするのに対し、海外では企業ブランドイメージ訴求はそれに比して謙虚にすべきとはされません。情報が雑多なように見えますがこれが日本の公式サイトの安全パイです。日本で米国のようなサイトを作ったらまずユーザーの理解は得られないといったところ。


ケンタッキーフライドチキン http://www.kfc.co.jp/


では、早速スマートフォンのキャプチャで見ていきましょう!

あ…れ。Android標準ブラウザ(4.2)では表示されません。

これについては

Android 4.3以前の標準ブラウザーは修正パッチの提供打ち切り、セキュリティ担当者が見解を示す -INTERNET Watch

に詳しいのですが、Andoid4.3以前の端末を所有するユーザーは、標準ブラウザでなくChrome やFirefoxアプリをダウンロードして使うように言われています。でも果たしてモバイルユーザーの何%がこの情報を知っているでしょうか。ましてや、わたしは仕事柄標準ブラウザとChromeを使い分けていますが、ブラウザアプリをダウンロードして使っているAndroidユーザーが何%いるでしょうか。このへんで早速強気です。

日本ではPCブラウザのバージョンも相当前のものでなければきちんと表示できるようにすべきという感じです。確かにPCを普段使用しない方のブラウザバージョンはとんでもないことになっています。でも普段使用しないひとのアクセシビリティを考える必要性って実はそんなにないんじゃないかというのが私の考えです。この強気に何かを見てしまいましたヨ(笑)


やはり、スマホサイズでも縦スクロールバーがでません。これは驚きです。ただでさえシンプルなデザインなのに、PCサイズで表示される左側のモノクロイメージも実はいらなかったんですね。


このページを横ビューにして見ましょう!やはり縦スクロールは出ないので、見えるのはメニューのみになります。見たければ縦にすればいいと。


メニューの下層を掘ってみます。このページは縦スクロールはするのですが、「sodium(mg)」がはみ出ていて見られませんが、なんだかもうこの世界に引き込まれます。


さて、トップ右側の動画スライダーの最後のページは別サイトへリンクしています。カーネルズホールという動画集です。ここでは「横で見てくれ」と指定されます。


非常にこだわりをもって作られています。デザインも美しいし、モーションや動画も面白いです。ぜひご覧ください!


ということで大いに考えさせられました。だいたいモバイルは2年弱で機種変更をしていくのが一般的と思いますが、ディスプレーサイズをどの機種までさかのぼってカバーするのか、縦ビュー横ビュー、レスポンシブの特徴である縦長仕様にはドキリとする斬新なヒントだと感じます。

[広告]

twitterヘッダー画像の制作のコツ ブログTOP SoyCMSでお知らせラベルを実装する
Hotentry
Blog Post
クリックして上に戻る