ホームページ制作で避けては通れなくなったスマホ対応デザイン
株式会社TREVOのブログは、Web制作の現場で日々奮闘しているスタッフが、企画・デザイン・開発・SEO・運用まで幅広いテーマで執筆しています。
「分かりやすく、役に立つ」ことをモットーに、ホームページ制作や運営のヒント、トレンド情報、日々の気づきを発信中です。大阪を拠点に、全国のお客様と向き合いながら培った現場目線のノウハウを、実体験ベースでお届けします。
初めてホームページ制作をご検討の方から、リニューアルや集客強化を考えている方まで、何かヒントになる情報があればうれしいです。
記事へのご質問やご相談も、お気軽にお問い合わせください。
執筆記事：記事一覧ページ
2005年から WEB 業界一筋。500サイト超を手がける SEO・WordPress のエキスパート。「公開後こそ本番」を掲げ、データ分析とユーザー視点で成果を引き出す運用を提案。
2005年に制作会社へ入社後、プログラマーからキャリアをスタート。サーバー構築・データベース設計で培った技術を強みに、WordPress テーマ／プラグイン開発やサイト移行の難案件を多数担当してきました。
2010年以降は SEO エンジニアとしても活動領域を拡大。コンテンツ設計・内部リンク最適化・高速化チューニングにより、競合の激しいビッグキーワードで上位獲得を実現してきました。
現在は TREVO のウェブディレクターとして、要件定義から運用改善まで一気通貫でリード。AI ライティングや GA4／Looker Studio を活用したレポーティング手法を開発し、「数字で説明できるサイト運用」をポリシーにクライアントの ROI 最大化を支援しています。
趣味／強み：筋トレとランニングで日々の集中力をキープ。複雑な課題を“仕組み”で解決するのが得意。
モットー：「サイトは資産。改善を止めた瞬間から価値は目減りする」
SNS:x（旧 Twitter）@TREVO_WEB
今回の記事では近年急激に増加するスマートフォン・タブレットに対応するためのwebサイトを制作することは避けては通れない時代になりました。ここで紹介するのは、スマホ専用サイトとレスポンシブ対応サイトの違い、そして最新のレスポンシブ対応サイトの紹介です。
なんのこっちゃ？と思われる方、恥じる必要などありません。webサイトに詳しくなければ知らなくて当然。聞いたことがあるけど、詳しくはない・・・
という方も大丈夫。この記事でサクっと理解しちゃいましょう。
まず普段私たちが使っているパソコンに対応するためにwebサイトがデザインされています。ユーザーが使いやすいように、見やすいように、情報が正しく伝わるように様々な工夫と知恵がギュッと詰まってwebサイトは私たちの目の前に現れます。
もし、スマホ対策のされていないサイトを閲覧すると、コンテンツが画面内に収まりきらずに、サイトの一部しか表示されない、文字が小さくて読めない、画像が小さすぎて見えない。というようなサイト表示になってしまいます。
それはユーザビリティが低いサイト、すなわち情報を得にくい、使いやすくないサイトであるといえます。そこで、スマートフォンやタブレットでも見やすく、使いやすいサイトとして誕生したのがスマホ専用サイトやレスポンシブデザインのwebサイトです。
スマホ専用サイト、レスポンシブサイト具体的な違いについて
スマホ専用サイトとは？
スマホ専用サイトはPC向けのデザインとスマホ向けのデザインをそれぞれの環境に合ったものにできるのが特徴です。スマートフォンの画面サイズで初めから閲覧されることを想定して制作されているため、文字のサイズや画像の大きさなどユーザビリティの高いサイトを構築されています。
パソコンで閲覧する際のホームページのデザインとは別のhtmlで制作されているのが特徴で、それぞれに異なった設計で制作されたwebサイトをユーザーがどの端末で閲覧しているかによって、表示するサイトが異なっているというものです。異なっているといっても、Webサイトの内容自体は同じであることが多いです。
異なる内容ではグーグルにペナルティを出されてしまうかもしれません。スマホサイズに特化しているため、見やすく・使いやすいように配慮した設計が可能となります。
いかがでしょうか？どのサイトもいい感じですね。もちろん、スマホで見ていただく必要がありますが・・・
レスポンシブ対応のサイトについて
これは一つのhtmlで記述されているのが特徴です。一つのサイトを画面幅に合わせてデザインが変更されるように設定した作りになっています。具体的にはCSS3のメディアクエリを利用することで、ディスプレイのサイズごとに異なるCSSを適用させます。
画面の横幅を縮めてみると、スマホ表示になります。
レスポンシブ対応のホームページは、更新の際にパソコン用、スマホ用と複数のhtmlを書き換える必要がないという利点につながります。また、URLが一つであるため、友達とシェアしたり、リンクを張るときに便利です。グーグルはレスポンシブデザインを推奨しています。
事例一http://www.nhk.or.jp/studiopark/index.html
どうでしょう？動きが面白いですね・・・・
それぞれに今では日常の一部と化したスマホ・タブレットでのwebサイト閲覧に対応するためのデザインですが、それぞれにデメリットもあります。
スマホ対応サイトのデメリット
スマホ専用サイトでは、HTMLを別で用意する必要があります。これは更新・修正作業に倍の時間が必要となることを意味します。さらにグーグルに重複したサイトと認識されないような工夫もしなければなりません。またURLが異なるためSEOやSNSによるシェアに弱いということもデメリットですね。
レスポンシブサイトのデメリット
制作予算（工数）がふくらむ可能性がある点、PC向けサイトとモバイル向けサイトのデザインを大幅に変えることが難しい点、ページの表示に時間がかかる場合がある点などが挙げられます。
最後に
いかがでしたでしょうか？2つのデザインの違いが少しは理解できたのではないでしょうか？どちらを採用するかは、それぞれのメリット・デメリットを吟味して決定したいものですね。
大阪のホームページ制作会社TREVOでは、最短2日で仮サイトを公開できるスピード対応や、SEO対策に強いオリジナルデザインの制作サービスを提供しています。
