スマホでも読みやすいレイアウトにしよう！。現代社会に於いて「MFI・モバイルファーストインデックス」の時代と言われています。今回は、スマホでも読みやすいレイアウトにしよう！について書いていきます。
インターネットを閲覧するデバイスは、スマホがパソコンを抜いて最も高くなっています。そのことから、ブログのスマホ対応は必須です。この章では、簡単にスマホの表示に対応する方法とその注意点を解説していきます。
| 結論を先に話ししておきます |
| 私の見解ですが、見やすい導線として、ブログを構築する場合、一番大切な部分は、パッとブログを見た時、どのページを表示させても問い合わせフォームのページに飛べるようなデザインにする必要があると言うことだと考えます。
またSNSによる「シェアボタン」や「読者登録」など、分かりやすい位置に表示させるようにしましょう。例えばですが「シェアボタン」は、記事を読み終わった後、良かったなと思った人が「リツイート」してくれたり「いいね」をしてくれます。
このことからも分かるように、読み終わった時「リツイート」もしくは「いいね」ができるように、記事の最後に設置するようにした方が良いでしょう。またメニューの位置も分かりやすく、ブログを読む際、邪魔にならない位置に配置した方が良いです。
スマホに関連する別投稿もご覧になってみて下さい。 |
| ブログで稼ぎたい方、面倒な手続き準備は全てお任せ下さい！「ワードプレススターターパック」。 |
目次はコチラ
【スマホ未対応のブログは検索順位が落ちる？(動画付き)】
少し古い情報にはなってしまいますがご理解下さい。それは、総務省が発表した「令和元年度版インターネットの利用状況」の内容によると、次のようなことが記載されています。その内容とは。
端末別インターネットの利用率はスマホが「59.5%」と最も高く、スマホユーザーがブログにとって、重要な位置付けとなっています。また2018年にグーグルは、スマホ向けユーザーをメインに施策を打ち出しました。それが。
| MFI・モバイルファーストインデックス |
| 2018年、グーグルは、パソコン向けページではなく、モバイル向けページを評価の基準とし、インデックスすると言う施策を打ち出しました。それが「MFI」と呼ばれる「モバイルファーストインデックス」です。
「モバイルファーストインデックス」とは、検索エンジンがパソコン用のブログ向けである内容を元に、インデックスしてコンテンツの質を評価していたのを一変させ、スマホ用のブログを評価の主軸にしてインデックスすると言う意味です。
ではここで動画を視聴してみて下さい。題して「【モバイル対応してないとヤバイ？！】モバイルファーストインデックス(MFI)って何？」です。 |
動画を視聴してお分かり頂けたかと思いますが、つまり、モバイル向けページの評価を基準として検索順位が決定されると言うことです。スマホに対応していないブログは、検索に引っ掛からないと言う事態も起こっているようです。
【レスポンシブWebデザインとは(動画付き)】
「レスポンシブWebデザイン」とは、1つのHTMLファイルで「パソコン用」と「スマホ用」の両方に対応可能なデザインのことを言います。CSS言語をデバイスごとに用意し、表示の位置や文字の大きさなどを変えることができます。
それにより、それぞれのデザインに対応しています。つまりどう言うことかと言うと、ブログに書かれている内容は一緒でも、見え方が違うと言うことです。「パソコン」と「スマホ」を用意し、同じ画面を表示させてみて下さい。
| まずは下記の図解をご覧になってみて下さい。当ブログ(miブログ)のトップページと、現在記事を書いているこのページ「スマホでも読みやすいレイアウトにしよう！」の「パソコン側」と「スマホ側」の画面表示を見比べて見て下さい。 |
- 下記の図解は、パソコンから見たトップページの画面表示です。
- 下記の図解は、スマホから見たトップページの画面表示です。パソコン画面から見比べるとその違いは一目瞭然です。
- 次の図解は、現在このページ「スマホでも読みやすいレイアウトにしよう！」をパソコンから見た画面表示です。
- 次の図解は、スマホから見た画面表示です。パソコンから見たイメージと違うことが分かります。
| 冒頭でも説明してますが、もう一度言います。「レスポンシブWebデザイン」とは、1つのHTMLファイルで「パソコン用」と「スマホ用」の両方に対応可能なデザインのことを言います。「レスポンシブWebデザイン」を良く覚えておきましょう。 |
ではここで動画を視聴してみて下さい。題して「【超入門】初心者向けレスポンシブデザイン完全攻略！」です。
| WordPressテーマ・アフィリエイター収益最大化。最新SEO対策済み！「Diver」。 |
レスポンシブWebデザインのメリット&デメリット(動画付き)
「レスポンシブWebデザイン」には、どんな「メリット」があって、どのような「デメリット」があるのか気になるところではあります。そんな「メリット」「デメリット」について見ていきたいと思います。
| レスポンシブWebデザインのメリットについて | |
|
HTMLが1つなので、ブログに載せる情報など、修正や更新する時に1回の作業で済みます。またデバイスごとにHTMLがあった場合、修正や更新の作業をHTMLの数だけしなくてはならないので面倒です。 |
|
URLが1つなので、ブログを閲覧するユーザーにシェアされやすくなります。また「パソコン用のブログ」と「スマホ用のブログ」があった場合、ユーザーのデバイスに合わせて異なるURLを送ります。 |
|
スマホに対応したブログが、検索結果の上位に表示されやすくなる「モバイルフレンドリー」や、スマホ用のページが順位の決め手となる「モバイルファーストインデックス」に対応可能です。 |
| レスポンシブWebデザインのデメリットについて | |
|
HTMLが1つなので、パソコンと同じデータをスマホにも読み込ませますが、それと同時に、スマホで表示しないデータも一緒に読み込まれます。
その為、表示が完了するまである程度の時間が掛かります。まずは、Googleの「PageSpeed Insights」で測定することができるので試してみましょう。 |
|
HTMLが1つなので、パソコンとスマホに於いて、コンテンツの順番を変更したり、見せ方など、大幅に変更することは不可となっています。 |
|
デバイスごとにデザインを制作し、それに合わせたコーディングをする為、複雑になる可能性がでてきます。その為、制作に於いての工数が掛かってしまいます。 |
ではここで動画を視聴してみて下さい。題して「【Web初心者必見】レスポンシブデザインのメリット・デメリットとは？」です。
【レスポンシブWebデザイン対応のテーマを使おう】
この章では「レスポンシブWebデザイン」に対応した有料のワードプレステーマ(テンプレート)を紹介します。レスポンシブ対応のテーマは、1つのテンプレートで「スマホ」や「タブレット」端末に表示内容を自動的に最適化します。
近年に於いて「Andoroid」や「iPhone」などのスマホ端末「iPad」などのタブレット端末の普及などが急激に進み、モバイル端末の利用者が増えました。その為、ブログを「スマホ」や「タブレット端末」に対応させることが重要となってきています。
| スマホ向けに広告を掲載していると、パソコン版より、収益性が高くなる場合があります。ブログを運営するのであれば「スマホ」や「タブレット端末」にも完全対応しておきましょう。では下記に「レスポンシブWebデザインに対応しているテーマ(おススメ)」を紹介します。 |
| レスポンシブWebデザインに対応しているテーマ(おススメ) | ||
私がブログを始めたばかりの頃(10数年以上も前)は「レスポンシブWebデザイン」対応のブログを作成するには「HTML」や「CSS」と言ったようなWebの言語が分かっていないと作成することができない時代がありました。
ですが、今の時代、ワードプレスのほとんどのテーマがスマホに対応した「レスポンシブWebデザイン」となっています。新規でブログを作成する場合「レスポンシブWebデザイン」に対応したテーマを使いましょう。
【レスポンシブWebデザイン対応の注意点】
「レスポンシブWebデザイン」対応の注意点は「レスポンシブWebデザイン」のメリット&デメリットの意味ではなく、違う観点から見た注意点と言う意味合いで書いていきます。「レスポンシブWebデザイン」対応の注意点を見ていきましょう。
- 可変を意識しながらデザインしよう。
「レスポンシブWebデザイン」には、いくつかの制限があります。「HTML」は、1つしかないので「パソコン」と「スマホ」で、画像の数を変えたり、文章を変えたりすることは原則できないことになっています。
その他にも、可変を意識したデザインにすることです。「レスポンシブWebデザイン」も、WEBデザインの一種なので、デザインする際、ブラウザの幅が変更されたらどう見えるかなどを意識してデザインした方が良いでしょう。
| その理由として、コーディングする際、苦労することになるからです。最終的なブログ自体のクオリティにも関わってきます。 |
- 画像ファイルはできるだけ小さくそして少なくしよう。
画像ファイルをスマホで読み込む場合、時間が掛かることは言うまでもありません。画像ファイルの読み込みが原因でブログの表示が重くならないようにしないといけません。まずは以下のことに注意してみて下さい。
良ければ「無料のWebフォントサービス」を使ってみて下さい。「Google Fonts」「Adobe Fonts」。 念の為「有料のWebフォントサービス」も紹介しておきます。「TypeSquare」「LETS」「DynaFont」「FONTPLUS」「FONTStream」「REALTYPE」。 |
- 高解像度ディスプレイへの対応を検討しよう。
高解像度ディスプレイは、通常のディスプレイに比べ、解像度が倍以上。つまり通常の画像をそのまま使うとぼやけてしまい使いものにならないと言うことです。デザインも画像の解像度が低いと台無しです。
まずは使用する画像を縦横2倍で作成しよう。WEB上で幅300pxで表示したい画像がある場合、幅が600pxの画像を用意します。そうすることで倍の解像度の高解像度ディスプレイでも、画像を美しく表示させることが可能となります。
今回は以上となります。「スマホでも読みやすいレイアウトにしよう！」については理解して頂けたでしょうか？スマホに関するレイアウトの記事は検索すると沢山でてくると思うので、検索してみて下さい。
スマホに関連する別投稿もご覧になってみて下さい。
