「はてなブログでスマホにデザインが反映していないようなんです。レスポンシブ対応のテーマにしているけどなんで？わからないから教えてほしいな。」
こんなお悩みに、お答えします。
この記事でわかること
- はてなブログでスマホにデザインを反映する方法
- スマホに反映しないサイトはもう時代遅れな話
こんにちわ、Jouji(@jouji0720)です。
はてなブログで書いていて、スマホとPCのデザインがうまく連携しないってことでなやんでいませんか。
結構、僕のもとにも友達から相談が来たりしますね。
今回はそんなあなたに、はてなブログのデザインをスマホに反映する方法をご紹介していきましょう。
この記事を読めば、はてなブログでデザインをスマホに反映する方法とスマホに対応する必要性やメリットまでまるっとばっちりわかっちゃいます。
この記事を書く僕は、はてなブログ歴は3年目。
今ではアフィリエイトからの収益が、毎月3,000円くらいいただいています。
そんな僕もブログのスマホ用にデザインを反映させるときには、ものすごくてこずりましたね。
そんな状況から救ってくれたお話になります。
ぜひ最後までお読みくださいね。
では行ってみましょう。
Here We Go!!
はてなブログでスマホにデザインを反映する方法
では早速はてなブログでスマホにデザインを反映する方法をお話していきましょう。
手順は、以下の通り。
- 手順①レスポンシブ対応のテーマを選ぶ
- 手順②「デザイン」→「スマートフォン」をクリック
- 手順③詳細設定をクリックし、レスポンシブデザインのチェックボックスにチェックを入れる
では詳しく見ていきましょう。
手順①レスポンシブ対応のテーマを選ぶ
まずはレスポンシブ対応のテーマを選びましょう。
というのもレスポンシブ対応のテーマにしないとみにくくなってしまうからです。
例えばレスポンシブ対応のテーマにするのと、非対応のものにするのとではカスタマイズが2つコードを書かないといけなくなります。
すると手間が増えますよね。
ですから、レスポンシブ対応のものを選んでおくのがいいですね。
おすすめのテーマに関しては、はてなブログのテーマの選び方を解説【おすすめテーマもあり】 にて詳しく解説していますので、ぜひどうぞ。
手順②「デザイン」→「スマートフォン」をクリック
まずは、管理画面から、「デザイン」→「スマートフォン」とクリックをします。
手順③詳細設定をクリックし、レスポンシブデザインのチェックボックスにチェックを入れる
すると、上記のような画面になります。
「詳細設定」をクリックしましょう。
すると、レスポンシブデザインと書かれているところがあります。
その横にチェックボックスがありますのでそちらをクリックして、チェックを入れましょう。
チェックしたら、最後に「変更を保存する」ボタンをクリックするのを忘れずに。
これでスマホにサイトのデザインを反映することができましたね。
最後にスマホでデザインを確認しておきましょう。
以下は、このブログのスマホでのスクショですね。
うまくできていますね。
以上が、レスポンシブデザインにする方法の解説ですね。
スマホに反映しないサイトはもう時代遅れな話
悲しい話ですが、スマホに反映しないサイトは、もう時代遅れだったりしますね。
ブログはPCからではなくスマホから見る時代に
ブログやサイト自体もPCからではなく、スマホから見る時代になっていますね。
というのも、スマホが急激に普及しているからです。
2018年度に総務省が出した調査結果によると、20代～30代ではPC利用が70％代前半なのに比べて、スマホの利用率は90％代前半になっていますね。
参照：総務省｜平成30年版 情報通信白書｜インターネット利用の広がり
スマホは簡単に言えば、小さいパソコンを持っているようなものです。
場所を選ばずに調べたいときに、調べられるようになりました。
そこで、ブログ自体もスマホに対応していることが条件になってきました。
【悲報】スマホに反映しないサイトは評価されない
そこで悲しい話ですが、スマホに反映しないサイトは評価されなくなってきていますね。
というのもスマホで見る人が、急激に増えた今スマホに反映していないサイトは読者の使い勝手がどうしても悪くなってしまいますよね。
いまやわからないことは、何でもスマホで調べることができそのほうがはやかったりします。
だからスマホに反映していないサイトは、時代の流れに乗っていないと判断されてしまい、評価が下がってしまう可能性があります。
それはブログサービスを使っていても同じで、知らずにいると読者からもGoogle先生からも嫌われるサイト運営をしてしまうことになりかねないのです。
できることをしてブログをGoogle先生に知ってもらおう
できることをしてブログをGoogle先生に評価してもらうというのが大事ですよね。
じゃあできることは何なのかというと、ブログデザインをスマホに反映させることなのです。
スマホにデザインを反映しなければならない3つの理由
スマホにデザインを反映しないといけない理由は以下の通り。
- 理由①検索エンジンに嫌われにくくなる
- 理由②読者の使い勝手がよくなる
- 理由③カスタマイズも楽になる
では詳しく見ていきましょう。
理由①検索エンジンに嫌われにくくなる
まず1つ目の理由は、検索エンジンに嫌われにくくなることですね。
実はパソコンとスマホで内容に差がないことってものすごく重要だったりしますよね。
例えばスマホで見たときにPCで見た内容と違ったら、正直どっちを信用していいかわからなくなりますよね。
そうすると検索に関する信頼性がなくなってしまいますよね。
そう考えたときに、PCとスマホのデザインは一緒のほうがいいってことになります。
だからスマホにデザインを反映するほうがいいんですね。
理由②読者の使い勝手がよくなる
2つ目の理由は、読者の使い勝手がよくなることですね。
というのも、スマホで見れるからですね。
これはGoogle先生も、Google が掲げる 10 の事実の中で以下のことを言っていますね。
5. 情報を探したくなるのはパソコンの前にいるときだけではない。
世界はますますモバイル化し、いつどこにいても必要な情報にアクセスできることが求められています。Google は、モバイル サービスの新技術を開発し、新たなソリューションを提供しています。スマートフォンから Google 検索にさまざまな方法でアクセスできるだけでなく、メールを読んだり、カレンダーでイベントを確認したり、動画を見たりなど、世界中のあちこちからスマートフォンをさまざまな用途に使えるようになりました。また、無料のオープンソース モバイル プラットフォームである Android では、さらに画期的な革新をモバイル ユーザーに提供したいと考えています。Android は、インターネットの土台にあるオープン性をモバイルの世界にもたらすものです。Android によって、ユーザーの選択肢が広がり、先進のモバイル体験が可能となるだけでなく、携帯通信事業者、メーカー、デベロッパーにとっては、新たな収益機会が生まれます。
つまりスマホでアクセスできることが第一条件になりますよね。
スマホにデザインを反映すると、ブログ自体にもアクセスがしやすくなります。
すると、読者のためになるしサイトのパフォーマンスも上がりますよね。
理由③カスタマイズも楽になる
3つ目の理由は、カスタマイズも楽になることですね。
デザインをスマホに反映すると、カスタマイズも楽になるんです。
デザインをスマホに反映していればPC用のデザインコードを変更すればスマホのデザインも自動的に反映されます。
しかし、スマホに反映していなければ、スマホ用にコードを書かないといけないことになり非常に手間ですよね。
この観点から見ても、デザインをスマホに反映するほうが楽になるんですね。
まとめ｜スマホで使えるかがサイト成功のカギ
お疲れさまでした。
ここまではてなブログのデザインをスマホに反映する方法とその重要性についてお話してきました。
まとめると、以下の通り。
まとめ
- はてなブログでスマホにデザインを反映する方法は、以下の通り。
- 手順①レスポンシブ対応のテーマを選ぶ
- 手順②「デザイン」→「スマートフォン」をクリック
- 手順③詳細設定をクリックし、レスポンシブデザインのチェックボックスにチェックを入れる
- スマホに反映しないサイトはもう時代遅れな話です。
- ブログはPCからではなくスマホから見る時代になった。
- 【悲報】スマホに反映しないサイトは評価されなくなる
- できることをしてブログをGoogle先生に評価してもらおう
- スマホにデザインを反映しなければならない3つの理由は以下の通り。
- 理由①検索エンジンに嫌われにくくなる
- 理由②読者の使い勝手がよくなる
- 理由③カスタマイズも楽になる
こんな感じです。
スマホで見れるサイトかどうか、見てストレスを感じないかどうかというのは非常に重要なカギになります。
ぜひ今回の記事を参考に、確認をされてみてはいかがでしょうか。
きっと収益化もしやすくなるはずです。
ってことで今回はこの辺で。
また次回に。
