スマホやタブレットの表示は大丈夫? レスポンシブデザインを少しだけ気にしてみよう!

ブログ管理ブラウザ, ブログ管理, レスポンシブデザイン, 初心者

レスポンシブデザインヘッダー

ぐず夫
ぐず夫
ポチポチポチッとな!
よーし、これでワシの「パン補完計画」も完璧やな。

トリ師匠
トリ師匠
パソコン叩いて珍しな。
何してんねん?
ぐず夫
ぐず夫
毎週金曜のパン耳回収コースの新規プランを組んでたんや。新年度になってからちょいちょい変更があってな。マネすんなや!
トリ師匠
トリ師匠
ふーん(興味な…)
それはそうと、ぐず夫はちゃんとスマホでこのブログの見栄え確認してるか?
ぐず夫
ぐず夫
するわけないやん。
わざわざ自分のブログをスマホで見るよな暇人がこの世におるんか?

ということで、今回は「パソコンだけでなくスマホ用・タブレット用などレスポンシブデザインも少しは確認してみましょうね」という提案です。

レスポンシブデザイン気にしてますか?

ちゃんと気にしてる?

トリ師匠
トリ師匠
例をのっけると角が立つでやめとくけど、パソコンで表示する時はキレイに表示されるのに、スマホで見るとクッチャクチャなサイトとか結構あるやん?

ぐず夫
ぐず夫
うーん。そうなんか?
ワシ、あんまりスマホで他所様のブログとか読まへんねん。読むのは大手のニュースサイトだけやし、くぅだらない情報しか興味ないからサッパリや。
トリ師匠
トリ師匠
(聞いて損した…)
実際の話やけど、特に初心者さんやとレスポンシブデザインを意識したブログ作りなんて考えてへんこともしばしばや。その点Luxeritasは基本的に自動で設定されるで、ほとんど問題ないんやけどな。
ぐず夫
ぐず夫
ふーん。
でもその前に、ウチはスマホのお客はんをほとんど対象にしてないて言ってたやん。ならどーでもええやろ。めんどいし。
トリ師匠
トリ師匠
めんどい言うな!
基本的にスマホのお客さんを対象にしてない記事も多いけど、ぐず夫のくぅだらない個人的な記事なんかは、スマホの人が見ることもあるやろ。そん時ページがどう表示されてるか、ちゃんと確認せなあかんやろ?
ぐず夫
ぐず夫
(まーた面倒なこと言いだしたで…)
はいはい、確認すんのね。へいへい。
トリ師匠
トリ師匠
(超絶怒涛の嫌々っぷりやで…)
てことで、今回はシェア率の高いブラウザ ChromeとIE/EDGEを使って、スマホやタブレット表示の見栄えを確認してみよか。

※注:詳細な確認方法は今後変更になる場合がございます。予めご了承ください。

Chromeでスマホ表示を確認しよう!

Chromeイメージ

ぐず夫
ぐず夫
Chromeでスマホの表示を確認?
それワシがつこてる”パソコンのぶらうざ”やろ。そんなんで確認できんのかいな。

トリ師匠
トリ師匠
今日日な、ブラウザにはスマホ表示やらを確認できる機能が標準で付いてんねん。初心者さんはレスポンシブデザインを常に忘れがちやから、最低限覚えといてほしいて機能やな。
ぐず夫
ぐず夫
ふーん。
ま、さっさと確認して終わらせるで。
トリ師匠
トリ師匠
そんならまずはブラウザ(Chrome)開いてもらって、パソコンの「F12」ボタンを押すか、Chromeの設定「︙」から「その他のツール」の中の「デベロッパーツール」を選択してみて。

デベロッパーツール選択

ぐず夫
ぐず夫
おほっ!
なんや、変な画面が表示されたで!
トリ師匠
トリ師匠
いわゆるChromeの「Developer Tools」て機能やな。主にWeb開発の人が使う機能なんやけど、この機能ん中でスマホの見栄えも確認できんねん。
ぐず夫
ぐず夫
ほへ~。便利な世の中やで。
トリ師匠
トリ師匠
色々と英語の文字がズラズラ~と書かれてると思うけど、今回は別に気にせんでええわ。
そしたら次は下の画像を参考に、表示枠の中から「デバイスツールバー」ボタンを押してみるで。
デバイスツールバーボタン押下
タブが並んでいる中のスマホマークをクリック!
ぐず夫
ぐず夫
ん? なんか表示が変わったな。
トリ師匠
トリ師匠
するとここで確認したいデバイス(スマホの種類など)が選べんねん。機種を選べるツールバーが表示されるで、適当に選んで選択したってや。

デバイスを選択

ぐず夫
ぐず夫
お、なんや選んだら画面が細くなったで!
トリ師匠
トリ師匠
せやな。そしたら今度はパソコンの「F5」ボタンを押して、ページをリロード(画面表示を更新)するで。するといよいよ選んだデバイスでの表示が出てくるから、映りっぷりを確認や。
ウチのブログの表示を確認
選択した機種での画面表示が見られます
ぐず夫
ぐず夫
ほへ~。こんなんできるんや。
スマホ持ってへんでも確認できるてことやな。
トリ師匠
トリ師匠
便利やろ?
WordPressのテーマがレスポンシブデザインに対応してれば、おおよそ表示が崩れることはないと思うけど、意外なとこで画像が切れてたり、広告がはみ出てたりするもんや。
見栄えはちゃ~んと自分の目で見て確認するんやで。
ぐず夫
ぐず夫
へいへい…

トリ師匠
トリ師匠
元の画面に戻したい時は、もいちど「F12」押すか、上と同じようにChromeの設定「︙」から「その他のツール」の中の「デベロッパーツール」を選択すればええで。覚えといてな。

Microsoft Edgeでスマホ表示を確認しよう!

Edgeイメージ

トリ師匠
トリ師匠
次はEdgeでの確認方法も見とこか。基本的にInternet Explorer11もやり方は同じやから、同じように見たってな。

ぐず夫
ぐず夫
ふーん。まぁ何でもええけど。
トリ師匠
トリ師匠
そんならブラウザ(Edge)を開いて、パソコンの「F12」ボタンを押すか、Edgeの設定「…」から「その他のツール」の中の「開発者ツール」を選択してみて。

開発者ツール選択

ぐず夫
ぐず夫
基本的にはChromeと似てるんやな。
トリ師匠
トリ師匠
せやな。これも主にWeb開発の人が使う「開発者ツール」って機能で、こん中でスマホの見栄えも確認できんねん。
ぐず夫
ぐず夫
ブラウザ別にちゃんと用意されてるんやな。覚えとくわ。
トリ師匠
トリ師匠
こっちも英語の文字が並んでる思うけど、今回は気にせんでええ。そしたら次は下の画像を参考に、表示枠のタブん中から「エミュレーション」を選択するんや。

エミュレーションを選択

ぐず夫
ぐず夫
お、また表示が変わった。
トリ師匠
トリ師匠
また同じようにデバイス(スマホの種類など)を選べるんや。デバイス選んだらパソコンの「F5」ボタンを押して、ページをリロードして見栄えの確認するで。デバイス選択も色んなモードや解像度まで選べるから、自分好みの設定で確認するのも大事やで。

デバイスを選択(Edge)

ぐず夫
ぐず夫
なるへそ。
こんな感じで確認できんねんな。

トリ師匠
トリ師匠
IEの場合も、同じように「F12」押すか、設定から「開発者ツール」選ぶと同じ画面表示されるで、「エミュレーション」タブからデバイス選択して進めたってな。画面の戻し方もおんなじやで。

ブラウザを使ったスマホやタブレット表示の見栄え確認は以上や!

見栄え確認を終えて…

トリ師匠
トリ師匠
こんな感じで各デバイスごとに見栄えを確認しとくと、お客さんに変な画面を見せる心配もなくなるから安心やろ。
ぐず夫
ぐず夫
そんなもんかの。
ところで他のブラウザはええんか?
FirefoxとかOperaとか聞いたことあるで。
トリ師匠
トリ師匠
ChromeとIEにEdge。こんだけでブラウザ使用率のシェアが大体どれくらいあるか知ってるか?
ぐず夫
ぐず夫
知るわけないやろ。
トリ師匠
トリ師匠
古いバージョンも含むと大体8割や。
FirefoxとかOperaとかは、二つ足しても数%しか使ってる人おらへんねん。
ぐず夫
ぐず夫
……少数切り捨てかいな。
嫌や嫌や。リアリストはこれやらか嫌やで。
トリ師匠
トリ師匠
世の中な、全員に手厚い保証が与えられるなんて幻想やねん。ま、そもそもFirefoxとか使ってるよなコアな人は、こんな初期的な説明求めてへんやろ、関係ないねん。
ぐず夫
ぐず夫
勝手な決めつけ!

ということで、「レスポンシブデザインの確認をしてみよう」でした。
CSSで見栄えの設定をしているという初心者さんも多いと思いますが、「スマホ表示で見た目が崩れてた」なんてのはよくある話です。

せっかくですから、ご自身で見栄えも確認しておきましょう。オススメです。

ダンパ
ダンパ
WordPressでブログ作るのもオススメ!

素人でもできるWordPressのブログ立ち上げ手順一覧!

ぐず夫
ぐず夫
草の根運動やめい!

ではまた次回。