SHU BLOG

BLOG NEWS ブログ

TITLE

初心者でも分かるレスポンシブ対応で読みやすいホームページにする方法

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
読みやすいホームページとは!
読みやすいレイアウトになっているか
読みやすい文章になっているか
スマートフォンでもしっかり読めるか
今日はスマートフォンでもしっかり読めるかについてだね!
ナカ君
ナカ君
シュウ
シュウ
前回の内容はホームページ改善案について書きました

関連記事

読みやすいホームページとは? 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」のそのままのサイズにしておきましょう。

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カラムの方が良いと思うけど?

確かに見やすやは1カラムの方ですね!
ですが!

  • Afterの方が記事が6件表示していますよね、つまり目に入ってくる情報が多いのです!
  • Afterの場合ですと1件目の記事から2回のスワイプで6件全体の記事が見えます。
  • 文字サイズに関しても読めないサイズではありません。

ですが、問題点もあります!
このような場合は1カラムオススメします!

  • トップページの1番上の最新情報、人気記事など注目ポイントは1カラムをオススメします。
  • ターゲット層によって1カラムにした方が良い場合もあります。
  • シニア層が見るサイトでしたら1カラムをオススメします。

レスポンシブ対応によるプロフィール変更

レスポンシブ対応によるプロフィール変更

プロフィール変更したの? そんな見えにくい感じしなかったけどね

確かに、読みやすさ、見えやすさに問題はありませんでした、
ですが、せっかくのプロフィール画面にあるものがありません。

プロフィール画像

あぁ! SNSボタンが追加されてる!

良く気づきましたね!でわ、解説いたします。

  •  文章を読んでいただき、興味を持っていただいたらSNSにも興味を持ちますよね、
    私も文章を読ませていただき、その人に興味も持ったら確実にSNSを見に行きます。
  •  プロフィール画面は少しの文章で伝え確実にSNSボタンを設置しましょう。
  •  プロフィール文を省略した理由としては、
    すでに「footer」に同じ文章が記述していたので省略させていただきました。

記事の復習内容

まとめ

今回はこれで以上です。

今回は主に2つの事「レスポンシブ対応によるカラム数の変更」、「レスポンシブ対応によるプロフィール変更」について書かせていただきました。

この2点を改善するだけでもスマートフォンでの読みやすや、見えやすさは変わってきます。
もう1度ご自身のスマートフォンを確認してみましょう。

スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top