松村(左)

レスポンシブWebデザインでのホームページ作成と、スマートフォンサイトの作成。この2つの違いをご存知でしょうか。

レスポンシブWebデザインというのは、1つのURLでパソコン画面に最適化されたホームページとスマートフォンやタブレットなどの解像度やアクセス端末に最適化されたレイアウトを表示させる「仕組み」としてここのところ認知度を高めているようです。

メリットとデメリットに関しては、当ホームページでもお伝えしていますので、参考にしていただけると嬉しく思います。

しかし、タイトルにある通り、レスポンシブWebデザインは機能ではなくフレームワーク(考え方)として捉えることがとても重要になってきています。

レスポンシブWebデザインで一番危険なのはスマートフォンで拡大縮小させて見なければいけないホームページではなく、【画面幅】にピッタリなレイアウトに修正させることをレスポンシブWebデザインと解釈してしまうことです。

画面幅はピクセルで表示され、解像度という尺度でホームページのデーターに命令を出します。簡単に言うと例えば、幅が500ピクセル以下の端末からアクセスされた場合はAというレイアウトで表示させなさい、501〜1000ピクセルまではレイアウトタイプB。1001ピクセル以上はタイプC。数字に関しては、分かりやすいように区切りの良いところで表示しています。実際は1024ピクセル728px、360など切り替わるのが一般的です。








レスポンシブWebデザインを取り入れた場合、システム的な話をすると、その命令方法はいくつかあります。その中でもっとも一般的な方法として考えられているのが、見た目に直結する画面サイズ(解像度)という尺度です。

そもそも、画面サイズと解像度は異なるものなのですが、同一と考えてしまっているWebマスターも少なくありません。

答えだけ言うと、解像度判別だけでレスポンシブWebデザインの命令を出させると、Androidスマートフォンでアクセスした場合には、スマートフォン用のレイアウトに変換されるのに、iPhoneの場合は、PC用のレイアウトのままという現象が起こります(2016年以降は起こりません)

また、最近はスマートフォンの画面サイズや解像度のレパートリーも増え、制作側と発注側の認識のすれ違いなども起きているようです。

そこで必要になってくるのが、レスポンシブWebデザインという言葉のイコールで覚えておいていただきたい、「モバイルファースト」という考え方です。

ざっくり言うと、あなたのホームページにユーザーが初めてアクセスする端末は、モバイル端末だと想定してホームページの構成を考えるというフレームワークです。

この考え方は、何も見やすさだけの話ではありません。あなたが販売している商品の内、どの商品をWeb上で販売することが、次のセールスに結びつくのかといったマーケティングマインドに立ってWeb制作を行う必要があるわけです。制作だけに関わらず、Webの運営戦略を構築することにも繋がります。

更に逆を言えば、レスポンシブデザインのホームページ作成を提供している私が言うのも変な話ですが、それほど戦略的にホームページ作成を考えていない場合なら、レスポンシブデザインの採用は必要ないと言えるでしょう。

なぜなら、魅力的な情報やサービスの場合は、スマートフォン上の見にくさや読みにくさ、縮小拡大の作業を苦ともせず、あなたの情報は閲覧されるでしょうし、商品は購入されるからです。また「じっくり読みたい記事」「しっかりと調べてから購入したい商品」などは、スマートフォンでチェックした後にパソコンでもう一度閲覧すると言う傾向もあります(もちろん、そういった傾向や心理を逆手にとったセールスライティングも存在します)。

(2017年追記)

具体的な例が過去の記事には掲載されていなかったので追記しておきます。

例えば、このサイトでは、スマートフォンで閲覧している場合に限り、一定画面をスクロールして読み進めた場合には、最下部に問い合わせようボタンが出現するようになっています。

記事の文量が少ない場合は、記事末に、タブレット以上の大きい画面で閲覧されている際に表示されるお問い合わせボタンと同じものが、スマートフォンで閲覧している場合にも表示されます。しかし、記事文量が多いエントリーやコンテンツの場合は、問い合わせボタンが重複しないように、端末による閲覧シーンの違いを考慮し問い合わせボタンを使い分けているわけです。もちろん、スマートフォン閲覧時に表示される問い合わせボタンは、タップをすればそのまま電話をかけられるようなボタンを表示させています。

※ この記事末の問い合わせボタンは、問い合わせページへジャンプするボタンでタブレット以上の端末でも同じものが表示されます。

しかし、この「タップすると電話発信」のボタンをPCやタブレット端末で表示させると、問い合わせページに移動するボタンを別途掲載しなければならなくなり、操作性が落ちてしまいます。業種やサービス内容によっては、スマートフォンでサイトを閲覧されるシーンと腰を落ち着けてパソコンの画面で閲覧する場合とでは、閲覧者の心理状態も、また顧客単価が大きく変わってくることもあります。

レスポンシブデザインは「モバイルファースト」という視点から始まりましたが、昨今では、それぞれの閲覧シーンを想定しながら、それぞれのコンテンツデザインを施していく必要があるわけです。

今すぐお電話を