以外と忘れがち|できたサイトをスマホでチェックする重要性

WordPressでホームページを作っていると、作業がパソコン中心になりますよね〜。

やりだすと止まらなくなってしまう人も多いのではないでしょうか。
いろんなバランスを見て、ようやく完成!

そう思ってスマホで見ると、「あれ間延びしている…。」「改行がおかしくなっている」「思った以上に文章量が多いかな…」ということが起こりがちです。

いま、大半の人はスマホからネットサーフィンをしますよね。
そのことを考えると、スマホで見やすいホームページを作っていくことがとっても大切です。

スマホでその都度、更新しながらチェックするというのも一つの手です。
今回は、パソコン上で確認しながら作っていく方法をお伝えします。

Google Chromeの検証機能(デベロッパーツール)を使う

デベロッパーツールは、WEBサイト制作時にとても役立つ機能が満載のものなんです。

具体的には、

  • 気になるWEBサイトのコードを見ることができる
  • 自分のサイトのコードをテストで書き換えて表示をチェックすることができる
  • スマホやタブレットで表示した時、どう見えるか確認できる

できることがたくさんあって、私はとっても重宝しています。
今回はその中でも、スマホでの見え方を確認する方法をお伝えしますね。

デベロッパーツールの起動のしかた

1. Google Chromeでスマホ表示をしたいサイトページを開く

2. スマホ表示をしたいページを開いたら「右クリック」

3. 「検証」をクリック

4. 画面上部中央「 (赤枠)」をクリック

5. 画面が切り替わったことを確認する

6. 画面上「Responsive▼」をクリックし、表示させたい端末を選ぶ

スマホ表示した時の確認ポイント

スマホで見られることを前提にWEBサイトを作る上で、確認したいポイントは以下の通りです。

  • 改行の場所
  • 行間スペース
  • 文字量

パソコンで作っていると、ついスマホで見たときの視点を忘れがちになります。

そんな時は、Google Chromeのディベロッパーツールを使って、スマホでどのように表示されるかチェックしていくといいですよ。
そして、見やすく整えていくことを心がけると、よりお客様にとって見やすいサイトになっていきますよ^^