menu
  • 新規登録
  • ログイン

建設業界のためのスマートフォン対応Webサイトの考え方

Icon 72x72
CAREECON
77
Large image %e5%bb%ba%e8%a8%ad%e6%a5%ad%e7%95%8c%e3%81%ae%e3%81%9f%e3%82%81%e3%81%ae%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e5%af%be%e5%bf%9cweb%e3%82%b5%e3%82%a4%e3%83%88

日本は先進国ナンバーワンのスマホ大国


インターネット上でのトラフィック(通信量)もスマートフォン比率が増えています。世界的なソフトウェアメーカー、アドビの発表によると、日本は欧米を含む先進国の中で、スマートフォン比率が一番高いそうです。

引用:Adobe Experience Cloud Japan Blog(2017.02.28)

スマートフォン比率が47%という数字は平均値で、サイトによって比率は大きく変わってきます。たとえば建設業界では、企業向けのBtoBビジネスや官公庁向けの工事が多い場合、まだ7割がパソコンからのアクセスという会社もあります。

逆に、個人で女性からのアクセスが多いリフォーム会社などでは、7割以上がスマートフォンという会社も珍しくありません。自社サイトのスマートフォン比率をご存じなければ、Googleアナリティクス(アクセス解析サービス)でご確認ください。ほとんどの場合、サイト立ち上げの際に使えるよう制作されています。レポートページで、「ユーザー>モバイル>サマリー」とクリックしていけば、スマートフォンからのアクセス比率がわかります。

ここでスマートフォン比率が高い場合、スマートフォンから自社のサイトを確認してみてください。「文字が見にくいほど小さい」「デザインが崩れている」といった状況であれば、パソコン用のサイトを無理矢理スマートフォンで見ている可能性があります。そのままだと、今後はアクセスが減っていきそうです。

スマートフォン対応しないと検索順位が下がる!


その理由は、Googleが今後はスマートフォン対応を重視して、検索順位を決めると宣言しているからです。

これまでは「モバイルフレンドリー」、要するにスマホ対応されていれば順位決定時にプラスになるという考え方でした。

しかし、さらに進んで2016年11月には、「モバイルファーストインデックス」という考え方が発表されました。簡単に言うと、「検索はスマートフォンで行なっている人がほとんどなので、検索順位もスマートフォン用サイトを比べて決める」という大転換です。ここ10年で最大の方針転換だという声もあります。

参考:Googleウェブマスター向け公式ブログ(2016.11.05)/「モバイル ファースト インデックスに向けて」

ということは、スマートフォン対応されていないと、検索順位が大きく下がることを意味します。それだけの大転換ながらGoogle社員のツイートから予想すると、導入は2018年初旬。もうそれほど時間はありません。

レスポンシブWebデザインとは


では、具体的にどうすればいいのか。Googleが勧めているのが、「レスポンシブWebデザイン」というデザイン手法です。

レスポンシブ ウェブ デザイン:ユーザーのデバイス(パソコン、タブレット、モバイル、非視覚的ブラウザ)に関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて(つまり「レスポンシブ」に)レンダリングを変えることができます。Google では、デザイン パターンとしてレスポンシブ デザインをおすすめします。

引用:Google Developers「モバイルSEOの概要」

今では一般に広がっている手法ですが、今回のGoogleの方針転換で、再び注目が集まっています。

レスポンシブWebデザイン以前は、デバイスごと、つまりパソコン用とモバイル用、複数の画面デザインを用意して、どのデバイスからのアクセスかを判断して適した画面を表示する方式が一般的でした。URLアドレスの最後に「/mb/」(mb=モバイル)などと付いているのがそれです。

レスポンシブWebデザインの場合は、1つのHTML(デザインファイル)で、表示する画面のサイズに応じて、レイアウトやデザインを調整する方式のことです。こう書いてあるとわかりにくいかもしれませんが、下の当社のサイトを参考にします。パソコンの横長画面で見ると項目が横に並んでいますが、スマートフォンの縦長画面で見ると、縦に並びます。

パソコンの横長画面で見た場合

スマートフォンの縦長画面で見た場合

このように、手間をかけずに、どの画面で見ても内容がわかりやすいようにと開発されたのが、レスポンシブWebデザインです。

レスポンシブWebデザインのメリット・デメリット

【メリット】


それまでは、各デバイス用に画像やデザインを用意しなければならず、制作に時間とコストがかかっていました。レスポンシブWebデザインの場合、同じ写真やテキストでを使いながら、各デバイスごとに最適化した状態で表示することができるため、複数サイズの画像を用意するなどの手間とコストが不要になりました。

同じデザインやテキストを使うため、1回修正すればすべでのデバイス表示で反映され、修正ミスのリスクも減っています。

そして、すべてのデバイスでURLが同じ、つまりリンク先が1つでページランク(※)が分散しないため、SEO的に弱くなりません。

※ページランク=GoogleがWebページの重要度を測るための指標で、被リンク数とリンクの質によって決まります。

【デメリット】


一方で、パソコン表示できるほど大きめの画像などを読み込むため、回線速度が遅いことが多いモバイル端末では、読み込み速度も遅くなることがあります。しかし、速度を改善する方法がいくつかあります。

AMPでページ読み込みを高速に

スマートフォン閲覧時の速度を改善する方法のひとつが、GoogleがTwitterなどと共同で開発している「AMP(Accelerated Mobile Pages)」。2015年10月から開始されています。

AMPが指定する方式でデザインすることで、Googleなどのサーバーにデータが蓄積され、そのデータをスマートフォンが読む込むために高速となります。

スマートフォンでGoogle検索した時に、「雷マーク+AMP」とあるページが、AMP対応ページです。

どの程度早いか、Googleが比較した動画を見てみてください。


スマートフォンでは少しでも遅いと離脱されてしまうため、この動画程度の違いでも、閲覧人数が変わってくるでしょう。

そして、表示スピードの速さはSEO的に大きな要素です。建設業界ではまだまだ対応企業は少ないため、今のうちに対応しておけば、検索順位を上げることもできそうです。

まとめ


Googleが推奨しているレスポンシブWebデザインにしても、AMPにしても、ユーザーの閲覧体験をより良くする大切な要素です。

ですが、それらは失点しないための基本的な施策で、本当に大切なのは、良質なコンテンツです。たとえ使いやすいデザインであったとしても、良質なコンテンツがないページでは高い順位にはなりません。

ユーザーが見やすい土台を整備したら、その上に魅力的なコンテンツを建てていきましょう。

会員登録して、CAREECONを便利に使ってみませんか?

CAREECONは建設業界特化の完全無料マッチングサービスです。

  • \会員のメリット/
  • Image number 1
    気になる会社に直接メッセージを送れる
  • Image number 2
    工事案件 / 空き情報の投稿で、仕事の獲得や人手の募集ができる
  • Image number 3
    分析機能により、他社からどれくらい興味を持たれているのかが分かる
  • Image number 4
    施工事例の投稿で自社の実績を他社にアピールできる

その他、会員限定機能が多数!
会員登録は完全無料です。

無料会員登録へ進む

カテゴリー

建設業界

もっと読む
Thumb %e5%bb%ba%e8%a8%ad%e3%82%ad%e3%83%a3%e3%83%aa%e3%82%a2%e3%82%a2%e3%83%83%e3%83%97%e3%82%b7%e3%82%b9%e3%83%86%e3%83%a0

2019年4月にスタートした「建設キャリアアップシステム」、そのメリットは?

Icon 72x72
CAREECON
14140
Thumb img20180717193002524990

建設現場への導入が急増中!~建設会社のための「パワーアシストスーツ」ガイド~

Icon 72x72
CAREECON
9729

人事・採用

もっと読む
Thumb %e6%94%b9%e6%ad%a3%e5%87%ba%e5%85%a5%e5%9b%bd%e7%ae%a1%e7%90%86%e6%b3%95

建設業界に今後5年間で4万人規模の外国人労働者が増援!「改正出入国管理法」で雇用の何が変わる?

Icon 72x72
CAREECON
4685
Thumb %e5%a4%96%e5%9b%bd%e4%ba%ba%e5%8a%b4%e5%83%8d%e8%80%85

頼りにしてたスタッフが難民で強制送還!? 外国人労働者を雇う際の注意点とは?

Icon 72x72
CAREECON
112

マーケティング

もっと読む
Thumb %e3%83%87%e3%82%b8%e3%82%bf%e3%83%ab%e3%83%88%e3%83%a9%e3%83%b3%e3%82%b9%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3

お金をかけなくてもWebサイト分析はでここまでできる!使える無料分析ツールまとめ

Icon 72x72
CAREECON
742
Thumb %e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e6%b4%bb%e3%81%8b%e3%81%99

中小企業のAI活用事例!利益10倍を実現した「ゑびや大食堂」に学ぶデータを活かすという意識

Icon 72x72
CAREECON
2151

インタビュー

もっと読む
Thumb honjinmizukoshi main pc

【インタビュー】 女性として、女性らしく建設重機を乗りこなすのが夢

Icon 72x72
CAREECON
56
Thumb usy main pc

【インタビュー】 常に笑顔を絶やさずに 現場を支える若き女性取締役

Icon 72x72
CAREECON
50
Thumb img 6995

【実技編】仕事でドローンを操縦するために知っておくべきこと。i-Construction対応ドローンスクール体験記

Icon 72x72
CAREECON
2344
Thumb wws 120sec master.00 01 49 02.still012

「スーツに見える作業着」で現場技術者の応募数が3倍に!オアシスライフスタイルグループに学ぶ「建設業界で新規事業を成功させる方法」

Icon 72x72
CAREECON
323

求人情報

もっと読む
会員登録バナー
Icon 72x72

建設業界のためのスマートフォン対応Webサイトの考え方

CAREECON