私達の生活になくてならないものとなったスマートフォン。スマートフォンの普及率も毎年増加し、Webサイトもスマートフォンからのアクセスも増加傾向にあります。PC、スマートフォン、タブレットと様々なマルチデバイスへの対応をせざるを得ない状況になってきました。
今回は、私的に考えた、今後のスマートフォンサイトのトレンドをまとめてみました。
リッチな表現と演出
毎年新しいスマートフォンがぞくぞくとでて、常に機能やスペックがアップしています。それによりデバイスの規格や制約、機能（ブラウザごとの仕様の違いもありますが）にとらわれず、いままで、よりリッチな表現、演出ができるようになってきました。
今後もスマートフォンでできることが増えることによって、いままにできなかったようなリッチな演出ができるようになれば色々なことができるようになりますね。
HEP FIVE（ヘップファイブ）大阪・梅田 赤い観覧車のファッションビル
背景の観覧車や、メニューボタンのアニメーションなど、レスポンシブサイトでもスマートフォンでもPCサイトと同じ動きが再現できており、サイトのコンセプトが統一されています。
WRECKING CREW ORCHESTRA / EL SQUAD
背景に動画を使っており、PCでもスマートフォンでも同じ体験ができるリッチなサイトになっています。レベルが高い！
WebGLのサイト（iPhone対応の3Dコンテンツ）つくりませんか？
カヤックさんでは、WebGLを利用した面白いコンテンツを公開しています。スマートフォンならでは使い方などありますので、一度見てみるといいかもしれませんね。
モバイル・ファースト
すでに、サイトへのアクセスの大半以上がスマートフォンが占めていることは珍しくありません。今後もさらにスマートフォンからのアクセスが増加することを考えると『モバイル・ファースト』のWebサイト作り方も今後も増えていくことでしょう。PC→スマートフォンとスマートフォン→スマホのWebサイトの作り方・考え方など異なってきます。
1.フラットデザイン
フラットデザインが多くのサイトで採用されている理由として、マルチデバイスに対応できるよう画像を極力使わずにHTML5/CSS3を利用することで様々なデザインを再現できるということが１つあります。
PCサイトもスマートフォンのレイアウトを想定したレイアウトとなっています。テキストなどはほとんど画像を使わずにデバイスフォント,Webフォントで再現されています。
2.タッチデバイス
これまで、PCのブラウザでネットをする際は、マウスでの操作が基本になっていました。ボタンをクリックするには、ボタンの上にマウスカーソルを移動してボタンを押す、という操作が今までの基本操作でした。しかしスマートフォンの操作は、指を使って操作するタッチデバイスとなっています。モバイル・ファーストの考えならとっても重要なところになってきます。
タッチデバイスでは、タップ、スワイプ、ピンチイン、ピンチアウト、シェイク、フリック、スクラブなどタッチデバイスならではの操作方法が様々あります。操作方法を利用したWebサイトもこれから増えてくるのでないでしょうか。
【左】関西のおでかけWEBマガジン マイ・フェイバリット関西
【中】ビタミン炭酸 MATCH
【右】fukumimi
多くのサイトで取り入れられ、メインバナーなどで使われているスライダー部分は、スワイプによって切り替えることができるようになっています。
3.シンプルなUI
スマートフォンでは画面サイズが限られているので、様々な要素を詰め込み過ぎずシンプルなUIを意識したいです。
【左】芦屋大学
【右】Frosch
これからより多くのWebサイトがマルチデバイス化が進んでいくかと思います。これからはスマートフォンでも快適にWebサイトを観覧できるようなデザインをしていきたいですね。
【参考資料】Windows のタッチ操作
タブレットに関する資料ですが、スマートフォンでのタッチ操作とはそんなに変わらないので参考になります。タッチターゲットのガイドラインアクセシビリティ、指のサイズ、持ち方などスマートフォンを使うときのことなどに共通することが書いてあります。
【参考資料】iOSヒューマンインターフェイスガイドライン
iOSアプリに関する記事ですが、スマートフォンを使うところでは共通していますので、参考にさせていただきました。「色とタイポグラフィ」「ブランド」「アニメーション」などWebサイトのデザインで重要なことなどとっても勉強になりますよ。