フリーランス×WEB

あなたのサイト、スマホで見やすいですか?今や必須のモバイルフレンドリーとは

モバイルフレンドリーという言葉を聞いたことがありますか?

今回は、フリーランスがウェブサイトを作る上で忘れてはならない大事なポイントとして、モバイルフレンドリーについて紹介したいと思います。

スポンサーリンク

 

そのサイト、スマホで見やすいですか?

今やほとんどの人が家でも外出先でもスマホを使って検索しています。

パソコンを持っていない人は結構いますが、スマホは今やほとんどの人が持っていますよね。つまりパソコンよりもスマホで検索してサイトを見ている人が圧倒的に多いということ。

しかし、サイトによってはスマホやタブレット端末から見てもパソコンと同じ表示になってしまっているものもあります。

その場合、文字が小さくて読みづらかったり、逆に画像が大きすぎて切れてしまっていたりと、読み手側に大きなストレスがかかってしまいます。

このようなスマホユーザーが増えたことを受けて、検索の王様であるGoogleは、2015年4月21日から「モバイルフレンドリー」という仕組みを全世界で運用し始めました。

モバイルフレンドリーとは

モバイルフレンドリーとは、モバイル(スマートフォン)で見やすいページの評価を上げ、反対に見づらいサイトの評価を下げるというアルゴリズムのこと。

※アルゴリズムとは
検索エンジンが検索結果でWEBページにランキング付けをするための計算方法のこと

つまり、スマホ用に画像サイズや文字サイズ、ページの幅などが整っているサイトは、検索結果の上位表示が期待できますが、スマホで見づらいサイトは検索順位がどんどん下がってしまうということです。

モバイルフレンドリーアルゴリズムの開始以来、多くの企業、サイト制作者、デザイナー、プログラマーがスマホで見やすいサイト構築に励み、今やスマホで見やすいのは当たり前

逆にスマホでの見やすさに対応していないサイトの方が悪目立ちしてしまう時代になりました。

スポンサーリンク

スマホ対応とレスポンシブ対応

スマートフォンで見やすいサイトにはスマホ対応とレスポンシブ対応の2つの種類があります。

「スマホ対応」とは、スマホで見る専用のサイトをつくること。要はパソコン用のサイトとスマートフォン用のサイトの2つのパターンを作成する方法です。

独立した運営となるので、変更や更新の際には2つのサイトをどちらも変えなければなりません。

この「スマホ対応に」代わり今一番採用されているのが「レスポンシブ対応」と呼ばれるウェブデザインです。

デバイス(ディスプレイサイズ)ごとに異なるCSSを適用できるので、管理するサイトは1つなのに、パソコン・タブレット・スマホなどウェブページを見るデバイスによって構造・文字サイズ・画像サイズ・ページ幅などのデザインが自動的に変更されて表示されます

ワードプレスなら自動的にレスポンシブ対応

ウェブページを見るデバイスに合わせて自動的にサイズやデザインを変更してくれるレスポンシブ対応。

そんな便利な機能を一体どうやって自分のサイトに取り入れたらいいのか、それはワードプレスを使えば簡単に実現できます。

「ワードプレス」とは、ブログやサイトをインストール無料で簡単に作成できるソフトウェアのこと。無料ブログサービスと違って広告表示もなく、月額500〜1,000円程度でおしゃれで機能的なサイトを作成・運営することができます。

ワードプレスには5,000種類以上の無料・有料テーマ(デザインテンプレート)がすでに用意されており、ほとんど全てがレスポンシブ対応のデザインとなっています。

つまり、HTML,CSSなどのプログラミングの知識は全く必要なく、デザインを選ぶだけでレスポンシブ対応が実装されるのです。

これから自分のサイトを作ろうと考えている人は、ぜひワードプレスの使用を検討してみてください。

あわせて読みたい
圧倒的に便利!フリーランスがワードプレスでWEBサイトを作るべき7つの理由フリーランス(個人事業主)として起業を決めた! ビジネスやサービスの案もやっと固まってきて、そろそろ本格的にウェブでの集客や認知度...

まとめ:スマホでの見やすさを大切に!

以上、今回はフリーランスがウェブサイトを作る際に知っておきたいモバイルフレンドリーについてご紹介しました。

要点リスト
  • モバイルフレンドリーとは、スマホで見やすいサイトが検索結果で評価が上がる仕組みのこと
  • レスポンシブ対応とは、ページを見るデバイスによって自動的にデザインが切り替わる機能のこと

デザイン自体は、プロのデザイナーさんやプログラマーさんの手によってレスポンシブ対応という便利な機能ができましたが、ブログの文章や、文字の大きさ、記事の中に入れるグラフや表などは自分たちでサイズを調節する必要があります。

パソコンで見るだけでなく、スマホで見た時の表示もしっかり確認して、評価の高いサイトを作り上げましょう。

パソコンの画面でスマホ表示画面を確認する方法
Google Chromeでサイトを開く→画面上の空白スペースで右クリック→検証を選択→サイドバーからToggle device toolbarを選択するとスマホ表示に切り替わります。

スポンサーリンク