IT・WEB・PC事業を行う9BOX IT・WEB・PC事業を行う9BOX

スマホ対応レスポンシブデザインの作り方

レスポンシブデザインとは?スマホ対応のCSS書き方

レスポンシブデザインの作り方はHTMLファイルにビューポートの設定をし、CSSにメディアクエリを記載することで、デバイスサイズに応じた形を変更することができます。

レスポンシブデザインとは?

スマホユーザの使いやすさを考えたレスポンシブデザイン

レスポンシブデザインとはスマートフォンやipadなどデバイスに応じて大きさを変えたりメニューを下部に配置したりするユーザの使いやすさを考えた設計です。

レスポンシブデザインのメリット

メリット
  • スマートフォンで見ずらいということを解消できる
  • パソコンよりスマートフォンからのユーザが多い
  • ページをわける必要がない
  • 読み込み時間を短縮できる

スマートフォンで見ずらいということを解消できる

今でもスマートフォンで見た時にパソコン用であるかのような文字の小ささで拡大しないと分からないWebサイトも多々あります。

アマゾンの表示速度が0.1秒速くなった場合売上の1%変わると言われるように人は時間をかけることを嫌います。

画面を拡大する時間、タップミスで押してしまった時間を短縮するだけでなくスマートフォンで見ずらいということを解消できます。

パソコンよりスマートフォンからのユーザが多い

ホームページをどのように活用するかにもよりますがスマートフォンからのアクセスユーザがパソコンのアクセスユーザに比べ7:3と大きく上回っています。

大手検索エンジンのGoogleもモバイルフレンドリーにする方法としてレスポンシブデザインを推奨しており、モバイルの検索順位に影響すると言われています。

Yahooの検索エンジンもGoogleの検索技術を利用しており、ほぼ同じ順位になっている為スマートフォンのユーザをメインのターゲットユーザとしたレスポンシブデザインを取り入れる方が得策と言えます。

ページをわける必要がない

ページをわける必要がないメリットは2つあります。

管理が容易になること

製作者側からするとPC用とスマートフォン用の中身が同じページにcanonicalやalternateの設定をしないことや別ページで作成する手間が省けることがあげられます。

また異なる内容がなくなること更新を忘れて古いままといったことがなくなるメリットがあります。

シェアされるURLが1つとなること

PCとスマホで別のURLで運用しているということは内容が異なる可能性もあります。

とても良いとシェアされたパソコン用のURLが同じ内容が書いてあるべきスマホ用のページが全く異なる内容だったら?

シェアされるURLが1つの場合そういったケースはありません。

読み込み時間を短縮できる

PC用とスマートフォン用のURLが異なる場合どのURLを表示するか端末に応じてリダイレクトが発生しますが、1つのURLにすることによって読み込み時間が短縮できます。

PC用の大きな画像を読み込んだらURLのリダイレクト時間より遅くなるのでは?スマートフォン用の画像を表示すればよい、またはスマートフォンをメインとして作ればPC用の画像は考えて作れます。

遅くなる主な要因は画像とCSSとjavascriptです。この3つを考えたうえでレスポンシブデザインを作成すれば読み込み時間をさらに短縮することができます。

レスポンシブデザインのデメリット

デメリット
  • 技術がないと読み込みが遅くなる
  • 技術がないと表示崩れが発生する
  • PCでないと表現できないデザインができなくなる

技術がないと読み込みが遅くなる

レスポンシブデザインにすることによって大きく修正する箇所はCSSです。

PC用スマートフォン用、タブレット用などデバイスに応じて処理を分けて書かなくてはならない箇所もありCSSが膨れ上がる場合もあります。

そういったとき通常のCSSの読み込みを何度も行うと通信する回数が増え結局読み込み速度が遅くなる要因となります。

対策としてはファーストビュー(人が最初に見る部分)をhtmlファイルにCSSをインライン化し後から読み込んでも支障がないものをjavascriptで読み込めば解決できます。

技術がないと表示崩れが発生する

デバイスごとに表示を切り替える為少し大きめのスマートフォンなどの場合考慮されておらず見られない程の表示崩れを起こす場合があります。

しかし、今ではGoogleやYahooのブラウザでもデバイスに応じた見え方を検証することも可能となっており、テストを行えば改善はできます。

PCでないと表現できないデザインができなくなる

PCでないと表現できないデザインがあった場合これをスマートフォンで実装することは無理です。

しかし、PCでないと表現できないデザインをとってアクセス数をなくすか?と聞いた時迷った場合不要だと思います。

スマホ対応のCSS書き方

ここではレスポンシブデザインを使ったスマートフォン対応のCSSの書き方をご説明致します。

変更箇所はhtmlとcssの2つのファイルです。

※.htaccess等でPCとスマホページを分ける処理を行っている場合処理をなくして下さい。

CSS側のレスポンシブデザイン

CSS側のレスポンシブデザインの書き方ですがスマートフォンユーザをメインとした書き方を行います。

PCをメインユーザとしてメディアクエリでスマホやタブレットに分ける書き方をしている方もおりますが、機械は上から順に処理をすること、PCは処理スペックがよいことを踏まえスマートフォンユーザに見せる処理を最初に書くことがふさわしいです。

  1. /*スマートフォンの処理*/
  2. #sidemenu{
  3.  position:relative;
  4. }
  5. @media screen and (min-width:768px) and ( max-width:1024px){
  6. /*768px~1024pxの処理*/
  7.  #sidemenu{
  8.   width: 30%;
  9.   float:right;
  10.  }
  11. }
  12. @media screen and (min-width:1024px){
  13. /*1024px~の処理*/
  14.  #sidemenu{
  15.   width: 30%;
  16.   float:right;
  17.  }
  18. }

ここではサイドメニューバーをスマートフォンの場合メインコンテンツの下に、パソコンの場合横に表示される処理をサンプルとして記載しております。

HTML側のレスポンシブデザイン

HTML側ではviewportの設定およびCSSのインライン化、CSSの後読みを説明します。

viewportの設定

metaタグにviewportを記載します。

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

なにかしらの理由でズームを禁止したい場合

  1. <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no>

CSSのインライン化

head終了タグの手前に圧縮したCSSを配置します。

  1.  <style type="text/css">
  2.   <圧縮したCSSを入れて下さい>
  3.  </style>
  4. </head>

CSSの後読み

後から読み込んでも支障がないCSSを読み込みます。今回は良く使うアイコンでお馴染みのfontawesomeで例をご説明します。

  1. <!-- HTMLの</body>タグの上に記載 -->
  2. <script>
  3. var link = document.createElement('link');
  4. link.href = 'https://use.fontawesome.com/releases/v5.0.6/css/all.css';
  5. link.rel = 'stylesheet';
  6. link.type = 'text/css';
  7. var head = document.getElementsByTagName('head')[0];
  8. head.appendChild(link);
  9. </script>
  10. </body>

まとめ

今回レスポンシブデザインについてご説明してきましたが、今後は更にスマートフォンからのアクセス流入数が増えてきます。

是非ともモバイルファーストを心掛けたホームページを作るうえで必要不可欠なレスポンシブデザインをご利用していただければと思います。

お問合せ

お気軽にお問合せ下さい。

  • 電話番号 0285-35-4987
  • メール info@9box.jp