ポータルサイトはレスポンシブにすべき？モバイル対応策を考える【2024年最新版】

「平成28年 通信利用動向調査（総務省）」(PDF)によると、今や国内の約6割の人がスマートフォンでインターネットを見ている時代です。

こうしたスマホの普及拡大に伴いGoogleが「モバイルファーストインデックス」というアルゴリズムを検索エンジンに用いたことで、上位表示を狙うためにはPCだけでなく、スマートフォンやタブレットなどのモバイル機器に対応したサイト制作が必須になりました。

特にさまざまな情報が得られるポータルサイトは日常的に利用している人が多く、PV数がより評価に直結する分、一般的なサイト以上にモバイル対応は重要だと言えます。

では、実際にどのような対応策があるのかとネットで検索してみると、「レスポンシブwebデザイン」というワードを目にすることが多いかと思います。
「レスポンシブwebデザイン」はモバイル対応が急務となる昨今、web業界でも注目を集めているデザイン手法であり、一般的なサイトはもちろん、情報量の多いポータルサイトにも適したモバイル対応の１つです。

とは言え、レスポンシブwebデザインがどういうものであるかが分からない状態では、いくら「いい」と言われてもいまいち説得力がありませんよね？

そこで今回はさまざまなモバイル表示に対応できる「レスポンシブwebデザイン」とは何かということと、実際にレスポンシブwebデザインを採用しているポータルサイトをいくつか参考用に紹介します。

すでにポータルサイトを運営している人もこれから作るという人も、知っておいて損はないですよ！

モバイル対応と呼ばれるものには、「モバイル専用のサイトを作成する」「既存のPCサイトをモバイル画面に対応させる」という２つの方法があります。

後者の「既存のPCサイトをモバイル画面に対応させる」方法がレスポンシブwebデザインであり、画面幅に合わせてCSS（スタイルシート）を切り替えるプログラムを組み込むことにより、１つのHTMLソースで異なる画面サイズのデバイスに対応できるようになります。
PCとモバイルで同じHTMLソースを使用するため管理がしやすく、更新・追加・修正作業を行う際も一度で済むのが最大のメリットです。

また、PCとモバイルで提供する情報が大きく異なることもないので、ユーザーはどちらのサイトも同じ感覚で利用することができます。

冒頭で取り上げた「平成28年 通信利用動向調査（総務省）」(PDF)の調査結果からも分かるように、今やネットはPCだけで閲覧するものではなくなっています。

Googleが「モバイルファースト」を提唱する以上、さまざまなモバイルデバイスに合わせてサイトの最適化を行う必要があります。
ですが、それぞれのデバイスの画面サイズに適した表示のサイトを用意するとなると、費用と時間がかかるのはもちろんのこと、個別に更新作業をしなければならない手間が発生してしまいます。

こうしたデバイスの多様化を考えた場合に有効な手法となるのが、１つのHTMLソースであらゆる画面表示に対応できる「レスポンシブwebデザイン」だというわけです。

スマホやタブレットの画面サイズに合わせて表示するのが「レスポンシブwebデザイン」だといわれても、実際にその目で見てみないことには「本当にちゃんと切り替わるの？」と疑いたくなる気持ちもあるでしょう。

この項目では実際にレスポンシブwebデザインを採用しているポータルサイトを紹介し、どのように表示画面が変化するのかを取り上げます。
ぜひレスポンシブwebデザインを採用する際の参考にしてみてください。

なお、タブレットに関しては、縦向きでの表示を参照しています。

「Hotels.com」はアメリカに本拠地を持つオンライン旅行会社が運営する、世界最大手の宿泊予約ポータルサイトです。
フリーワードや人気都市名からホテルの検索が可能で、サイトから10泊分の予約をすると１泊分の無料宿泊特典が受けられます。

トップページには都市画像からホテルが探せる「おすすめ都市」やお得情報を掲載していますが、PCでは大小２つのサイズがある「おすすめ都市」画像が、タブレットでは同サイズでの表示になります。

さらに画面サイズの小さいスマホではフリーワード検索とお得情報のみの表示に絞るなど、デバイスによって見やすいように変更が加えられているのが分かります。

シンガポールを拠点とするオンライン旅行会社が運営する「エクスペディア」は、宿泊施設と航空券を扱うポータルサイトです。
国内外のホテルはもちろん、航空券とのセットツアーや現地のオプションツアーなどを予約することができます。

ホテルや航空券ごとにフリーワードで探せる検索窓を設けているほか、「本日おすすめの人気旅行先」「本日のおすすめ情報」といった記事コンテンツを画像付きで掲載しています。
PCではどちらも３つの画像を横並びで配置していますが、「人気旅行先」はタブレットが２つでスマホは１つ、「おすすめ情報」はタブレット・スマホのどちらも１つだけの表示となっています。

なお、PCとタブレットで表示しているメニューバーは、スマホでは画面の右上にある三本線（ハンバーガーメニュー）にまとめられています。

「トリバゴ」は国内外のホテル料金を一括比較できる、世界最大クラスの宿泊検索ポータルサイトです。
検索エンジン大手の「Google」を思わせるようなロゴと検索窓、そして短いテキストのみという、いたってシンプルなファーストビューになっており、スクロールすることで「人気都市」「人気旅行先」などのコンテンツを表示します。

PCの検索結果画面では左側に一覧表示される「条件絞り込み」機能が、スマホとタブレットではヘッダー部分にアコーディオン（折りたたみ）メニューとして収められています。
画面サイズが変わっても最高値と最安値が一目で分かるようになっているのは、比較サイトならではと言えるでしょう。

「ラクナビ」は全国のマッサージ・リラクゼーションサロンを扱う、美容ポータルサイトです。
2,750件以上のサロンを掲載しており、「エリア」と「ジャンル」「フリーワード」から検索することができます。

左右に余白を設けたシンプルなレイアウトであるため、スマホとタブレットでは細かい装飾部分と文字による都道府県表示、「新着情報」が省略されているものの、大きな違いはありません。

画面サイズが変わってもユーザーにとって使い勝手がいいように、サイトのトップに検索カテゴリと検索窓、会員ログインボタンを配置しているのがポイントです。

「ミーティア」は、「Music Meets City Culture」をコンセプトに情報発信をしているポータルサイトです。
アーティストをピックアップした記事や漫画コラム、ニュースなど、音楽と絡めた最新情報をさまざまな切り口で提供しています。

大小さまざまなサイズの注目記事画像が目を惹くトップページで、タブレットとスマホでは見やすいようにサイズを統一し、縦１列に配置して表示しています。
そのほかの記事はコンテンツごとにそれぞれ同サイズになっているため、画面サイズによって大きくレイアウトが変わることはなく、すっきりとしたデザインになっています。

なお、スマホでは左上にハンバーガーメニューを設け、フリーワードやカテゴリ別での記事検索機能をまとめています。

「CAKE.TOKYO」は、チーズケーキ専門店やアップルパイ専門店などを手掛ける株式会社BAKEが運営するお菓子（スイーツ）専門のポータルサイトです。
「おいしさには、ストーリーがある」をコンセプトに、店頭だけでは伝わらないお菓子のこだわりなどを伝えるべく、実際にお店に足を運んで取材をしています。

画像とタイトルがセットになった記事はコンテンツごとにサイズを統一し、タイル状にレイアウトしてありますが、「特集コンテンツ」のみスマホとタブレット画面でも目を惹くように、横幅に合わせた画像上にテキストを表示するデザインになっているのがポイントです。

また、タブレットとスマホでは「運営会社」「プライバシーポリシー」など、記事コンテンツ以外の情報は右上のハンバーガーメニューに収めてあり、記事を読むことに特化したモバイル対応を採用しているのが分かります。

この記事ではさまざまなモバイル表示に対応できる「レスポンシブwebデザイン」とは何かということと、実際にレスポンシブwebデザインを採用しているポータルサイトをいくつか参考用に紹介しました。

モバイル対応策としてネット上でも非常に注目度の高いレスポンシブwebデザインですが、当然デメリットもあります。
たとえば、「工数が多いため、制作費用が割高になる傾向がある」「PCでの閲覧を前提としたサイトの場合には、モバイルデバイスでの表示が遅くなる可能性がある」「スマホからPCサイトの閲覧ができない」といったことが挙げられます。
そのため、一概に「スマホ対応にするならレスポンシブwebデザイン一択ですよ！」とは正直言えません。

ですが、「1-2. なぜレスポンシブwebデザインが注目されているのか」でも触れたように、今後も画面サイズの異なるデバイスが登場するだろうことを考えると、１つのHTMLソースだけで最適化が図れるレスポンシブWebデザインが現時点において最も有効な手法であるのは確かです。

特にポータルサイトは扱うコンテンツと情報量が多いため、それぞれのデバイスに対応したサイトを用意するとなると一般的なサイト以上に時間と手間がかかってしまいます。
サイトのモバイル対応はもはや必須ですので、メリットとデメリットを十分に検討した上で、レスポンシブwebデザインを採用すべきかどうかを判断してください。

「レスポンシブWebデザインの採用を決めたはいいけど、どの制作会社がいいのかよく分からない…」など、お悩みの場合には、ぜひこちらの記事も参考にしてみてください。
→ポータルサイト構築に強いホームページ制作会社9選

もしくは「アイミツ」にお問い合わせいただくと、お悩みやご要望に応じて、レスポンシブwebデザインを得意とする最適な制作会社を無料でご紹介します。お気軽にご相談ください！