こちらはジンドゥー(JimdoJapan)のページです。他言語での閲覧は右のリストからお選びいただけます。
登録する
ジンドゥーでモバイルサイトを作成する方法

モバイルフレンドリーサイトの作り方

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

モバイルフレンドリーサイトの作り方

近年スマートフォンやタブレットの普及により、ホームページがモバイル端末から閲覧されることが多くなりました。そして 2015 年、検索エンジン最大手の Google は、ホームページが「モバイルフレンドリー(モバイルでの閲覧に対応している)」かどうかを評価基準の一つとして加えました。これによりモバイル端末からホームページを閲覧した際に、訪問者にとって見やすい構成になっているかが重要視されるようになりました。

実際のところ、モバイルから見た際にホームページのメニューが分わかりづらかったり、表示されるまでの時間が掛かったりすると、多くのモバイルユーザーはそのページを離れてしまう傾向があります。

ホームページ作成の経験がある方なら、モバイルユーザーがいかに重要であるかを耳にしたことがあるはずです。同時に、自分で作成したホームページがモバイルフレンドリーであるかも気になっていたことでしょう。

ジンドゥーでホームページを作成している場合、モバイルフレンドリーについて悩む必要はありません。ジンドゥーはすべてのレイアウトがレスポンシブ対応なので、ホームページにアクセスしてきた人のデバイス(パソコン/スマートフォン/タブレット端末など)の画面サイズに合わせて自動的にレイアウトが切り替わります。

ただし、より良いモバイルサイトを作成するためには、あなた自身ができることがあります。モバイルフレンドリーの重要性と併せて、モバイルサイトを作成するうえで気を付けるべきことを、一緒に確認していきましょう。

なぜモバイルフレンドリーが重要か

スマートフォン・タブレットの普及:前述の通り、ホームページを閲覧するデバイスが、近年になってスマートフォンなどのモバイル端末である割合が増えてきました。さらに Google の「モバイルフレンドリーであることが検索結果で有利になる」という発表の後押しもあって、パソコンよりもモバイル端末から検索をする人が増えました。

モバイルフレンドリーは検索結果でも有利に:Google の発表によると、ホームページがモバイルフレンドリーであることは SEO の観点からも有利であり、検索結果で優先的にランクされることが分かっています。もちろん充実したコンテンツを用意することはとても重要ですが、モバイルフレンドリーでないサイトは、これまで検索結果で上位に表示されていたとしても、今後 SEO の評価は下がっていく恐れがあります。

モバイルユーザーは購買意欲が高い傾向ある:モバイル端末でホームページを閲覧するユーザーは購買意欲があり、目的が明確である傾向があります。たとえば、スマートフォンで「ピザ」と検索する場合、その目的はピザを食べたくてお店や注文先を探していることが多いはずです。なにか調べものをしたり、商品のレビューを読む際はパソコンから操作されることが多いですが、あらかじめ調査していた商品を購入するなど、明確な目的を果たす際にはモバイル端末から操作されることが多いです。こういった層のユーザーの背中を押すためにも、モバイルフレンドリーはとても重要になります。

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

レスポンシブデザイン

スマートフォンでホームページにアクセスしたとき、小さな文字を読むために画面をズームしたり、画面をスライドさせて読んだ経験はありませんか?こういったホームページにで出会うと、「不親切だな(フレンドリーじゃないな)」と思いますよね。当然、閲覧にもストレスを感じます。

そこでこれを解決するのにおススメなのが、「レスポンシブデザイン」です。レスポンシブデザインは閲覧者が使用している端末の種類に合わせて、文字や画像の大きさ、文章の改行、ナビゲーションの表示方法などを自動的に最適化してくれます。これなら画面サイズの異なるデバイスで閲覧されても問題ありません。

また、ホームページをレスポンシブデザインにすることにより、パソコン用サイト、モバイル用サイト、とホームページを分けて作成する必要がなくなります。一つのホームページを、すべての訪問者が、どのデバイスからでも、最適な状態で閲覧することができます。

モバイルフレンドリーのサイトはどうやって作るのか

ホームページ作成サービスの「Jimdo」で提供しているレイアウトはすべてレスポンシブデザインなので、Jimdo でホームページを作成すれば少なくともその点においては、モバイルフレンドリーと言えます。ただし、より優れたモバイルフレンドリーのサイトを作成するには、あなた自身がモバイルユーザーのためにできることがいくつかあります。

たとえば、Google が提供している「モバイルフレンドリーテスト」(https://search.google.com/test/mobile-friendly)をご存知でしょうか。
モバイルフレンドリーテストを行うと、「文字の大きさが小さすぎる」や「リンクの間隔が狭すぎる」など、モバイルフレンドリーのサイトを作成するために必要なアドバイスをしてくれます。

より優れたモバイルフレンドリーのサイトを作るために

ひとつのページにコンテンツを詰め込みすぎない:モバイル端末は、パソコンに比べてインターネットの速度が遅くなる傾向があります。そのため、ひとつのページに画像などのコンテンツを多く入れてしまうと、ページを読み込むのに時間が掛かってしまい、せっかく来てくれた訪問者が離脱してしまいます。なかなかページが表示されないサイトや、データ通信量を費やしてしまうサイトは、それだけで閲覧者に避けられてしまう恐れがあるので注意しましょう。ページの表示速度については、無料で測定できるツールもあります。中には改善ポイントを教えてくれるツールもあるので、一度試してみるといいかもしれません。また、サイズの大きい画像を圧縮したり、ホームページに必要のないプラグインやポップアップがある場合は、これらを消去することも有効です。

画像サイズを考える:ホームページに使っている画像のサイズ(容量)が大きすぎることはないですか?一眼レフで撮影したクオリティの高い画像や、ホームページの素材として簡単に調達できる無料の画像は、データ容量が大きいことがよくあります。クオリティの高い画像を使うことで印象的なホームページを作成できますが、同時にページの表示速度は遅くなります。画像を圧縮できる無料のツールもありますので、こういったツールを使って、画像のクオリティを下げずにデータ容量を小さくすることをおすすめします。

ナビゲーションは簡潔に:ナビゲーションの構成が複雑だと、モバイルユーザーには必要なものを見つけることが難しくなってしまいます。ページが多すぎたり、構成が複雑なサイトはユーザビリティが低くなるので、モバイルユーザーが小さな画面からでもすぐに必要な情報へ辿り着けるよう、ナビゲーションはシンプルな構成を心掛けましょう。

サイト運営者の情報・連絡先は明確に:モバイルユーザーがホームページを閲覧するとき、その多くはサイト運営者の「連絡先」を探していることがあります。連絡先情報に辿り着くまでにたくさんスクロールしなければならないサイトや、お問い合わせフォームがどこにあるか分からないサイトは、連絡先を見つける前に諦められてしまう可能性があります。また、モバイルユーザーにとって「お問い合わせフォーム」に情報を入力することは非常に手間です。メールアドレスや電話番号などもきちんと記載するよう心掛けましょう。

重要な情報は一番上に:訪問者にとって必要であろう情報、たとえば期間限定のキャンペーン情報などは、見つけやすいようにページの一番上に配置しましょう。

大きな文字、ボタンを使おう: 画面の小さなスマートフォンから閲覧する場合、快適に読める文字の大きさは自分が思うよりも大きいことが多いです。作成したホームページを画面の大きさが異なるさまざまな端末から見てみることをおすすめします。閲覧者の立場に立って自分のホームページを見てみたり、誰かにお願いしてアドバイスをもらったりすることも非常に役立ちます。

モバイル端末からのアクセス数を確認:ホームページの訪問者のうち、どのくらいのユーザーがモバイル端末からアクセスしているかご存知ですか?Jimdo の有料版で利用できるアクセス解析では、モバイルユーザーの割合を見ることができます。ここで紹介しているアドバイスを実行することで、モバイル端末からのアクセスも増えるかもしれません。

Flash Player は使わない: Flash Player はモバイル端末で利用できないことが多くあります。そのため、Flash Player に頼ったホームページの構成をしてしまうと、必要な情報が訪問者に伝わらなくなってしまいます。幸いなことに Jimdo で作成されているホームページは、すべてのスマートフォン、タブレットで閲覧できる最新の HTML5 を使用しているので心配する必要はありません。

モバイルサイトを作るときに見落としがちなこと

  • モバイル端末からホームページを確認しない:ホームページの作成は主にパソコンで行うことが多いため、モバイル端末で自分のホームページがどう見えるのか、チェックするのを忘れがちになってしまいます。モバイル端末からの見え方を意識することで、パソコンから閲覧した際には気付かなかったポイントに気付くことができます。
  • 延々とスクロールさせるページ:文章量が多かったり、ページ内の画像が多くなると、必然的にページは縦長になります。特にモバイル端末はパソコンよりも表示領域が少ないため、何度も何度もスクロールしないとページの最後まで辿り着けないことがあります。モバイルユーザーの負担にならないよう、短く、ポイントを押さえたページ作成を心掛けましょう。
  • 画像の中にたくさんの情報を入れ込む:画像は閲覧者の目を引くため、視覚的に情報を伝えるのにとても有効です。しかし、モバイル端末では小さな画面に合わせて画像が縮小されてしまうので、画像内に細かい文章を載せたり、たくさんの情報を詰め込んでしまうと、読むのが困難になってしまいます。モバイル端末からの見え方を確認して、必要に応じて画像を複数にしたり、載せる情報を仕分けするなど、モバイル端末からでも読みやすい画像を作成しましょう。
  • 文字が多すぎるページ:パソコンから閲覧した際は問題なさそうな文章量も、モバイル端末から見た際にはとても長く表示されてしまいます。文章は段落ごと簡潔にまとめて、なるべく短い文章を作成するよう心掛けましょう。また、文章と文章の間に見出しや画像を挿入することで、長い文章を読みやすくする工夫もおすすめです。
  • コンテンツ同士が近すぎる:たとえばリンクやボタンをタップしたときに、思っていたものとは違う箇所をタップして、別のページが開いてしまうことはないですか?コンテンツ同士が隙間なく並んでしまうと窮屈な印象を受けるだけではなく、正しいリンクやボタンをタップすることが難しくなってしまいます。コンテンツとコンテンツの間は適度なスペースを空けるようにしましょう。
  • Flash player を使用している: 前述した通り、Flash Player はモバイル端末で利用できないことが多くあります。Flash Player を過度に使っていないか確認しましょう。
  • お問い合わせフォームのみを設置してる:パソコンを利用しているユーザーにとって、お問い合わせフォームの存在はとても便利です。しかしモバイルユーザーにとっては、残念ながら入力しづらいのが事実です。お問い合わせのページには、モバイルユーザーが簡単に連絡できる手段(メールアドレスや電話番号など)も併せて記載するようにしましょう。

モバイルサイトは ジンドゥーで

Jimdo を使えば、モバイルフレンドリーなホームページが簡単に作成できます。レスポンシブデザインに対応した 40 種類以上のレイアウト、HTML5、SEO など、モバイル端末からの閲覧を意識したホームページを作成するのに最適です。