スマホ専用サイトを作る前に、知っておいていただきたいことが3つあります。
具体的には、下記の3つのことです。
■ スマホ専用サイトを作る前に、知っていただきたい3つのこと
1.スマホサイトとパソコンサイトは、基本的に作り方は一緒であること
2.スマホサイトとパソコンサイトの違いは、
「人が使っている画面(モニター)の大きさ」であること
3.スマホサイトの表示の確認は、「Google Chrome」のブラウザを使うこと
|
それでは、「スマホ専用サイトを作る前の前提知識」を、1つずつ順番に、
ご説明させていただきますね!
【前提知識1】スマホサイトとパソコンサイトは、
基本的に作り方は一緒であること
そもそも、スマホは、「小型パソコン」です。
そのため、スマホを使って、現在 インターネット上に公開されているホームページは、問題なく見ることができます。
つまり、スマホサイトもパソコンサイトも、サイトの作り方は一緒ということです。
たとえば、ホームページを作るときに、文章を改行させたいときは br タグ を使いますし、文字の色を変更するときは font タグ を使いますよね。
だから、同じように、スマホサイトを作るときも、このようなタグは、そのまま使うことができるということです。
そのため、当サイトでお伝えしている「ホームページの作り方」を学べば、自然に、スマホサイトも作ることができるようになりますよ。
「スマホサイト作成」と言うと、難しく聞こえるかもしれませんが、、、スマホサイトもパソコンサイトも、作り方は一緒(HTMLを使って作るもの)であるため、まずこのことを覚えておいてくださいね。
【前提知識2】スマホサイトとパソコンサイトの違いは、
「人が使っている画面(モニター)の大きさ」であること
スマホサイトも、パソコンサイトも、サイトの作り方は一緒です。
では、スマホサイトとパソコンサイトは、何が違うのかというと、
人が使っている画面(モニター)の大きさが違います。
具体的には、スマホは画面(モニター)が小さいですし、パソコンは画面(モニター)が大きいですよね?
人がホームページを見るときの、端末の画面の大きさが、最も大きな違いになります。
だから、スマホサイトを作る場合は、「スマホの小さな画面でも、キレイに表示されるような構成」にしてあげる必要があるということです。
たとえば、パソコンサイトの場合、サイドバーがあったほうが、訪問者は使いやすくなるのですが、スマホサイトの場合、サイドバーは必要ありません。
スマホサイトに、サイドバーを設置してしまうと、画面が圧迫されて、とても見づらくなってしまうからです。
また、パソコンサイトの場合、横幅を指定すること(たとえば、横幅は900pxという形で指定すること)が一般的なのですが、
スマホサイトの場合は、横幅を具体的な数字で指定しないほうが良いです。
その理由は、スマホにはいろいろな種類があり、小さな画面のスマホもあれば、大きな画面のスマホもあるからです。
だから、スマホサイトを作る場合は、横幅を具体的な数字で指定するのではなく、「width=100%」という形で、パーセンテージで指定するようにします。
横幅を具体的な数字で固定するのではなく、パーセンテージで指定することで、画面の大きさに合わせてサイトが広がるため、どのスマホでも、キレイにホームページが表示されるようになる、ということですね。
■ ホームページとスマホサイトの「横幅」に関する注意点
パソコンサイトで、横幅をパーセンテージで指定してしまうと、今度はパソコンのモニターの全画面に、サイトが広がってしまうので、とても見づらくなってしまいます。
だから、パソコンサイトは、横幅を具体的な数字(たとえば、width="900")で指定して、スマホサイトは、横幅をパーセンテージ(width="100%")で指定するようにしましょう!
|
【前提知識3】スマホサイトの表示の確認は、
「Google Chrome」のブラウザを使うこと
パソコンを使って、スマホサイトを作っているときに、そのスマホサイトの表示を確認したい場合は、「Google Chrome」のブラウザを使うようにします。
具体的には、「Google Chrome」の画面の横幅を、縮めてあげればよいだけです。
これだけで、スマホの小さな画面サイズでの、表示の確認をすることができます。
ただ、「Google Chrome」の画面の横幅を、どれくらい縮めれば、スマホの画面サイズになるのかが分かりませんよね?
そこで、「Google Chrome」の拡張機能に、「Window Resizer」というものがあります。
この「Window Resizer」を使えば、簡単に、スマホの画面サイズに合わせて、「Google Chrome」の画面サイズを変更することができますよ。
「Window Resizer」のインストール方法は、まず、「Google Chrome」のブラウザで、「Window Resizer」 のページにアクセスします。
あとは、「Chrome に追加」のボタンをクリックするだけです。
そうすれば、「Window Resizer」を、いつでも使うことができるようになります。
なお、「Window Resizer」の使い方としては、「Google Chrome」のブラウザの右上に表示される、「Window Resizer」のボタン(マーク)をクリックします。
そして、ボタンをクリックすると、スマホの画面サイズを選ぶことができるので、それを選べば、自動的に、「Google Chrome」の画面が縮小されますよ。
この機能を使えば、スマホの画面サイズで、スマホサイトの表示の確認ができるので、とても便利です。
パソコンを使って、スマホサイトを作っているときに、そのスマホサイトの表示を確認したい場合は、このようなやり方で、表示の確認をします。
もちろん、スマホサイトを作っている途中で、そのスマホサイトのデータをレンタルサーバにアップして、自分が持っているスマホで、表示の確認を行ってもよいですよ。
ただ、スマホサイトを修正しながら、一回一回、スマホサイトのデータをレンタルサーバにアップしていく必要があるので、少し面倒かもしれませんね。
だから、まずは「Google Chrome」で表示の確認をしながら、スマホサイトを作っていって、ある程度完成したら、
レンタルサーバにアップして、ご自身のスマホで表示を確認する、、、という方法が良いかなと思います。
私がスマホサイトを作るときは、このようなやり方で、スマホサイトを作っています。
■ Window Resizer のポイント
「Google Chrome」の「Window Resizer」で、どの画面サイズを選んだら良いかというと、一番小さい「320×480」を選ぶようにしましょう。
その理由は、基本的に、一番小さな画面サイズで、スマホサイトがキレイに表示されれば、どのスマホ(大きな画面サイズのスマホ)でもキレイに見ることができるためです。
「320×480」で、表示を確認しながらスマホサイトを作成して、完成したら、「480×800」などの画面サイズでも、表示の確認をしてみる、という形でよいと思いますよ。
|
それでは、次のページで、スマホサイトの作り方をお伝えします!
パソコンサイトを作れる人であれば、スマホサイトは簡単に作ることができるので、
ぜひ確認してみてくださいね。