新たにスマホ向けのホームページを制作しようと考えていらっしゃる方は多いかもしれません。それほどにスマホからのアクセスは増えているはずです。
総務省の調査によるとスマホ経由のデータ通信量は今後5年で今の3倍になると予測されています
（出典：総務省「情報通信白書令和2年版 概要」より令和２年「情報通信に関する現状報告」）。
スマホ対応はホームページにおける必須事項となるでしょう。
この記事では、そのスマホ対応を実現する基礎であるレスポンシブ対応について解説していきます。
レスポンシブ対応がなぜ選ばれるのか、その利点やスマホ画面特有のレイアウトなど、作成に向けた考慮点をこの記事にてご確認ください。
マルチデバイスの流れ
自宅のパソコンで夜に見た映画を、つづきから翌朝の通勤電車の中で再生する。そんなことが当たり前に出来る時代となっています。
これはマルチデバイス対応と呼ばれる、複数の機器や異なる環境をまたがってもコンテンツが利用できるように設計されているもの。
もともとオンライン上のサービスやアプリケーションは特定の機種を対象として開発されてきました。
よって、iPhoneのアプリがパソコンでは使えないなど、デバイス（ 機器 ）間でのデータ共有や連携は出来ませんでした。
しかし近年、デバイスの性能が格段と上がり、多種類のデバイスから同じレベルでのコンテンツやサービス利用が可能となっています。スマホアプリもパソコンで使用できることが多くなりましたよね。
そんなマルチデバイス化の流れの中で、スマホでホームページ閲覧がストレスフリーに行えることはユーザーにとってはもはや当たり前。企業側からすれば必須事項となるのです。
ホームページのスマホ対応（レスポンシブ対応）とは
スマホ対応のホームページの一つの手法として用いられるのがレスポンシブ対応。
レスポンシブ（ responsive ）は反応する、答えるという意味の単語。ユーザーの用いている機器によってホームページが表示されるウィンドウ（ 画面 ）のサイズは様々です。
このウィンドウサイズに敏感に反応して、各々に見やすい表示に自動で切り替わるウェブデザインをレスポンシブ対応といいます。
ホームページのレスポンシブ対応の利点
幾つかあるホームページのスマホ対応手法の中で、レスポンシブ対応にはたくさんの利点があります。詳しく説明していきます。
Google推奨による利点
国内最大手の検索エンジンであるGoogleは表示順位に反映される評価基準に、モバイル端末への対応済みであることを条件に含めています。
かつ、モバイル端末での最適な表示対応の方法としてレスポンシブウェブデザインを推奨しています。
これがレスポンシブ対応を選択する最大の強みと言ってよいでしょう。検索結果で優遇される条件と分かっているのに実装しない理由はありませんよね。
ページ作成や更新の手間が減る利点
レスポンシブ対応であれば、パソコン用とスマホ用で作成するホームページはひとつですから、メンテナンスの際も更新の際も作業は1回で済みます。
作業の工数が少なければミスの可能性も減るため、運営側としては大きな魅力ですよね。
ホームページのURLが一つにまとまる利点
インターネット上の住所であるURLが1つであることがなぜ利点となるのか。
それは、もしパソコン用とスマホ用で別々のホームページが出来上がっていれば、アクセスが分散してしまうからです。ニュースメディアで取り上げられたとしても、リンクをパソコン用とスマホ用とどちらに繋げるかといった問題が発生します。
URLがひとつであれば、パソコンや、スマホ、タブレットといったあらゆるデバイスからのアクセスが一か所に集約。
それによって、ホームページのUＲＬに対する検索エンジンからの評価は統一され、SEO効果が期待できます。加えて、ユーザーがリンクやシェアを行いやすいというメリットもあります。
ホームページの読み込み時間を短縮できる利点
レスポンシブ対応ではなく、パソコン用とスマホ用にホームページを別々に作成した場合、ユーザーからのアクセスに対して行われる処理をご存知でしょうか。
別々のホームページですとURLが異なります。そこでアクセスしてきたユーザーがパソコンかスマホかに応じて、アクセス先のリダイレクト（ 転送 ）が行われます。
その分の読み込み時間が余計に発生。また、ホームページを作成する時に使われるコンピューター言語であるHTMLが違う場合も、処理時間がプラスでかかります。
将来的に出てくるデバイスに対応できる利点
スマホやタブレットには次々と新しいバージョンが登場します。
それらはウィンドウサイズも様々です。ただレスポンシブ対応はウィンドウサイズに依存しません。
レスポンシブ対応のホームページはウィンドウの横幅によって自動で切り替わります。今後出てくるデバイスに対応することが出来るのです。
新たなユーザー層を獲得できる利点
これまでスマホ用のホームページを検討してこなかった理由として、法人がターゲットであることを挙げていた方は多いでしょう。
それでもアクセス解析を行えば、スマホなどのモバイルからのアクセスが一定数あったという結果が出ることが十分にありえます。
それほどにスマホユーザーは増えていますし、会社内でなくても外出先のカフェや移動中の電車でのWi-Fi環境が整い始めています。
スマホで検索しホームページへアクセスしたけれど、スマホ対応されておらず見づらかったために、検索結果画面に戻った経験をお持ちではないでしょうか。
そうやって離脱してしまっていたユーザーをレスポンシブ対応で取り込みましょう。
スマホページのレイアウト注意点
ページの見え方がパソコンとスマホでどのように異なるのかを確認しましょう。
表示画面がパソコンは横長ですがスマホは縦長となりますから、レイアウトには違いが生じます。またスマホは画面が小さなデバイスであることにも注意が必要です。
- メニューバー：パソコンの場合は上部のフッターに横一列で表示されることが一般的ですが、スマホではボタンに格納されてタップすると開く仕様の場合が多いです。
- 画像表示：パソコンでは画像と文章を隣同士に配するレイアウトが多くありました。
- ただ今はスマホにおける縦スクロールでの閲覧の方に親しみを感じるユーザーに合わせてパソコンでも、画像と文章は上下配置が好まれています。
- 文字表示：スマホ画面の方が小さいことを考慮し、スマホでもズームしなくても判読できるテキストを使用する必要があります。スマホの場合はフォントサイズが大きくなるという設定をしても良いでしょう。
- リンク等のボタン：指での操作となるスマホ。マウスでは行える作業も指では難しいことがあります。目的のリンクボタンをタップすることが容易となるよう、それぞれのボタンはタップに十分な距離を保って配置しましょう。
- ズーム：コンテンツごとにズームを許可するかどうか指定が出来ます。ただ、基本的にスクロールやズームせずとも見やすい画像サイズや配置となっていることの方が重要です。
スマホページのコンテンツの選別
パソコンには向いていてもスマホでは扱いが難しいコンテンツはどうしても出てきます。その場合はスマホでは表示させない設計ができます。
ユーザーの快適な利用を配慮しての処置ですが、使いすぎるとデバイスごとにユーザーへ届ける情報に差異が出ることとなり、検索エンジンの評価では好まれません。代替えコンテンツを用意するなど工夫しましょう。
レスポンシブ対応をチェックする方法
ユーザーがアクセスした場合、どのように表示されるのか作成しながら都度確認すると作業が効率化します。
その方法は4つあります。
- ブラウザで確認する方法
- ブラウザ機能で確認する方法
- 実機で確認する方法
- レスポンシブデザインチェックツールで確認する方法
ブラウザではURLを検索BOXに入力し、ブラウザ画面自体を縮小したり拡大したりすると、デザイン変化を見ることが出来ます。またブラウザのひとつであるChromeの場合、検証の機能があります。
その中で一番確実なのは実際のスマホから表示を確認する方法でしょう。
チェックツールの一部を以下にご紹介します。
LIQUID Labのサイト内
画像出典元：「 LIQUID Lab 」
Webサイト企画開発や運用、コンサルティングをされているリキッドデザイン株式会社のサイト内にサービスとしてチェックツールを展開。
5デバイスの画面を同時に確認できそれぞれスクロールも可能です。
Demonstrating Responsive Design
参照：Demonstrating Responsive Design
画像出典元：「 jamus.co.uk 」
iPhoneとiPadの表示をパソコンと合わせて確認できます。デバイスを横にした状態も見られる点がポイントです。
Responsive Checker
画像出典元：「 Responsive Checker 」
iPhone、iPadだけでなくGalaxyとXperiaでの表示を見ることが出来ます。
URLと書かれたＢＯＸに入力すればどちらのサイトも即座にチェック可能です。
ホームページのレスポンシブ対応の欠点
レスポンシブ対応のホームページを作成する際の一番の問題点は、初期の構築費用が高額になりやすいということでしょう。
様々と存在するデバイスに適したホームページを構築するには、どんなコンテンツをどのようにレイアウトすべきか検討が必要で、設計に時間がかかります。
そしてそれらを実現する知識や技術が必要で高額となってしまうのです。
また、スマホではパソコンと同情報の読み込みに時間がかかることがありえるため、レスポンシブ対応にする際には、画像データの重さには考慮が必要です。
スマホでの閲覧は画面の全体を眺める閲覧方法が特徴。長い文章は読まれない傾向があります。そのためテキスト量には配慮が必要。
説明はイラストや画像で補助したり、テキストの間に画像を挟んだりといったレイアウトとなるでしょう。このようにレスポンシブ対応でデザインに多少の制約が生じます。
今後、避けては通れないレスポンシブ対応とはいえ、そういったデメリットがあることも理解しておきましょう。
レスポンシブ対応以外のスマホ用ホームページの作り方
スマホから見やすいホームページの作り方としてレスポンシブ対応以外にスマホ専用のホームページを作るという選択があります。
その場合は独立した運用となるので、パソコンとスマホとそれぞれのウィンドウサイズに合ったコンテンツが配信できます。
ただその分の更新の手間は2倍です。またホームページが分かれているのでアクセスが分散してしまい、SEO対策として非効果的ではあります。
参考になるレスポンシブ対応のホームページ例
パソコンで見てもスマホで見ても同じ情報が得られ、それぞれのデバイスで同等に分かりやすいホームページをご紹介します。制作の参考にしてみてください。
タクシーが呼べるアプリGO 《ゴー》
「 画像出典元：株式会社Mobility Technologies（ MoT ）」
縦スクロールを意識したレイアウトで構成されています。とはいえ、パソコンのような横長のウィンドウで見た際には、コンテンツが左右に寄った表示に変化します。
横長ウィンドウを閲覧する際の人の視線の動きであるＺ字の配置になる点が秀逸。
イラストや画像を説明の補助的に使用することで文字量は最低限に抑えられています。背景は白でコンテンツとの区切りが見やすいです。
単純な画面とならないようにドット柄が追いかけてくるデザイン性もポイント。このドット柄はサービス名の「 ＧＯ 」のロゴデザインとリンクしています。
BAYCREW'S GROUP｜コーポレートサイト
「 画像出典元：ベイクルーズ 」
ファッション事業を軸に飲食やフィットネス事業などを展開する企業ホームページ。オシャレで美しい画像がユーザーの印象に残るよう、その他の要素はカラー控えめに設計されています。
コンテンツの枠を長方形で管理し、横長ウィンドウで見た場合には横並びに、縦長ウィンドウでは縦並びにコンテンツの配置が変化。どのデバイスでも見やすいレイアウトとなっています。
見出しが左側から栞が差し込まれるように表示さる点が目をひきます。白抜きや黒色のバー、グレーの文字とクールでカッコよいホームページです。
ねこねこ食パン
参照：ねこねこ食パン
「 画像出典元：株式会社オールハーツ・カンパニー」
ネコモチーフのパンを販売するブランド。パンの柔らかさを表現するような淡色で統一。
縦長ウィンドウになると文字の大きさが拡大され、スマホ画面でも拡大せずに読みやすいです。逆にイラストは縮小。圧迫感のないかわいらしいイメージが、どのデバイスでも保たれます。
縦スクロールでの閲覧はスピードが速くなりがち。その手を一瞬留めるような動きが、一定間隔で付けられています。
イラストの猫のしっぽが動く、パンに重ねて描いた猫の表情が揺れるなどがそれ。非常に簡易なアニメーションではありますがあるとないとではアイキャッチ効果が格段に異なります。
キッコーマンのしょうゆ
参照：キッコーマンのしょうゆ
「 画像出典元：キッコーマン株式会 」
陶器のような奥深い白を感じさせる落ち着いたトーンのホームページです。パソコンでは横並びのコンテンツが、スマホでは縦並びに整列し、どちらでも見やすいレイアウトとなっています。
画像は素材や醤油のアップが多く、インパクト大。それぞれの写真が円形に切り抜かれていることで余白が美しく感じられ、視線が写真に集中するデザインです。
更に切り抜いたその円の形がゆるりと、たゆたうように動きます。柔らかく温かみの演出であると共にアイキャッチ効果があります。
今日のしょうゆ診断という面白味のあるコンテンツを揃えている点も魅力的です。
Vermicular（ バーミキュラ ）公式サイト
「 画像出典元：愛知ドビー株式会社」
画像の明度を下げていて、余計な装飾が無いことで高級感のあるホームページとなっています。
大きな画像をタップすれば遷移できる設計ですが、逆にパソコンではボタンが大きすぎるとわかりづらいもの。パソコンではカーソルが画像上に乗ると画像の色味が変わり、クリック出来ることが視覚的に分かりやすくなっています。
縦長ウィンドウの場合に画像文字が交互にレイアウトされる点も読みやすいです。
スマホ画面全体を覆うような大きな画像はトップのみとなっていて、それ以外はすぐ下のコンテンツが頭を出すようなサイズ感。
よって、下へのスクロールが触発され、ホームページ全体を閲覧してもらえる工夫となっています。
レスポンシブ対応ホームページが作れるツール
ホームページを作成するには本来、HTMLやCSSを用いたコーディングの知識が必要です。
しかし今はそういった知識なしでもホームページが作れるツールが多く存在しています。用意するのは掲載したい文章と画像だけ。
その中からレスポンシブ対応のホームページが作れるツールをいくつかご紹介します。
ジンドゥー（ Jimdo ）
「 画像出典元：Jimdo 」
ユーザー数が多く人気が高い国内最大級のホームページ作成ツール。
ドイツ生まれのサービスですが、サイト名がカタカナ表記となっていることからもわかるように、日本での展開に力を入れており、フォロー体制が整っていることが魅力の一つ。
作成にはAIを活用。作成案内に従い、質問に回答することで適切な画像や文章が選択されます。3ステップでホームページが作れると表明しているほどで、初心者には使いやすいツールといえます。
ペライチ
参照：ペライチ
「 画像出典元：ぺライチ 」
ツールの名称が“ぺライチ”である通り、1枚型のホームページです。
メニューから項目を選択してクリックすると別ページに飛ぶホームページに対して、メニューを縦に長く連ねた形となります。
実はスマホでの閲覧では、ページを遷移するより下に下にとスクロールし一気に見られる方が、ユーザーは使いやすいと感じます。よって、１つのURLで階層を作らないホームページは増えています。
ぺライチは2015年にリリースされたサービス。日本発のサービスなので作成や運営の相談がしやすい利点があります。
Wix（ ウィックス ）
参照：Wix（ ウィックス ）
「 画像出典元：Wix 」
ジンドゥーとならぶ、国内で利用数の多いツール。
テンプレートにはあらかじめ画像やテキストが入っています。それをガイドとして加筆や修正し整えるだけでホームページ作成が可能。
ジンドゥー程ではありませんが簡単に完成します。
Wixの一番の特徴はページテンプレートの多さ。ジンドゥーが40種類、ぺライチが57種類であるのに対して約700種類と、多量に揃っています。
もうひとつの特徴はカスタマイズ性です。フォントの変更や画像加工をツール内で行うことが出来ます。
加えてもっとこだわりたいユーザーのために、ホームページの作成にプロの力を借りるサービスがツール内に整備。
ロゴだけ制作してほしい、宣伝だけ外注したいといったバージョンアップのための部分的オーダーを行えます。
Ameba Ownd ( アメーバ オウンド )
「 画像出典元：Ameba Ownd 」
スターバックスコーヒージャパンが公式ブログにて利用していることで有名なツールです（参考：スターバックスコーヒージャパン）。
アメーバブログなどインターネットメディア事業を核に展開するサイバーエージェントによる運営です。
画像が大きく掲載されるテンプレートが多いので、ビジュアルによるイメージ訴求を重要視する業種に向いています。
またSNSやショッピングサイトとの連携が可能。常に最新情報をユーザーに届けやすい仕組みです。
1番の魅力は独自ドメインが無料で設定できること。URLにサービス名が入れられるので、ユーザーは安心しますし覚えてもらいやすいというメリットがあります。
Strikingly（ ストライキングリー ）
「 画像出典元：Strikingly 」
縦長のページ構成を推しているツール。1ページ完結するホームページのテンプレートが多数あります。
アメリカ発のサービスで、テンプレートはシンプルでクールなテイストが多い印象。商品やサービスの説明にテキストを多く必要としていない場合に向いています。
逆に多角的な事業展開をしているような場合には使い勝手が良いとは言えません。
Webnode（ ウェブノード ）
「 画像出典元：Webnode 」
全体テンプレートだけでなく、問い合わせや料金表などページテンプレートまでも豊富なツール。
テンプレートに画像やテキストを入れ込む作業はアイコンで視覚的に分かりやすく作られているため、操作に迷うことが少なく作業ストレスが軽減されます。カスタマイズも説明に沿って簡単。
ホームページは無料でもオンラインショップは有料というツールが多い中、Webnodeは無料で開設できます。
Weebly（ ウィーブリー ）
「 画像出典元：Weebly 」
Weebly の最大のメリットはSEO対策。ホームページ全体のタイトルタグとコンテンツ要約の設定はもちろん、ページごとにもタグと要約が設定できます。
これは検索エンジンでの結果表示の際に有利です。
その他にも検索結果に表示させないページが作成の機能があり、会員限定やコミュニティ限定といったサービスコンテンツの展開が可能です。
ただ、英語表記のテンプレートが多く、サポートも英語のため、慣れている方でないと操作に手間取るかもしれません。
Favy（ ファービー ）
「 画像出典元：Favy 」
飲食店に特化したホームページ作成ツールです。飲食店の運営には欠かせない予約機能。そして求人機能がついています。
メリットは飲食店に特化することで余計な機能が省かれ操作が非常に簡単なこと。テンプレートもごくわずかでツールの使い方に迷うことはないでしょう。
まとめ
このように、レスポンシブ対応は単純にウィンドウに合わせて表示幅を変えるだけでは、成功とはいえません。
レイアウトの注意点やコンテンツ内容を吟味し、どんなデバイスでも見やすく、使いやすく設計することが、レスポンシブ対応です。
レスポンシブ対応のホームページは大変増えていますので、ユーザーの立場になって色々なホームページを閲覧し、参考にすると良いでしょう。
また画像やテキストを用意し選択したテンプレートにはめ込むだけで簡単にホームページを作成できるサービスツールがたくさんありますので活用してみてはいかがでしょうか。
スマホユーザーが増えている現代でレスポンシブ対応のホームページはあなたのビジネスを進歩させてくれるでしょう。
