インターネットの利用習慣の変化

スマートフォンやタブレット端末の利用者の爆発的な増加は人々のインターネットの利用習慣にも大きな変化をもたらしました。
今まで、外出先でモバイル端末を用いて情報収集を行い、帰宅後、自宅のPCで買い物をするという流れが多かったのが、最近の利用者、特に若い世代においては自宅にいたとしてもPCは使わず、情報収集から買い物などのコンバージョンまでをモバイル端末で済ませるというシーンが増えてきているのです。

避けられないマルチデバイス化

webサイトを持つ企業にとって、こうした利用習慣の変化への対応は必要不可欠な課題となっています。
現在あるwebサイトをモバイル端末で閲覧できるようにする事はもちろんのこと、モバイル端末で閲覧することを主眼にしたwebサイトの構築を積極的に行いマルチデバイス化を進めていくことは避けられない状況です。
またユーザーの声に耳を傾けてみると、ある調査では約7割のスマートフォンユーザーが、それぞれの機器に使いやすくwebサイトを最適化してほしいと希望しています。

レスポンシブデザインでマルチデバイス対応

マルチデバイス化を進める上では、各デバイス向けにサイトを用意したり自動変換サービスを利用するなどさまざま方法が存在します。
その中で、注目を集めているのがレスポンシブデザインという手法です。
ひとつのコンテンツデータをデバイスの画面幅に合わせて表示する事ができる方法で、コンテンツを一元管理できる、URLを一本化できるなど様々なメリットを持っており、Googleも推奨している方式です。

レスポンシブデザインを取り入れたwebサイトでマルチデバイスに対応した戦略的なwebサイト運営をしてみてはいかがでしょう?

レスポンシブデザインの利用が1.5倍に

マーケティング会社のAtlas21社が、世界の大企業を対象に行った企業サイトのマルチデバイスの対応状況の調査結果が発表されました。
2014年に行われたこの調査によると、マルチデバイス対応を行っている企業の割合は、増加傾向にあり全体の半数に近づいています。
またその中で、レスポンシブデザインを取り入れている企業は半年でおよそ1.5倍に増加しており、その注目度の高さがうかがえます。

サイトの構築手法として認知が進むレスポンシブデザイン

当初は中小企業のサイトや新製品やブランドのキャンペーンサイトへの導入が多かったレスポンシブデザインですが、近年では、大手企業のコーポレートサイトに取り入れられる例が多くなってきています。
これは、レスポンシブデザインがwebサイトの構築方法のひとつとして確立され、また認知されてきたことを示しているといえるでしょう。

減少するPCアクセス、増えるモバイルアクセス

GoogleやYahoo!などの大手サイトへのPCでのアクセスが減少する中上記のようにレスポンシブデザインを導入する大企業が増えている現状はそれだけモバイル、PCなどのデバイスを気にすることなくwebサイトを閲覧する利用者が増えているためだといえるでしょう。
実際、さまざまなサイトでアクセス解析を行うと、全体の50％を超えるユーザーがタブレットやスマートフォンなどのモバイル端末からのアクセスであるという結果が得られる場合が多くなっているようです。
こうした利用者のニーズに応えるためには、レスポンシブデザインを取り入れたwebサイトの構築が有効です。

モバイルファーストを念頭に進める

様々なデバイスに一つのソースで対応できるレスポンシブデザイン。
その制作を行う上で最も大切なのが、モバイルファーストという考え方です。スマートフォンなどを前提とした、必要最低限の要素だけを配置した軽量なコンテンツの設計を心がけることでタブレットやPCへ展開した際も、様々な事がスムーズに進みます。

検証、確認、修正の重要性

レスポンジブデザインでのwebサイト制作では、デバイス毎の検証、確認、修正がかなり重要な工程となってきます。
PCの各ブラウザでの検証はもちろん、タブレット、スマートフォンの実機での検証も必ず行いましょう。

レスポンシブデザイン制作の作業の流れ

・ワイヤーフレームの作成
サイトのどこに何を配置するかをレイアウトしていきます。
このとき意識したいのが前述したモバイルファーストの考え方。
気を付ける点としては、それぞれのデバイスへと展開したときに整合性がとれた配置にするということです。

・デザインの作成
デザイン作成時に気を付けるポイントは、クライアントとのコミュニケーションをしっかり取りながら行うという事です。
まずはアクセスした際に利用者がはじめに見る部分であるファーストビューを作成し、そのテイストがクライアントの求めるモノに応えられているのかを確認しましょう。

・コーディング・検証、確認、修正
確認すべきポイントとしては、
ワイヤーフレームどおりにコンテンツが配置されているか？
デザインどおりにコーディングがされているか？の2点です。
これは、かならず実機で確認を行うようにして下さい。
PC上で、スマートフォンやタブレットをシミュレーションできるアプリなどもありますが、ボタンがタップしやすいものか？
ユーザーを迷わせる設計になっていないか？などは実機で見る方が確実に分かりやすいです。

マルチデバイスに対応したレイアウト

現在、スマートフォンのディスプレイというと4～5インチがメインとなっています。しかし先日発売されたiPhone6 plusでは6インチのディスプレイが採用されました。またタブレットでは7～10インチと様々な大きさのものが主流となっていたり、モバイル端末の画面サイズの多様化はさらに進みつつあります。
このようなマルチデバイス化に対応したwebデザインのレイアウトにはどのようなものがあるのでしょう？

マルチデバイスに対応したレイアウト

・レスポンシブデザイン
ひとつのHTMLファイルを、CSS3で制御し、画面サイズの異なる様々なデバイスに最適なページのレイアウトやデザインを調節し表示する。

・リキッドレイアウト
画面のサイズに応じて要素を相対的もしくは可変的に調整するレイアウトです。メリットとしては、文字や画像だけでなくボックスとしての要素がデバイス毎に伸縮するという事です。

・フレキシブルレイアウト
リキッドレイアウトと同じように、要素を相対的、可変的に調整します。
しかしフレキシブルレイアウトの場合、最小幅と最大幅を指定するので大きな画面で見た場合、周りに余白が生まれます。

・可変グリッドレイアウト
ブロック毎に文字や画像を配置するグリッドレイアウトにリキッドレイアウトのもつ可変性を取り入れたレイアウトです。
ブラウザのサイズに合わせボックス状になった要素が配置されていくため、情報系のサイトなどによく使用されます。

レスポンシブデザインと組み合わせて理想のレイアウトを

前述したような各デバイスに対応したレイアウトをレスポンシブデザインと組み合わせることでさらに魅力的なサイト制作が可能になります。
様々なサイトを参考に、自分の作ろうとしているサイトに最適なレイアウトがどのようなものなのか考えてみましょう？