コーポレートサイトリニューアルにあたって配慮したこと（レスポンシブ対応編）

コーポレートサイトリニューアルにあたって配慮したこと（レスポンシブ対応編）

みなさん、こんにちは。

今回のコラムはコーポレートサイトリニューアルに関する記事でして、レスポンシブ対応編です。
前回の記事でも少し触れましたが、サイトリニューアルにあたって最も気を使いました。
これまでもレスポンシブ対応には取り組み始めてたモノの、厳密なルールやメリット・デメリットを把握していなかったため、漫然と記述しチェックをしてた感じでした。
今回はjQueryのレスポンシブ対応など気を使いそうな箇所を自らつくったため、色々気づきがあってよかったと思っています。
そんなことを諸々書いてみます。

このサイトリニューアルシリーズについては以下にインデックスをまとめていますので、そちらもご覧ください。

• コーポレートサイトリニューアルにあたって配慮したこと（総括編）
• コーポレートサイトリニューアルにあたって配慮したこと（コンテンツ編）
• コーポレートサイトリニューアルにあたって配慮したこと（SNS連動編）
• 本記事 : コーポレートサイトリニューアルにあたって配慮したこと（レスポンシブ対応編）

レスポンシブ対応とは、各種スマートフォン（ iPhone や docomo スマホ、 au スマホ 、格安スマホなどのスマートフォン端末）やタブレット、 PC などの端末毎、ブラウザ毎に 1 枚の html ファイルの内容を css 装飾や javascript などの装飾によって表現を変えて出力することを言います。

長いので要約しますと、スマホと PC とタブレット端末毎に 1 枚の html の内容を出し分ける対応のことを言います。
PC 用の html ファイルとスマホ用の html ファイルをプログラムによって出し分ける場合はレスポンシブ対応とは言いません。
レスポンシブ対応のことをマルチデバイス対応やスマホ対応と言うこともありますので、憶えやすい言葉で憶えられると良いと思います。

細かい話になりますが、”端末毎、ブラウザ毎、、、”と書きましたが、ブラウザサイズによって出力を出し分ける事も出来ます。
ブラウザを開き、ブラウザサイズを小さくすることで表示内容が異なるサイトもございます。
このことを”可変グリッドレイアウト”と言いますが、ここではそれには触れません。
このブラウザサイズのことを厳密には「 viewport 」（ビューポート）と言いますが・・・細かい意味がついて回ってきますので、”端末毎に出し分け・・・”という解釈で問題ないと思います。

どのようなレスポンシブ対応が”良いのか悪いのか”という概念はありません。
運営者様の都合や好みの問題ではないでしょうか、そんな気がしています。

当サイトでは、以下の通りに設定しています。

• 端末の持つブラウザサイズの最大が 769px 以上の場合、 PC 用の css を読み込む。
• 端末の持つブラウザサイズの最大が 768px 以下の場合、スマホ用の css を読み込む。

上記の通りですので、 2 種類の css を読み込み適宜出力しています。
ですので、タブレット端末用の css は用意しておりません。
因みにですが、 css を追加すればタブレット端末向けでも出力は可能です。
タブレット用の css を用意しなかった理由ですが、タブレット端末でも十分に PC 用表示を見ることができるため、別途用意はしませんでした。
読み込みファイル数をこれ以上増やしたくなかったという理由もあります。

端末毎に最大のブラウザサイズは異なります。
当然ですよね、小さいひと昔前のスマホと今のスマホでは画面の大きさが違いますよね、そういうことです。
今現在のサイズを書いてみますね。

• iPhone4s : 640px × 960px
• iPhone 5s : 640px × 1136px
• iPad Air : 1536px × 2048px
• Galaxy S4 : 1080px × 1920px
• Nexus 7 : 1200px × 1920px
• PC : 1024px～

凡そ、上述な感じです。
細かい区切りはもっとあるんですが、その時々によって変わるため凡そ・・・ということでお願い致します。

上述がだいたいの前提ルール的な話になります。
ここから先がSEOや検索された時に与える影響的な話になります。

レスポンシブ対応にすると単純にスマホからサイトを閲覧しても、諸々がスマホに最適化されているため、見やすい状態になります。
ユーザーさんに対してストレスを感じさせない・・・という要素が最も大きいことなのかなと思っています。

よく考えて頂きたいのですが、外出先でスマホで調べ物をした時に、 PC で見るようなサイトが出てくると見難いのですぐに戻ってしまうと思います。
極論ではありますが、スマホアプリがスマホ向けではなくタブレット向けのサイズになるとアプリを楽しめませんよね、つまりはそういうことです。

また、 PC サイト向けで考えられたサイトは画像を多用したり、javascript を多用したりということがあります。
そういうモノをスマホではレンダリングさせないようにすれば、幾分、楽に表示している感じがします。

ですので、レスポンシブに対応することで、単純に閲覧だけでなく色々な面で快適な閲覧をユーザーさんに提供することになると考えています。

プログラムによって別のページに割り振りするという手段でも構わないですが、プログラムの組み込みやコンテンツのあり方によってサイトの構造が変わります。
そのため、スマホ対応だけのためにプログラムを組むのは効率的ではない時があります。
その時のためのレスポンシブ対応だと思ってもらえるといいのかもしれません。

それを言ってしまうとお終いです。笑

でもですね、スマホ対応にすると、スマホから Google で検索して出てきた検索結果画面に「スマホ対応」とスニペット（サイトの説明文章）の箇所に表示されます。
これによって視覚的にユーザーさんがスマホページを探しやすくなります。
ですので、自ずと CTR （検索画面におけるクリック率）に違いが出ますので、 SEO の問題というより機会損失ということになりますよね。
地味に大きなことかなと思います。

また、先ほどの話ではないんですが、外出先からスマホでこれから向かう先に電話をする時など便利ですよね。
SEO に関係するか否かも重要だとは思いますが、よくよく考えてみるとやはりレスポンシブ対応にすることは大切なことかなと思いましたので、弊社では対応した次第です。

これまで、レスポンシブの良いところしか書いていませんが、それでもデメリットがあることも間違いありません。

どれだけ言ってもコンテンツ満載の PC 向けサイトでは、スマホにとってはしんどいことがたくさんあります。
画像の多様、動画の閲覧、Javascriptの多様などなど。
こればかりはレンダリングさせないと言っても、一度は全ての内容を読み込まれるため、誤魔化しきれないことも多々あります。
wifi に繋いでいれば問題ないことでも、処理の重さというのはwifiでは解決出来ません。

そういうサイトはスマホではそもそも閲覧しない方が良い・・・という話ではあるんですが、サイトの運営社様からするとそうはいきません。
そういう場合こそ、プログラムによってページを出し分けすることが必要になると考えています。
ですので、レスポンシブ対応のメリット・デメリットはサイトのコンテンツのあり方などに大きく左右されるため、細かくは書きません。
ですので、このようなデメリットは勘案せずに書いています。

やはり出来るならスマホ対応含め、きっちり整理しながら最適化すべきかな、と思います。
ポジショントークになってたり、弊社も遅ればせながらの対応になったので偉そうなことは言えませんが、少なくともそんな諸々を思いました。

html やスマホのためのCSS記述で配慮したことを簡単に書いておこうと思います。
そこからの細かいルールなどについては、各々でお調べ頂ければと思います。

• 横幅は基本的にすべて「 % 」で指定。
• フォントサイズも「 % 」で指定。
• インターフェイスは iPhone と docomo の android でチェック。
• モバイルフレンドリーテストにてチェック。
  ※モバイルフレンドリーテスト
• page speed insights にてチェック。
  ※PageSpeed Insights
• 1 つの html 内に、 PC 用とスマホ用のコンテンツの出し分け的な感じで同じようなコンテンツを共存させない。
  display:none; で隠す箇所を極力少なく。
• float でコンテンツを詰めない。
  横幅のサイズを指定出来ない場合は float は使わない。
• html5 に拘らない。
  xhtml 1.0 strinct で記述していますが、もしhtml5の必要性を感じる場合は、後からでも修正が可なので何かある場合は後から修正。

凡そ、上述のことに配慮致しました。
スマホ対応で迷われている方は、上述を守ればだいたいスマホ対応が出来てしまいますので、是非試されてみては如何でしょうか。

リニューアルして 1 ヶ月と数日程度ではありますが、凡そ 2/5 程のアクセスがスマホです。
1/5 がタブレット端末というところです。
なんだかんだ言って対応して良かったな・・・というのが正直なところです。
普段サイトを見ない方とお会いしてる時でもスマホから見てもらえますしね、大きなことだったと思っています。

レスポンシブ対応によって得られる直接的な収益というのは、そもそも媒体としての役割を持ったサイトでない限りは”ほぼ無い”に等しいことだと考えています。
どちらかと言えば、パブリシティ的な役割を持っているのかもしれません。
ですので、レスポンシブ対応に対する目的や役割の考え方によって対応の意味が大きく変わってきます。

ただそれ以上に信頼して頂くためであったり、気遣いなどで言えば、やはりスマホ対応している方が信用して頂けることは間違いないと思っていますので、何かしら対応することをオススメしたいと改めて感じたリニューアルでした。

執筆 : 清水 隼斗