2013年 12月 14日に開催された『CSS Nite LP, Disk 31: Webデザイン行く年来る年（Shift7）』で、私は「スマートデバイス 2013 → 2014」としてスマートフォンの今年とこれからを考えるセッションを担当しました。
セッションの中では、上場企業 2,000社超の Webサイトを目視で確認しながら、スマホ対応をしているかや、どんなスマートフォンサイトを展開しているかなどを紹介していきました。
ここでは、スライドとともにそのエッセンスを紹介していきます。
スマホ対応しているのは1割強
今回、上場1部・2部・マザーズ等で代表的な 2,139社を調査しました。すると、288社がスマホサイトを提供していました。
鉄板デザインパターン
その中で、「鉄板」と言えるデザインパターンは、右上にメニューボタンがあり、画面の目立つ場所にはカルーセル、その下にメニューが展開されるという構成のサイトです。
ただし、右上のボタンについてはメニューで利用するとは限らず、「検索」や「PC切り替え」「シェア」「お問い合わせ」や「アクセス」などに利用され、各社でこのボタンの位置付けが違っていて面白かったです。
iPhoneホーム型とフラットデザイン化
次に多かったのは、「iPhoneホーム型」と名付けたボタンが縦横に並ぶ、iPhoneのホーム画面に似た構成です。特に、iPhoneが出たばかりの頃に非常に流行ったデザインでしたが、現在は画面の大型化などから真ん中の列のボタンが押しにくいこともあり、あまり採用されなくなりました。
しかし近年これが進化を遂げ、ボタンが非常に大型になったものが現れました。
フラットデザインの流れや、Windows 8のデザインなどから進化を遂げたものと思われます。
サイネージ型
もう一つ目立ったのが「サイネージ型」と呼ばれる、画面いっぱいに写真を配置してブランドイメージなどを強調するスタイルです。
スマホサイトならではの配置と言えるでしょう。中には、画面の中に馴染むようにボタンを配置するスタイルもありました。
レスポンシブ Webデザインの2013年
上場企業の Webサイトで、スマホ対応しており、かつレスポンシブ Webデザイン（RWD）を採用しているサイトは、2,139社中 7社でした。（ただし、あくまで私が目視で確認した限りなので、見落としている可能性はあります）
対応している企業は次の通りです。
いまこそ RWD
2,000社中 7社というのは、非常に少ない数字に思えます。2013年も Webクリエイターの間で話題に上らないことがなかった RWDですが、とても世間に浸透しているとは言えない数字に思えます。
しかし、私は 2014年こそ RWDが普及する年であると考えています。
これまで、RWDを含めてスマホサイトというのは「流行」でした。先端を行く企業が先行して採用したり、ターゲットがすでに PCからスマホに移行した企業やサービスが先行して取り組んできました。
しかし今回調査したのは、上場企業の「企業サイト」です。大きな企業の場合は、サービスサイトを他に多く持っていたりしますが、企業サイトはあくまでIR情報や採用情報などを発信できればよいという位置付けの企業も多いでしょう。
そのため、そもそもスマホ対応が不要なのではないかと考えました。しかし、これらの企業サイトも採用活動が活発になってくる時期などには、やはりリニューアルの対象となります。多くの学生がスマートフォンへ移行していく中で、スマホ対応は必須と言えるでしょう。
スマホ専用サイトが作れない時代
しかし、これから「スマホ専用サイト」を作るというのは非常に困難になってきます。まずはミニタブレットの登場。これらのデバイスを「スマホ」と見るか「PC」と見るかの判断が難しくなります。
また、最近のデバイスでは「片手モード（Galaxy Note 3）」や「フローティングウィンドウ（Xperiaなど）」、Webブラウザを画面の中で任意の大きさで起動できるものが現れてきており、そもそも「デバイスの横幅」というものが意味をなさなくなっています。
そんな中で、スマホアプリを作るのと同じ要領で、UI設計などをしながら Webサイトを作ることに意味があるのかが怪しくなってきました。
コストのかからない RWD
これまで、RWDは「結局設計や構築に手間がかかるので、専用サイトよりもコスト高になる」という事が多々ありました。
しかし、現在では「Bootstrap」や「Foundation」などの良質なフレームワークも登場しており、構築は極めて簡単です。
もちろん、デザイン性が重視されるサイトでは使いにくい場合もありますが、上記のような上場企業の企業サイトなどの場合は、凝ったデザインよりも「コスト」と「コンテンツの操作しやすさ」により重点が置かれることも多くなるでしょう。
そこで、このようなフレームワークの活用は、今後ますます進むだろうと考えられます。
2014年の RWDとは
では、RWDの構築が楽になるのかといえば、そうとも言えないかも知れません。むしろ「本当の RWDが始まる」と言えるかも知れません。
「Responsive」とは、もともと「反応」とか「応答」という意味の単語です。これまでのRWDは、この「反応」は「画面幅」という要素に対してのみ指していました。
しかし、ユーザーにとって「画面幅」というのは本当に一つの要素でしかありません。ユーザーは今立っているのか、座っているのか、歩いているのか（歩きスマホは良くありませんが）。また、今が暗いのか明るいのかなど、置かれている状況がさまざまに変わります。
デバイス自体には、これらの状況を把握するために、さまざまなセンサーが搭載されています。傾きセンサーや明るさセンサー、近接センサーといったもので、例えば部屋が暗ければ画面の明るさを調整したり、顔が近づいてきた場合は画面を消したり、Siriを起動する（iPhone）と言った機能が搭載されていたりします。
今後、Media Queriesの進化でこれらのセンサーが Webサイトでも活用できる日がやって来ます。これらが使えるようになったとき、私たちはどんな「Response」を示す Webサイトが提供できるのでしょうか？
暗い中で、自社の Webサイトを見ているユーザーは、なぜそのような状況なのか、常に動いているユーザーは自社のサイトになにを求めているのか。それらを考えながら「Responsive」な Webサイトを作っていく必要が出てくるでしょう。
私が、このセッションで伝えたかったことは、結論のないものでした。ただ一言伝えたいことは、このスライドです。
2014年も頑張っていきましょう！
コメントを残す