読みやすいホームページとは!
読みやすいレイアウトになっているか
読みやすい文章になっているか
スマートフォンでもしっかり読めるか
今日はスマートフォンでもしっかり読めるかについてだね!
関連記事
皆さまのホームページは読みやすいでしょうか?
私はブログを書くことに集中しすぎてホームページの改善を怠っておりました。
文字のサイズを変えるだけでも読みやすい、見やすい印象はかなり変わってきます!
前回もご説明いたしましたが、
以前でしたら、
スマートフォンより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」のそのままのサイズにしておきましょう。
viewportは必須ってことね、忘れないようにしないとね!
PCサイトをスマートフォン画面にし確認する方法
Google Chromで簡単にスマトーフォン画面にする方法を教えます!
- ●STEP 01
- ご自身のホームページをGoogle Chromで開きましょう
- ●STEP 02
- ホームページ上で右クリックをしましょう!
- ●STEP 03
- [戻る],[進む],[再読み込み]など表示しましたでしょうか?重要なのは[検証]です
- ●STEP 04
- [検証]をクリック!
- ●STEP 05
- 下記画像のようにDevToolsが出ましたでしょうか?
キーボードショートカットは、
macOSではcommand+option+Iです。
WindowsではF12(またはShift+Ctrl+I)です。
- ●STEP 06
- DevTools左上に2つアイコンがあり、左「要素調査モード」と右「デバイスモード」があります。
右の「デバイスモード」をクリックしてください。
- ●STEP 06
- スマートフォン画面に変わりましたでしょうか?
変わらない場合は1度更新をおこなってください
もう1度「デバイスモード」を押すとPC画面に戻ります。
- ●補足 01
- 上のツールバーからスマーフォンサイズ等の変更もできます。
また、1番右端のアイコンで画面を回転でき、横向きが確認できます。
DevToolsでスマートフォンのソースコードを確認する方法
- ●STEP 01
- 先ほどは、右「デバイスモード」を使いましたが今回は左の「要素調査モード」を使用します。
- ●STEP 02
- 左の「要素調査モード」をクリックしてください。
- ●STEP 03
- 「要素調査モード」、「デバイスモード」2ヶ所青くなってるのを確認してください。
- ●STEP 04
- 「要素調査モード」で確認したい場所をクリックしてください。
- ●STEP 05
- [Elements]モードに変更になっていませんか?
左は「HTML」、右は「CSS」になっております。
- ●STEP 06
- 変更したいCSSの場所をクリックしてみましょう!
border: 5px solid #5c87a6; → border: 20px solid #c00c00;に変更してみましょう。
- ●STEP 07
- 変更できましたでしょうか?
ただし、あくまでプレビューになりますので更新したら元に戻ります。
- ●補足
- 実際はDevToolsに検証をおこないCSSを書き換えたい場合は
FTPソフトで変更をおこなってください。
でもDevToolsが画面下だと少し使いにくよね、、、
- ●補足 01
- DevTools画面の右上[×]ボタンの横にある[Customize and Control]をクリックしてください。
- ●補足 02
- Dock sideか設置場所の変更をおこなってください。
左から
[DevToolsを取り外し]
[DevToolsを左に固定]
[DevToolsを下に固定]
[DevToolsを右に固定]になります。
- ●補足 03
- 私のおすすめは[DevToolsを取り外し]を使用し
右にスマートフォン画面、左にDevToolsを出して作業をおこなっております。
ここまで長くなりましたが、1回操作を覚えるととても簡単ですので
1度試してみてください。
ここからは、
私自身のレスポンシブ対応にした際の修正をまとめてみました。
レスポンシブ対応によるカラム数の変更
1カラムを2カラムに変更したんだね、でも1カラムの方が見やすと思うけど、、、、
確かに1カラムの方が見えやすよね、
でも実際のスマートフォンで確認して見ましょう!
確かに見やすやは1カラムの方ですね!
ですが!
- Afterの方が記事が6件表示していますよね、つまり目に入ってくる情報が多いのです!
- Afterの場合ですと1件目の記事から2回のスワイプで6件全体の記事が見えます。
- 文字サイズに関しても読めないサイズではありません。
ですが、問題点もあります!
このような場合は1カラムオススメします!
- トップページの1番上の最新情報、人気記事など注目ポイントは1カラムをオススメします。
- ターゲット層によって1カラムにした方が良い場合もあります。
- シニア層が見るサイトでしたら1カラムをオススメします。
レスポンシブ対応によるプロフィール変更
プロフィール変更したの? そんな見えにくい感じしなかったけどね
確かに、読みやすさ、見えやすさに問題はありませんでした、
ですが、せっかくのプロフィール画面にあるものがありません。
- 文章を読んでいただき、興味を持っていただいたらSNSにも興味を持ちますよね、
私も文章を読ませていただき、その人に興味も持ったら確実にSNSを見に行きます。 - プロフィール画面は少しの文章で伝え確実にSNSボタンを設置しましょう。
- プロフィール文を省略した理由としては、
すでに「footer」に同じ文章が記述していたので省略させていただきました。
記事の復習内容
まとめ
今回はこれで以上です。
今回は主に2つの事「レスポンシブ対応によるカラム数の変更」、「レスポンシブ対応によるプロフィール変更」について書かせていただきました。
この2点を改善するだけでもスマートフォンでの読みやすや、見えやすさは変わってきます。
もう1度ご自身のスマートフォンを確認してみましょう。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事