レスポンシブ対応で読みやすいとは？

シュウ

読みやすいホームページとは！
読みやすいレイアウトになっているか
読みやすい文章になっているか
スマートフォンでもしっかり読めるか

今日はスマートフォンでもしっかり読めるかについてだね！

ナカ君

シュウ

前回の内容はホームページ改善案について書きました

読みやすいホームページとは? 12月〜1月におこなった改善作業

皆さまのホームページは読みやすいでしょうか？
私はブログを書くことに集中しすぎてホームページの改善を怠っておりました。
文字のサイズを変えるだけでも読みやすい、見やすい印象はかなり変わってきます!

前回もご説明いたしましたが、
以前でしたら、
スマートフォンよりPCの方を考えてデザインをする
現在でしたら、
PCよりスマートフォンの方を考えてデザインする時代になってきております。

(2020年1月15日データ:SHU BLOG)

(2020年1月24日データ:SHU BLOG)

: 数値だと約7割の方がスマートフォンで見に来てくれてるね！

スマートフォンで読みやすい、見やすいホームページにしていきましょう！

[記事の内容]

レスポンシブ対応を確認する方法

ご自身が制作したホームページがスマートフォンに対応しているか確認したことあるでしょうか？
モバイルフレンドリーテストではURLを入力することでご自身が制作したホームページがスマートフォンに
対応しているか、対応していないかの合否を検証してくれます。
1度、モバイルフレンドリーテストを試してください。

モバイルフレンドリーテスト

●STEP 01: 制作したサイトのURLをフォーム内に入れてください

●STEP 02: 「URLをテスト」をクリックしてください

: シュウさんのホームページちゃんとモバイルフレンドリーに合格してる

でわ、不合格だった場合はどのような原因が考えられるのでしょうか？

: 1番はviewportの設定を忘れてる人が多いかも！

レスポンシブ対応にはviewport設定は必須

head内にviewportタグを入れる必要があります

もし、入れない方はレスポンシブデザインになってはいないでしょう！
1番最初に入れとくように心掛けましょう。

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
<title>タイトルが入ります</title>
</head>
<body>
</body>
</html>

1「width=device-width」
以前でしたら、「width=320px」など指定しておりましたが、
ここ最近、「Android、タブレット端末」が登場したため、横幅を端末に合わせる指定をするようになりました。
それが、「width=device-width」になります。

2「initial-scale=1.0」
初期倍率を表します。「1.0」はそのままのサイズ、「2.0」は2倍サイズになります。
ご自身のホームページをスマートフォンで見る際に「2.0」の2倍サイズで見ることはないですよね。
ここは「1.0」のそのままのサイズにしておきましょう。