ken-j’s diary

『ブログのこと』『メンタルのこと』『走ること』『仕事のこと』そして、日常のことが織り込まれたブログです。ごゆっくりどうぞ!

【レスポンシブWebデザイン 変更】レスポンシブにすると表示が小さくなる原因について調べてみた。いますぐ実行する価値あり!

当ブログにお越し頂き有難う御座います。

何度か訪問してくださった方はもうお気づきだと思いますが、ブログデザインを変更してみました。

ちょくちょく変更を行っておりますが試行錯誤しながら良いブログにしていきたいと考えているからです。そしてその内容を共有したいと思っております。

 

今回の変更目的は常々気になっていたモバイル(スマホ)のレスポンシブ表示についてです。

パソコン表示とモバイル表示を同じにする事を推奨する記事を何度か見たことがあり、1度試してみましたがスマホで見ると文字が小さすぎて見れたもんじゃない!

そして、たまにそのような人を見ます。

 

せっかくの記事が見にくかった為に届いていない可能性が非常に高いと思われます。

現にスマホで記事を見ようとして小さくて見えないので、即離脱した記事が沢山あります。

 

この際レスポンシブWebデザインを変更してスマホでも快適に閲覧してもらえるようにしませんか?

という事でそもそもレスポンシブWebデザインってなに?

から説明していきたいと思います。

(なお、初心者が少しだけ知識を得た程度なので詳しい説明はできませんがご了承を。あと大幅に間違っていた場合は指摘して頂くと助かります

 

そもそもレスポンシブWebデザインとはなに?

f:id:ken-j:20190715221321j:plain

ブログを閲覧する時ってパソコンとスマホ、タブレットで見ますよね?

その異なる画面サイズの幅を基準にWebサイト表示を柔軟に見やすく最適に表示することを指します。

つまり、どのデバイスで見ても同じ形で見られるってことですね。

どんなメリットがあるのか。

・SEO効果が分散されない

ブログを行う上で避けては通れない[SEO」。このSEOの重要要素である外部からのリンクが分散されない事に大きなメリットがあるようです。

レスポンシブWeb表示を採用している場合はデバイスのPC、スマホに関係なくひとつのページとして評価してもらえるようです。

つまり、レスポンシブWeb表示にしていなければ検索エンジンの評価が3分の1になるようです。

 

・新デバイスにも対応可能

スマホやタブレットが急速に普及したように今後新デバイスが登場する可能性が大いにあります。

そんな時にもこのレスポンシブWebデザインの場合、自動的に画面サイズを合わせてページが表示されます。

 

デメリットはあるの?

・デバイスごとに細かな調整ができない

大画面のパソコンには多くの情報を表示させ、画面の小さいスマホには情報を少なくするといった設定ができません。

 

・データ容量が大きくなりスマホの表示速度が遅くなる。

ぼくの最重要要素としてスマホの表示速度を早くしたいという思いがあり検証しておりますので、画像を元に説明します。

結論として、あとに紹介する「Brookln」を使用した所、逆に早くなりました。

(といっても激遅ですが・・)

使用前

f:id:ken-j:20190715212451j:plain

使用後

f:id:ken-j:20190715212514j:plain

 

28→34にアップしたのでこの方法を行う場合においてむしろメリットとなる事がわかりました。

 

では、どんなレスポンシブWebデザインがよいの?

f:id:ken-j:20190715222049j:plain

この疑問にぴったりと合った内容の記事を挙げられていましたので詳しくはリンクを見て頂きたいです。

ただ要約すると文字サイズはパソコンもスマホもタブレットも全て「16px以上」が推奨とされています。

その中で全デバイスで「16px以上」を採用しているサイトは数少ないそうです。

(参照記事では人気テーマ30のうち、たった3テーマだったそうです)

この「16px未満」になると

スマホで文字が読みづらい。

Google推奨文字サイズを下回る為、SEO的にも不利になる。

といったデメリットが発生するようです。

 

もっと詳しく知りたい方はこちらのオークニ様のリンクをご参照下さい。

www.okuni.me

 ぼくはどれを選んだのか、その理由。

f:id:ken-j:20190715222510j:plain

ぼくはデメリット項目でも名前を出しました「Brookln」を採用させて頂きました。

記事を閲覧して頂けると分かると思いますが、シンプルなデザインで見やすくかっこいいですよね。

選んだ理由しては、運営作者の説明が分りやすかったこと。デザインが単純に良いと感じた事です。

 

最後にその運営作者の説明記事を載せて締めていきたいと思います。

www.notitle-weblog.com

まとめ

ブログを運営しているとたくさんの方々の記事を目にし、ヒントを頂けます。

そんな中で今回の内容がずっと引っかかっておりやっと取り掛かる事が出来ました。

事の発端はタイトルのようにスマホで見ると表示が小さくなるので何か対策がないかと思い検索したことから始まります。

調べる前は使用するデザインは全共通でスマホの文字は小さくならないものだと思っていたので調べてよかったと感じています。

 

あと、思わぬ収穫としてはSEO対策にもなるんだと知れた事ですね。

今後当ブログの検索流入が少しでも上がる事を期待して様子を見ていきたいと思います。

効果があった場合はまた報告しますね。

 

最後までお読み頂き有難う御座いました。