サイトやブログを作成したら実際に表示の確認をしよう

ブラウザーやデバイスでのチェック

ワードプレスでサイト作成やブログ運営をする人は多いが、大抵は作っただけで満足している。これは良くない。

ワードプレスに限らず全てのサイト作成には必須のことだけど、ウェブページ情報をネットに公開したらサイトのレイアウトくらいは確認した方がいい。なぜなら、ブラウザやデバイスによってはサイトのレイアウトが崩れているかもしれないからだ。

作成したサイトは1つだけかもしれないが、ウェブページ情報を表示するブラウザや機器は複数ある。その為、ブラウザ毎によって表示されたレイアウトが変わることもあるし、機器(デバイス)によって表示が変わることもある。なので、サイト作成をしたら、どんな風にウェブページ情報が表示されているかを確認することが必要だ

というわけで今回は、サイトやブログ更新をしたらウェブページ情報の表示を確認する方法を紹介しよう。

[cc id=3506]

サイトやブログを更新したら確認すべき2つのチェックポイント

サイトやブログを更新したら確認すべきチェックポイントは以下の2つだ。

  1. ブラウザ毎で確認する
  2. デバイス毎で確認する

説明しよう。

1,ブラウザ毎で確認する

インターネット上でウェブページ情報を画面上に適切に表示するためにはブラウザが必要だ。ブラウザには何種類もあるが、確認すべきブラウザは以下の4つで十分だ。

  1. Internet Explorer(インターネットエクスプローラー)
  2. Safari‎(サファリ)
  3. Google Chrome(クローム)
  4. Mozilla Firefox(ファイヤーフォックス)

一応説明しておくと、インターネットエクスプローラーはマイクロソフト社が開発したウェブブラウザ。これはウィンドウズのパソコンを購入したら標準装備されているものだ。

サファリはApple社が開発したウェブブラウザで、MACを購入したら既にインストールされているもの。サファリはインターネットエクスプローラーと比べると、表示や操作方法はぜんぜん違う。

Googleクロームやファイヤーフォックスは無料で提供されているブラウザでインターネットエクスプローラーやサファリよりもセキュリティーが高く、表示速度も速いのが特徴だ。その為、近年では、Googleクロームやファイヤーフォックスは世界中で多くの人に利用している。

ブラウザは人の好みによって使われているが大抵、上の4つが主流なので、この4つさえおさえればインターネットの中は網羅できると思う。

さて、ブラウザの確認方法だが。これらブラウザをひとつずつ開き、自分のサイトを検索し(実際にURBANを入力してもいい)、表示をチェックしてみよう

そこで、チェックする箇所は以下の5箇所だ。

  • レイアウト
  • 文字の大きさ
  • 文字化け
  • 画像(動画)の配置
  • 画像(動画)の大きさ

これらを隈無く確認し、崩れていれば適切に表示されるように修正していく。まだ、サイトのチェックをしていない方は今すぐ確認してみよう。

デバイス毎で確認する

ひと昔前までは、ウェブページ情報が閲覧できるデバイスはパソコン1つだけだった。しかし時代は進み、今ではスマホやタブレットもある。どこにいても手軽にウェブページ情報を見ることができるようになったわけだ。ホント、凄い時代になったと思うが、デバイス毎でサイトやブログの表示が実は変わっているのをご存知だろうか。

例えば、パソコンではキレイなレイアウトで表示されていたとしても、スマホで表示してみると文字が小さかったり、画像がムダに大きく、サイトの枠からはみ出ていることがある。これはスマホやタブレット対応ができていないサイトであるため、そのような表示になっていると思うが、この辺をチェックしていないサイトは結構多い。なので、これを読んでいるあなたは今すぐデバイス毎にチェックしてみよう。

デバイス毎にウェブページ情報を確認する方法はとても単純だ。それぞれの機器を用いて確認したいウェブページ情報を検索し、見るだけでOKだ。つまりiPhoneで検索してみたり、アンドロイドで検索してみるという具合だ。実際に検索してウェブページ情報が表示されたら、ブラウザの時と同じように文字化けやレイアウトの崩れ、画像の配置などを隈無くチェックしていく

スマホやタブレットに対応したレスポンシブ

スマホやタブレットには『レスポンシブ』という手法がる。レスポンシブは複数の機器や画面サイズに対応させるためのWebデザインの手法で、一度設定すれば、ほとんどのデバイスを網羅できるようになっている。

なお、HTMLで作成したサイトはかなり面倒臭い設定が必要だが、ワードプレスにはレスポンシブが標準採用されている。つまりワードプレスでサイトやブログを作成すれば、勝手にレスポンシブになるというわけだ。とても便利だと思う『ワードプレスを始めたい方はこちら』。

パソコン上でレスポンシブを確認する方法

実はパソコン上でレスポンシブを確認する方法がある。僕はこのやり方を教えてもらうまではツールなどを使って確認していたが、そんなものを使わなくても確認できる方法がある。

それは、パソコン上の画面のサイズをスマホのように小さく変更すればいい。そうすると勝手にレスポンシブの表示になるのだ(以下、画像を参照)。

画像では解りにくいと思うので以下の動画でも確認するといいだろう。

今回の記事はこれで終了だ。サイト作成したら、必ず表示をチェックしよう。

SPONSORED LINK

SNSでもご購読できます。