ホームページをスマホ対応する時に押さえおきたいポイント

[記事公開日]2015/11/24
[最終更新日]2016/12/08
ホームページのスマホ対応

「スマホ対応していないと検索エンジンでの表示順位が下がりますよ」「御社のホームページを拝見して、まだスマホ対応されていなかったのでお電話させて頂きました」といった営業の電話が最近頻繁にかかってくる。

そもそもスマホ対応ってどうゆうこと?

こういったご経験はないでしょうか?

検索エンジン大手のGoogleが「2015年4月21日からスマートフォンやタブレットで見た場合に最適化されているかいないか(モバイルフレンドリー)を検索結果でサイトを表示させる順位の要素の一つとする」、という発表が2015年2月にありました。WEB関連の業界では「スマホ対応していないと検索順位が下がる!」と大騒ぎになりました。

スマホ対応していないので劇的に順位が下がったという話はあまり聞きませんが、じわじわとその傾向が出てくる事は間違いないと思います。

今回はスマホ対応とは一体どのようなことなのか、どうやってスマホ対応するのか、またどういった方法が一番おススメなのかといった事を見ていきたいと思います。

 

「スマホ対応」ってどうゆうこと?

スマートフォンが出てくる前にもガラケー、フィーチャーフォン(feature phone)と言われる携帯電話はありましたが、ホームページというのもはPCで見る事を前提に作られてきました。

デザインや文字の大きさなど含め全てが通常は14インチ以上のディスプレイで見る事を前提に作られていましたので、スマホのように5インチ程度の画面で見た場合、全く同じように表示をすると文字やリンク、バナーが小さくなりすぎて著しく利便性が悪くなってしまうのです。

そこで、スマートフォンで見た場合に限ってホームページの文字や配置をスマートフォンで見やすく表示するように設計したものが「スマホ対応サイト」と呼ばれるものなのです。

PCのディスプレイで見る事を前提に作られた従来のサイトは横長の作りになっていますので、縦長画面のスマートフォンでサイトを見る場合、全体を表示させようとすると、どうしても字やバナーが小さくなってしまいます。

従来通り横長で表示させると、全体を見る為に左右にスクロースしながら下にスクロールして見なければならないので非常にストレスがかかります。

スマホ対応サイトはスマートフォンで見た場合、見やすいように縦長のデザインにして表示させるようなサイトです。同じサイトでもPCで見た場合は横長のデザインで表示されます。

スマホ対応のホームページ

 

どうやって「スマホ対応」にするの?

それでは、どのようにしてスマートフォン向けの対応をするのでしょうか。

Googleは3種類のスマホ対応の方法を提示しています。

 

レスポンシブデザイン

ホームページのアドレスは同じで、PCで見た場合、タブレットで見た場合、スマートフォンで見た場合のそれぞれのデバイスに対して自動的に最適なデザインで表示させる方法です。

最初に設計すればPC用、タブレット用、スマホ用と別々にコンテンツやデザインを作る必要がないので、管理が非常にしやすいというメリットがあります

ただ、最初の制作が複雑な為、既に運営しているサイトをレスポンシブに変更するよりも、一からサイトを作り直した方が早い、という場合もあります。

 

動的な配信

Googleからは「動的な配信では、ページをリクエストするユーザー エージェントに応じて、同じ URL で異なる HTML(および CSS)が配信されます。」と書かれています。

ちょっと判り難いですね。

動的な配信はホームページのアドレスは同じで、「PCから見ています」「スマホから見ています」というユーザーからの情報を感知して、PC用、スマホ用と別々のHTML、CSSを表示します。

レスポンシブと似ていますが、レスポンシブデザインは1つのHTML、CSSであるのに対して、動的な配信はPC用とスマホ用別々のHTMLとCSSを用意しておく必要があります。

 

別々のURL

これは文字通り、別々のURLで2つのサイトを構築するという意味です。

つまりPC用のサイトとスマホ用サイトを別々に作って、URLも異なるというスマホ対応の方法です。

この場合、更新するにしても常に2つのサイトを更新しなければならない等、管理が複雑になるというデメリットがあります。

 

どの方法がおススメ?

当社では「レスポンシブデザイン」をおススメしています。

レスポンシブデザインは制作時のデザインが非常に難しいのですが、一度きちんと作り込めば、その後の管理がとても楽にできるからです。

また、スマホ対応ということで毎月の保守管理費用に加えて別途費用がかかることもないので、コスト面でもおススメです。

今見て頂いているこのサイトも「レスポンシブデザイン」です。

レスポンシブデザインで制作されているサイトはPCでもタブレットやスマホで見た場合の見え方が確認出来ます。

まずはPCで見た場合のデザインです。

レスポンスブPC

このサイトを見ているブラウザーを縮小(横幅を短く)していって下さい。

ある時点でデザインが変わります。

レスポンシブタブレット

 

更に細くしていくとガラっとスマホ用のデザインに変わります。

レスポンシブスマホ

これらのデザインの変更は自動的にされるように設定されていて、記事の更新やデザインの追加などは1つの画面で行うだけで、それぞれのデバイス向けのデザインが出来ます。

 

リヒトスは追加料金無し!標準でスマホ対応です。

スマホ対応当社で制作致しますホームページは全て標準でスマートフォン対応となっております。

スマホ対応として別途費用はかかりません。

 

2015年以降、当社で制作致しますサイトは全て標準でスマートフォン対応(レスポンシブデザイン)となっています。

(制作費は298,000円+税~となっております:料金・サービス内容について

スマホ対応のホームページ

スマホ版新機能搭載!

2016年12月制作分(制作費298,000円+税~)から新しく固定バー機能を追加しました。

(※当社で以前制作させて頂いたお客様のサイトに追加で設置する場合は4万円+税となります。それ以外のサイトへの設置費用は6万円+税となります。)

当社の制作するサイトは長い記事ページが前提として制作しています。

スマートフォンで記事を読んでいて、全部読み終わらなくても「もうここに決めたから問い合わせをしたい!」と思うお客様もいらっしゃいます。

そんな時にすぐに問い合わせが出来るように、常に問い合わせボタンを表示させておく機能です。

表示方法は以下のように自由に設定できます。

スマホ対応 固定バー

画像タイプ

今、ご覧頂いているこのサイトは「画像タイプ」の固定バーを使用しています。

画像タイプの特徴は「メールでの問い合わせ」「電話での問い合わせ」など、イラストですぐに連想出来るものに効果的です。

スマホ対応固定バー イラストタイプ

 

テキストタイプ

ある特定のページに特に誘導したい場合には「テキストタイプ」がお勧めです。

以下のサイトは「特区民泊勉強会」の参加者を増やすためにテキストタイプにした例です。

固定バー テキストタイプ

 

まとめ

まとめ「スマホ対応」とはスマートフォンでサイトを見た場合に、縦長で文字も読み易いデザインになるように設定されたサイトのことです。

スマホ対応のデザインにするにはレスポンシブデザイン、動的な配信、別々のURLの3つの種類があります。

その中でもレスポンシブデザインはサイトを運営していく上で管理や更新が楽というメリットがあるため、尼崎ホームページ制作センターではレスポンシブデザインを採用しています。

弊社では標準でレスポンシブデザインになっていますので、追加の費用は一切かかりません。

今後検索エンジン対策をする上で「スマホ対応」の重要性はどんどん高まってくると予想されます。

またスマートフォンでサイトを見る人はここ数年で劇的に増え、近い将来、PCよりもスマートフォンでサイトを見る人が多くなると言われています。

そういったスマホでの需要を考えると、まだ自社のサイトをスマホ対応されていない方は、今後スマホ対応のご検討されるのが良いのではないかと思います。

 

「何から始めたらいいのかわからない・・・」という方へ

現在お持ちのホームページでスマホ対応にしたいけれど、何をどうしていいか分からないという場合も多いと思います。

「とにかく、どうしたら良いか分からないので困っている」という場合は、とりあえず当社にご連絡下さい。

 

 

お問い合わせ

お電話でのお問い合わせ

075-204-4377

 

ホームページからのお問い合わせ

お名前 (必須)
メールアドレス (必須)
件名 (必須) ホームページ制作について保守管理の移管についてお持ちのホームページ改善について記事の書き方についてSEO対策についてその他のお問い合わせ
お問い合わせ内容(必須)
上記の内容にお間違いがなければ、チェックを入れ送信してください。