スマホ対応・レシポンシブデザインとはマンガでわかるホームページ作成ホームへスマホ対応・レシポンシブデザインとは2020年07月11日PCでスマホ表示に切り替える方法【Chromeを使おう】スマホサイト開発や他社のスマホ対応動向確認のときPCで確認できれば楽です。PCのchromeでスマホ画面を表示する方法を紹介します。この記事を読むスマホ対応とはスマホでも利用しやすいようにWebサイトを調整することです。スマホ対応が必要なワケWebサイトはデスクトップパソコン・ノートパソコンに合わせて制作するのが一般的でした。この場合幅約1000px(~1920px)に合わせて作成します。スマホの横幅は360px前後です。そのためスマホで(パソコン用に作られた)サイトを見ると縮小されて表示されます。※例えば昔のゲームの攻略サイトなんかは未だにパソコン用サイトしかないものもあるので確認できます。縮小された場合文字が非常に小さくなっていたり、リンク同士が非常に近くなっていたりと利用しにくいものとなります。「別に拡大すれば使えるからいいじゃん」と思うかもしれません。あなたはいいかもしれませんが、あなたのサイトを利用するユーザーはいいと思うでしょうか?ユーザーは不満が高まれば何も言わずあなたのサイトから出ていき、他の便利なサイトを利用します。この問題を解決し、スマートフォンでも利用しやすいサイトを作ることが「スマホ対応」です。スマホ対応しているサイトの条件スマホ対応しているサイトというには以下の条件を満たしている必要があるでしょう。文字サイズが適切リンクのタップミスが発生しないCSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読むレスポンシブデザインとはレスポンシブデザインとはブラウザの幅に応じてデザインが柔軟に切り替わるデザイン(サイト)のことです。レスポンシブデザインが必要なワケパソコンとスマホでは幅が違うため、デザインを変える必要があります。昔はパソコン版サイトとスマホ版サイトを別のファイルとして作成し、端末がパソコンなのか、スマホなのかをシステムが判断しそれによって特定のファイルへ案内することがありました。この問題点として、1つの情報をパソコン版、スマホ版用に作る必要があり、更新がメンドウということです。パソコン版・スマホ版で情報が変わるようなサイトであればこの方法でもいいのですが、多くのサイトはユーザーの端末にかかわらず情報は同じです。ただでさえサイトの更新は大変なのにそれが倍になるとですからもうメンドウです!もう一つの問題はトップページへ案内してしまうということです。端末がスマホならどこのページに来ようともスマホ版サイトのトップページへ強制リダイレクト、という方法がありました。ユーザー全員がトップページに用事があるわけではありません。これによりスマホからは知りたい情報になかなか辿りつけないという問題がありました。これらの問題を解決するために登場したのがレスポンシブデザインです。一つのファイルをアクセスされた端末の幅に応じて、デザインだけ変化させるため、情報とURLは端末によらず変わらないということができるようになりました。レスポンシブデザインのメリット更新が1回で済むファイルが一つだけでパソコン版、スマホ版を兼ねるので更新するファイルも一つだけです。URLが一つファイルが一つだけなので当然URLも一つです。これによりスマホから直接下層ページへのアクセスも可能です。端末によってURLを振り分けるといった複雑なシステムが必要なくなるため構築が簡単になります。スマートフォンファーストスマートフォンファーストとは最初からスマートフォンを第一にデザインを考え、作ることです。昨今スマートフォンが非常に普及し、サイトによっては8割がスマホからのアクセスとなっています。こんな状況でパソコン用のデザインなど優先度が低いわけです。最初からスマートフォンユーザーのためにサイトを作った方がいい、というものがスマートフォンファーストです。自分のサイトのスマホユーザーはどのくらいいるのか、確認する方法があります。Googleアナリティクスを使いましょう。GoogleアナリティクスとはGoogleが無料で提供しているアクセス解析ツールです。Googleアナリティクスを導入していなければすぐ導入しましょう。Googleアナリティクスでスマホユーザーの確認方法ユーザー>モバイル>概要これで数も割合もわかります。スマホユーザー割合の特徴Googleアナリティクスがないときはサイトの特徴で判断するのもありです。スマホユーザーが多いCtoC、つまり一般顧客向けのサイトではスマホユーザーが多い傾向にあります。この場合土日問わずアクセス数はある程度一定です。パソコンユーザーが多いBtoC、つまり仕事時に使われるサイトではパソコンユーザーが多い傾向にあります。この場合土日のアクセスが少なく、平日のアクセスが多いようです。具体的なスマホ対応方法ここまでスマホ対応とレスポンシブデザインについて説明しました。具体的にどうやってスマホ対応させればいいのか、については次回以降説明します。次の記事>PCでスマホ表示に切り替える方法【Chromeを使おう】この記事を読む「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。