viewパソコンで閲覧できるWEBサイトを、モバイル版へ対応することは一般化しています。パソコンとモバイルでは、画面の大きさそのものが違いますので、パソコンで上手く閲覧できていてもモバイル版では見えづらいサイトになってしまうことは当然です。そこで、ここではWEBサイトのモバイル版対応において、スムーズな対応の仕方と注意するべきポイントについて解説いたします。1.WEBサイトのモバイル対応は必須スマートフォン、タブレットなどのモバイル端末の普及によって、WEBサイトを閲覧する環境が激変しました。それまでのパソコンでインターネットをするというスタイルから、モバイル端末へ移行しているのです。20〜30代の若者におけるスマートフォン普及率は90%を超えていることからも、WEBサイトづくりをする上でモバイル版対応を考慮する必要性が高いのです。参照:http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h29/html/nc111110.html検索サイトの大手Googleでは、モバイル端末を使って検索された際、「モバイル端末に対応しているWEBページ」が優先的に表示される仕様になっています。これが、2015年にGoogleが発表した「モバイルフレンドー」になります。モバイル対策ができていないサイトは、モバイルで検索された際に上位表示がされにくくなっています。2016年にGoogleが発表した「モバイルファーストインデックス」というのがあります。検索サイトでは、ページ内容と検索キーワードとの関連度を判断し、検索結果を表示します。それまでは、パソコンで閲覧した時の内容が使われていましたが、モバイル端末で閲覧した時の内容へ変える方針になります。モバイル対策ができたいないサイトが、何かすぐに悪影響があるわけでは無いのですが、モバイルファーストインデックスの適用は、日本でも浸透しています。競合サイトなどがモバイル対策を終えている場合は、自社サイトの順位が相対的に下がる可能性があります。検索サイトからユーザを誘導しようと考えている場合は、WEBサイトのモバイル対応は必須のものとなります。これまでのパソコンサイトと同様の知識を持って対応することが大事です。2.WEBサイトのモバイル対応の方法モバイル版対応をする場合、その方法は大きく分けて2つあります。その方法を解説します。レスポンシブを採用したモバイル版対応レスポンシブは、パソコンでもモバイルでも関係なく1つのHTMLで構成し、デバイスごとにCSS(情報の大きさや位置など表示指定)で切り替えて表示を変える方法です。最近では、このレスポンシブを用いる手法が浸透しており、メリットとしては同じコンテンツを複数ページへ展開する必要がないのでウエブサイト管理が煩雑になりません。端末ごとにURLを分ける必要もないので案内も楽です。URLが一つなのでWEBサイトを閲覧するユーザーにシェアされやすくなります。検索結果の上位に表示されやすくなるモバイルフレンドリー、スマホ用のページ順位の決め手となるモバイルファーストインデックスに対応ができます。一方で、デメリットもあります。HTMLが1つなのでパソコンとモバイルで同じデータを読み込むことになります。そのため、スマホで表示しないデータも読み込むため、表示完了までの時間がどうしてもかかってしまいます。デザイン面に関しては、基本的にHTMLが1つなので、パソコンとモバイルで大幅に見え方を変えるようなデザインを組み込むことは難しいです。あとは、デバイスごとのデザイン制作後、それに合わせて一つにするコーディングを行うので、複雑なことによる制作工数がかかります。モバイル端末専用サイトを別途制作したモバイル対応パソコン版とは別にモバイル専用のページを作る方法があります。これは、すでにパソコン版のWEBサイトがあるものの、レスポンシブ化でモバイル版を組み込むのが困難な場合に用いる手法です。モバイル専用サイトのメリットは、パソコンサイトに影響することなくモバイル版サイトを制作できることです。管理自体も別々に行うことになりますので、パソコンとモバイルで見せるコンテンツが違う場合などは、有効的に手法です。一方のデメリットは、パソコンとモバイルではURLが異なることにあります。URLがことなると、アクセスが分散します。SEO効果が薄まることと、SNSシェアに弱くなります。パソコンとモバイルで同一コンテンツが多い場合、一方を修正するともう一方も忘れずに修正する必要が出てきますので、管理が煩雑になってしまうことは否めません。それぞれにメリット、デメリットありますので、自社のサイトポリシーに合わせてどちらで対応するのが良いか見当が必要です。3.モバイル対応をする上での注意するポイントここでは、WEBサイトをモバイル版へ対応する際に、知っておきたいポイントや注意するポイントなどを紹介します。✔︎縦方向に長すぎないようにするパソコンで表示していたWEBサイトを、モバイル版に対応するととても縦長なページになり、いくらスクロールしても最終にたどり着かないということが起こりがちです。それでは、せっかくのモバイル版対応も台無しになってしまいます。パソコン画面とモバイル画面では、大きさが明らかに違いますので、コンテンツ量が多いページだと、モバイルでは長すぎてしまいどこまで読んだのかなど現在地がわからなくなってしまいます。途中で離脱されないためにも、情報量の整理、配置、ページ遷移を含めてパソコン以上に気を使うべきポイントは多いです。✔︎動画やアニメーションサイズに注意するパソコンで表示している自動再生の動画やアニメーションの使用は、モバイルサイトでは通信環境の制限などで読み込みに時間がかかり処理が遅くなる可能性があります。パソコンとモバイル版では、表示を切り替えるなどの対応が必要です。✔︎文字サイズの選び方パソコンとモバイルサイトでは、表示フォントサイズの見え方も異なってきます。モバイル版では、パソコンよりも狭い画面の中で、読み進めやすい文字フォントにする必要があります。✔︎シンプルなレイアウトパソコンで表示するWEBサイトでは、段落を作りサイドバーを設けるなどで横方向にも広がるレイアウトが多いです。モバイル版に関しては画面が小さいこともあり縦移動は得意でも横移動は操作が面倒です。そこで、段落を使わずシンプルなレイアウトにすることで、モバイル版でも閲覧しやすくなります。✔︎指で操作しやすいインターフェースモバイル版では、画面を指1本で操作することがほとんどです。モバイル版では、クリックを「タップ」という言い方になります。画面をめくる操作を「スワイプ」といいます。タップやスワイプの操作をスムーズにできるようにすることで、ユーザビリティを高めることができます。✔︎ポップアップは使えないパソコンでは、ポップアップウインドウを表示することは容易ですが、モバイル版にはウインドウという概念が無いので、小窓を開くのはできません。別ウインドウを作ったとしても、パソコンのように正常に動作するとは限りません。ポップアップウインドウのような仕様を入れたい場合は、モーダルウインドウに見えるようなテクニックを使う方法があります。4.まとめ今回は、モバイル版サイトの対応について基本として知っておいたほうが良いポイントを解説してきましたが、いかがでしょうか。今は、モバイル版を持っていることは当たり前になっていますので、まだ対応していない、これからWEBサイトづくりを行うなどの場合は、モバイル版も含めて制作を検討することをオススメします。ホームページ制作でお困りではありませんか?仕事の発注先探しや、新規顧客開拓など、ビジネスパートナー探しに役立つ総合ビジネスマッチングプラットフォーム。それがリカイゼンです。分析、ターゲットの分析、プロジェクトの目的を元に、コンセプトを策定。ビジュアルクリエイティブを用いたお客様のブランディングを支援します。「ビジュアル...株式会社キャスティードについてキャスティード!はじめまして。株式会社キャスティードと申します。当記事をご覧いただきありがとうございます。ミニクラブの経営にとってレベルの高い女性スタッフの獲得は非常に重要です。求職者が求人媒体を見た後に確認できるお店のサイトを作り、応募数を増やしたいとのご相談をいただきました。本来であれば求人に特化したサイト...OOHって?昔はただの看板。今は見ている人を見られるメディア。home:アウト・オブ・ホーム)というのはOOH広告、OOHメディア。直訳すると「家の外」という意味になり、「家の外にある広告」の総称。このアウト・オブ・ホームメディアには、建設中のビルの仮囲い、街...2020年、意匠法改正で変革が起きるWEBデザイン業界WEBサイトづくりの中で、見渡せば同じようなデザインと構成のWEBサイトだらけ。いうことはこれまでに1度はあるのではないでしょうか。2020年に向けて、WEBサイトのデザインを保護するための意匠法改正が決まりました。ご同意のうえ、送信ください。入力内容を送信して、サポートデスクに相談する(無料)本サイトは、reCAPTCHAとGoogleにより保護されています。