制作ガイド
ホームページ制作に必要なものは?準備・流れを・・・
2023.04.25
TRASPコラム
制作ガイド
更新日:2023.04.02
公開日:2020.07.08
「モバイルファーストインデックス」という言葉を聞いたことはありませんか。
いままで、Googleはパソコン用ページのコンテンツを元に評価していましたが、これからはモバイル用ページを元に評価するという取り組みです。スマホ対応ページがなければ評価できず検索結果に表示されない…という時代がやってくると予想されています。
つまり結論からいってしまえば、今やスマホ対応のモバイルページはどの業種にも必須なのです。
そこでこの記事では、今のホームページがスマホ対応できていない方や、これからホームページを作りたいと思っている方へ、Web制作のプロであるTRASPがスマホ対応の方法や重要性などについて初心者にもわかりやすく説明していきたいと思います。
目次
ホームページのスマホ対応とは、「レスポンシブデザイン」ともいい、文字どおりWebサイトをスマートフォンから閲覧できるようにすることです。
しかし、ただ「スマホから見られる」というだけでは、スマホ対応とはいえません。
なぜならスマートフォンでは、パソコン用サイトも見えてしまうためです。もしスマホ対応していないパソコン用サイトをスマートフォンから見たら、どのようなことが起きるでしょうか。
ホームページの横幅をスマホ画面に合わせると文字が小さくなってしまい読みにくく、文字が読めるよう拡大すると横にスクロールをしなくては見れないようになってしまいます。
つまり、スマホ対応していないホームページは、スマートフォンでは非常に見づらいといえます。
スマホ対応は単に「スマホで表示できる」だけでなく、スマートフォンで見やすいように設計(=最適化)されたWebサイトということになるのです。
でも、スマホでも見られないことはないパソコン用サイト、スマホ対応しないといったいどのようなデメリットがあるのか、考えてみたいと思います。
まず知っておきたいのが「モバイル・ファースト・インデックス」について。
前述したとおり、数年前からスマートフォンからの検索がパソコンよりも多くなっていることから、Googleではモバイル用ページの評価を検索結果の順位に反映させることを発表しました。これを「モバイル・ファースト・インデックス」といいます。
今までは主にパソコン用ページをインデックス(Googleサーチエンジンに登録)し、順位を決定していましたが、これからはモバイル用ページを元に決定されることになります。
まだ詳細な評価基準は明らかにされていませんが、もしスマホ対応のサイトがないホームページ、スマホからの使い勝手が悪いWebサイトは評価が下がり、検索結果に表示される順位が下がってしまうことが考えられます。
検索エンジンのシェアのほとんどを占めているGoogleからの評価を下げないためにも、既存のホームページがスマホ対応になっていない方、そしてこれからホームページを作ろうと考えている方は、レスポンシブデザインにしておくべきだといえるでしょう。
スマホ対応されていないパソコン用サイトをスマホで見るためには、一画面にはおさまりきらず拡大したり、横にスクロールしたりする必要があります。Webサイトが見づらいということは、訪問ユーザーにストレスを与えてしまうことになります。
見づらく、ストレスのたまるWebサイトはすぐに「戻るボタン」で離脱されてしまう可能性が高まります。
一般的に、Webサイトはアクセスして3秒で続きを見るか、それとも離脱するかが決まるといわれています。つまり、最初から見づらいホームページではどこもクリックされることなく、訪問ユーザーが回れ右をしてしまいます。ユーザーからの評価が低ければ、Googleからの評価も下がってしまうといえます。
訪問ユーザーが長くとどまり、その先までアクセスしてもらうにもスマホ対応が必須だといえるでしょう。
ひと口にスマホ対応といっても、大きく分けて次の2つの方法があります。
この2つの方法は似ていますが、まったく違うものだと覚えておきましょう。
まず一つ目としては、パソコン用とスマホ用ホームページを別々のURLで作り、デバイスごとに切り替えるということです。
たとえば下記のようにホームページURLが異なります。
【パソコン用】http://(ホームページ名)com/
【スマホ用】http://(ホームページ名)com/sp/
パソコンとスマホで別々の画面サイズを想定し作成していくため、デザインやレイアウトを細かく調整することが可能です。制約もなく自由度が高いので、UIに優れたホームページのができる、ユーザーの離脱率も抑えることができます。
しかし、2つ分のホームページを作成、管理するので、デザインは2種類作り、修正があった場合にもそれぞれを修正することになります。制作会社に依頼した場合は、費用が2サイト分かかることになるでしょう。
そして二つ目としては、レスポンシブデザイン。
こちらはパソコン用とスマホ用で画像やテキスト、HTMLファイルなどは同じものを使用しますが、それぞれのデバイスの画面幅に合わせてデザインを変化させることができます。使用するのはCSSのみで、画面幅を指定し、デバイスに合った文字サイズやレイアウトを書き換えます。
デザインの自由度はなくスマホ用もパソコン用も同じになりますが、1つのHTMLファイルとCSSの管理だけなので、1か所の更新を行うとパソコン用もモバイル用もともに修正が反映される点はメリットだといえるでしょう。
そして現在のホームページ制作の主流としてGoogleが推奨しているのが、レスポンシブデザインです。レスポンシブデザインではない別々のURLになってしまうことで、ユーザー側・企業側・Google側とそれぞれの視点でのデメリットは次のとおり。
ユーザー
アクセスしてきたのがスマホなのかパソコンなのかによって、判定してそれぞれのURLに振り分けるため読み込みが遅い。
企業
ページが2倍になり、とにかく管理が大変。
同じ内容のページなのにURLが2つあるで、評価できない可能性。あるいは評価が分散し、下がってしまう可能性がある。
したがって既存のホームページをスマホ対応させる場合にも、スマホ対応したホームページを新規制作する場合でも、レスポンシブデザインが良い選択といえるでしょう。
TRASPが提案するWebサイトには、欲しい技術や必要な機能が標準で最初からそろっています。もちろんスマホ対応のレスポンシブデザインもそのひとつ。制作~公開、運用まですべてサポートいたします。
TRASPのWeb制作
重複コンテンツについて詳しく知りたい方はこちらの記事をご覧ください。
スマホ対応=レスポンシブデザインだということがわかったところで、具体的にどのようにしたら良いのか、解説していきます。
方法は、次の3つ。
既存のホームページが古いもので、ほとんど手つかずであればレスポンシブデザインで新規作成するのもひとつの方法です。ただコストがかかるため、リニューアルするのか新規作成するのか、慎重に判断しましょう。
「flamingo (フラミンゴ)」はプログラミングレスでサイト改善を実現することができるため、UI・パフォーマンス・SEO改善、モバイル ファースト インデックス対応などに向いています。
こちらのような変換ツールを使うと、プログラミングの知識がなくても自社でスマホ対応させることが可能。ただ月間PV数によって数万円~数十万円と料金に幅があり、チュートリアルを見ながら自力行う必要があります。自社のリソースが足りていないなど、忙しく人手不足の企業には不向きかもしれません。
プロのホームページ制作会社に依頼することで、確実にレスポンシブデザインにすることが可能です。
レスポンシブデザインに対応していない制作会社はないと思いますが、料金や制作内容は制作会社によって大きく違います。次のような点に気をつけて、自社に合った制作会社を選びましょう。
TRASPは建設・鉄鋼・塗装・エステ・サロン・整体/整骨院・美容室・士業・飲食店・など日本にあるほとんどの業種のサポートを行ってきた豊富な実績があります。専属ディレクターが細かくヒアリングしながら、お客さまに合った6プランから提案させていただきます。⼩規模事業者持続化補助⾦を利⽤することも可能です。詳しくはお問い合わせください。
料金はこちら
スマホ対応には次のような理由から現在のホームページ運営においては必須ともいえます。
レスポンシブデザインにはメリットが多く、これからホームページつくるのであれば、モバイルユーザーを意識したホームページ制作をするようにしましょう。
TRASPはさまざまな業種のホームページをリニューアル・新規作成しております。無料相談も行っておりますのでお気軽にお問い合わせください。
お問い合わせはこちら