スマホサイト制作
スマホサイトの重要性
スマホの普及に伴い、スマートフォンからの「検索数・アクセス数が」大きく増加しています。
以前は、ホームページといえば、PC用のホームページさえあれば、大きな問題はなかったのですが、今はパソコンサイトと同じぐらいスマホサイトが重要になってきています。
業種やサービスにより、割合は前後しますが、多いサイトでは、スマホからのアクセスが70%を超えるサイトもあります。
※一般的にタブレット端末は、PC版サイトが表示されるように設定します。
スマホ対応していないサイトは検索順位が下がります
Googleは、2015年4月21日から、モバイルフレンドリーサイト(モバイルに最適化したサイト)をモバイル検索の検索順位で優遇するということを発表しました。よって、スマホ対応していないサイトの順位は下がります。
今すぐスマホ対応すべき?
業種に関わらず、スマホ対応は早くすべきですが、特に、スマホ利用者が多い20代〜30代をターゲットとしたサービス・商品に関するサイト、既にスマートフォンからのアクセスが多いサイト、などは、早急に対応する必要があります。
スマホサイトの仕組み
スマートフォンサイトの構築方法は、3種類あります。
レスポンシブ・ウェブデザイン Google推奨
すべてのデバイス(PC、スマホ、タブレットなど)に単一のURLで同じHTMLを提供し、CSSを使用してデバイスごとにデザインを変更するサイトです。こちらが Google の推奨する設定方法となります。
レボネットでも特別な状況のサイト(既にサイトをもっていてPCサイトをリニューアルしたばかり、PCサイトのリニューアルが出来ない理由があるサイトなど)でない場合は、新規のホームページ制作のお客様にもホームページリニューアルのお客様にも、レスポンシブWEBデザインの導入をオススメしております。
ユーザーエージェントによって表示するHTML、CSSを変更
すべてのデバイスに対し単一のURLで、ユーザーエージェントに応じてデスクトップ用かモバイル用かなどを判断して動的に異なるHTMLとCSSを提供するサイト。
別のURLでスマホサイトを構築
モバイル用のサイトとデスクトップ用のサイトを別々に構築しているサイト。URLもHTMLもCSSもそれぞれ異なるものを用意。
構築方法の比較
内容 | レスポンシブ オススメ | 同一URL・別HTML | 別URL・別HTML |
---|---|---|---|
URL | PCと同一 | PCと同一 | PCと異なる |
HTML | PCと同一 | PCと異なる | PCと異なる |
CSS | PCと同一 | PCと異なる | PCと異なる |
ユーザーエージェント取得 | 不要 | 必要 | 必要 |
リダイレクト | 不要 | 不要 | 必要 |
サイト管理の手間 | ワンソースなのでサイト管理の手間が少ない。PCサイトのみを管理するのとほぼ同等。 | コンテンツが増えるごとにスマホ用HTMLを別途作成。HTML切り替えの設定が必要。 | コンテンツが増えるごとにスマホ用HTMLを別途作成、アップロードなど、作業量は一番多い。 |
レスポンシブWEBでモバイルフレンドリーなホームページ制作
既にサイトをお持ちのお客様には、サイト運営状況に応じて、最適なスマホサイト制作方法にてホームページを作成させていただきますが、新規にホームページを制作される方、リニューアルの方には、継続した運営管理、今後のWEBトレンドを考える上で、レスポンシブWEBデザインの導入をオススメしております。
目的達成に必要な仕組みをご提供
; ?>/images/iconWP.png” alt=”WordPressでホームページ制作”>
<p>高機能なCMS</p>
</div>
<div class=)
; ?>/images/iconRWD.png” alt=”レスポンシブWEBデザイン”>
<p>モバイルフレンドリー</p>
</div>
<div class=)
; ?>/images/iconSeo.png” alt=”SEO対策”>
<p>SEO対策</p>
</div>
<div class=)
; ?>/images/iconPlan.png” alt=”企画構成”>
<p>企画構成</p>
</div>
<div class=)
; ?>/images/iconAnalytics.png” alt=”アクセス解析 Analytics”>
<p>アクセス分析</p>
</div>
<div class=)
; ?>/images/iconSys.png” alt=”WordPressカスタマイズ、システム開発 Analytics”>
<p>プログラム開発</p>
</div>
<div class=)
; ?>/images/iconAds.png” alt=”リスティング広告”>
<p>リスティング広告</p>
</div>
<div class=)
; ?>/images/iconSns.png” alt=”Facebook Twitter連携”>
<p>SNS連携</p>
</div>
</div>
</div>
<ul id=)
コメント