おはようございます。9月に入り、ここのところ秋らしさを感じる日も増えてきました。
秋の行楽シーズンは出先でスマホでネットを見ることも増える、ということで今回は「スマホ対応ホームページ」について書いてみたいと思います。
「モバイルファースト」でスマホサイトは依然として増殖中
スマホ(スマートフォン)が普及し始めてもう10年くらい経ちますが、スマホでホームページを見るものすっかり当たり前になりました。
しかしスマホの画面というのはやはり狭い。最近は画面サイズの大きな端末が増える傾向にありますが、それでも手帳サイズより小さいものがほとんど。
なのでパソコン用に作られたホームページをそのまま表示するとかなり見づらい、ということでスマホの狭い画面で表示してもある程度見やすく表示できるホームページ、いわゆる「スマホ対応ホームページ」を用意することが近頃は当たり前になってきています。
いわゆる「モバイルファースト」(スマホでネット見ることを優先して考えよう)の流れもあり、検索したときにも上位に表示されやすい(いわゆる「SEO対策」に有利)と言われていることもスマホ対応の後押しになっている様子。
その「スマホ対応ホームページ」ですが、大まかには下記のようなものがあります。
【1】スマホ専用ホームページを用意する
しばらく(5年以上)前だと通常のホームページとは別にスマホ専用のホームページを作っておくというパターンが多かったように思います。
パソコンでアクセスして来た人は通常のホームページへ接続し、スマホでアクセスして来た人はスマホ専用ホームページへ接続する、という方式ですね。
これは「リダイレクト」という技術を使って行います。
少々専門的な話になりますが「.htaccess」というファイルをサイトの入り口(ルートディレクトリ)に設置するだけでOK。「.htaccess」という名前だけで「うわ難しそう」と思われるかもしれませんが、実際には10行かそこらの定型文の内容を少々いじれば作れますので作業自体は難易度低めです。
でもホームページの構造などの予備知識は必要かと思います。
ということで、この「通常のホームページとは別にスマホ専用のホームページを作っておく」という方法は技術的には比較的難易度が低いのですが、管理や運用が面倒になる傾向があります。
つまり「PCサイトとSPサイト(スマホ用サイト)の内容を揃えるのか別にするか?」という問題があったり、「PCサイトの内容を修正したのにSPサイト(スマホ用サイト)の方が放置したままだった!」ということがあったりで、最近はこの方法を使ったサイトは減少傾向のようです。
最近立て続けに「スマホ対応ホームページはもう古いんですよね?」というようなことを言われたことが何度かあったのですが、よくよく聞いてみると皆さんこの辺のことを言いたかったようです。
【2】「レスポンシブデザイン」でスマホ対応にする
最近多いのは「レスポンシブデザイン」と言って、表示する画面サイズに最適化した表示を行うタイプです。
つまり元のホームページは一つだけ。パソコン(PC)用とかスマホ(SP)用とかの区別はないのですが、パソコンで見ればパソコン用のサイト、スマホで見ればスマホ用のサイトを自動で表示してくれる、というものです。
大抵、WordPress(ワードプレス)というCMS(Contents Management System)アプリケーションがベースになっています。ざっくり言うなら「CMS」とは要はブログなのですが、ホームページとしても使えます。
これは何が良いかと言うとパソコン用サイトとスマホ用サイトが同じものなので、先ほど書いたようなPCサイトの内容を修正したのにSPサイト(スマホ用サイト)の方が放置したままだった、などということがありません。つまり運用・管理がラクなのです。
逆に問題点としてはスマホ用表示では左右幅が少ない分、文章の改行が増えてしまい、大した情報量ではないページでもたくさんスクロールしないといけない場合があることです。
重要性の低い文章や画像はパソコンでのみ表示させることもできますし、アンカー(ページ内リンク)を適切に設置することでスマホでも比較的ラクに閲覧できるようにするなどの解決策があります。
「レスポンシブデザイン」については下記の記事も併せてご覧ください。(過去記事)